<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
//create data set on our data
var dataSet = anychart.data.set([
[1732.8871544450521, -80.75603982433677, 1546.589955687523, 282.97513956204057, 742.7253536880016, 479.4877045787871, 772.9451237246394, -407.76275377720594],
[1359.810951165855, 297.2723776474595, 650.068512186408, -129.5293727889657, 1730.0641294568777, -240.9555669873953, 502.4238293990493, -342.1307345852256],
[1582.250035367906, -45.05145130679011, 1829.3536202982068, -113.36682550609112, 1572.7724805474281, 115.85489613935351, 1887.0485508814454, 6.104619242250919],
[882.0341778919101, 401.86547581106424, 1620.0402630493045, 267.45478762313724, 1925.4421964287758, 369.47823595255613, 1611.9598066434264, -234.8197065293789],
[1720.9005448967218, -115.85958395153284, 1862.451889552176, -248.42322198674083, 1283.97127520293, 325.95419557765126, 1869.39731054008, 383.6600771173835],
[1988.1872748956084, -216.48837719112635, 1187.2317604720592, 404.27824622020125, 1571.8251904472709, -96.22862562537193, 1826.7804672941566, -477.26183850318193],
[1177.1034905686975, -112.32297029346228, 1195.6303780898452, 448.2225668616593, 1955.4035440087318, 21.227966528385878, 1732.739924453199, 368.81575733423233],
[806.2865408137441, 385.1917199790478, 1556.4921544864774, -420.2395495958626, 1181.5953878685832, -277.57429890334606, 1269.245852716267, 242.08716116845608],
[1219.9176428839564, 346.6071574948728, 746.3413281366229, -89.49963096529245, 432.45446030050516, 441.71203626319766, 777.959868311882, 66.79431581869721],
[918.3598393574357, 448.46232794225216, 1436.13195233047, 184.53770177438855, 1119.1939394921064, -312.59450083598495, 1998.3739340677857, 5.358115769922733],
[1069.4813169538975, -106.57294746488333, 275.5963373929262, 205.64519427716732, 801.038783043623, 7.43780517950654, 213.5445298627019, 288.95508078858256],
[1697.732014581561, -495.7758020609617, 1940.3524557128549, 57.93372122570872, 1365.2942385524511, 246.1609710007906, 986.5696644410491, 248.502679169178],
[1991.1393811926246, -269.05048871412873, 1244.1082932054996, 378.08641185984015, 958.6482960730791, -222.58463921025395, 1939.0085907652974, -415.7125297933817],
[1097.460888326168, 298.815727699548, 1132.0891315117478, -409.8006417043507, 934.7271472215652, 78.89576349407434, 632.7374717220664, 240.34222541376948],
[25.66775120794773, 386.65700424462557, 1791.440169326961, -98.93955988809466, 1391.1143569275737, 46.02528735995293, 538.8829139992595, -428.8868750445545],
[933.5943283513188, 327.7888190932572, 1381.4812870696187, -36.58548276871443, 152.31592673808336, -233.14770916476846, 90.16109630465508, -45.90578889474273],
[1855.3984118625522, 234.1356431134045, 889.7370044142008, -261.737990193069, 344.61341612040997, -13.636548072099686, 588.4585017338395, -5.226874258369207],
[1714.1733933240175, -204.88095516338944, 905.8979945257306, -326.66328828781843, 179.5906499028206, -468.77168817445636, 472.5130721926689, -1.9495864398777485],
[1275.0087166205049, 29.06017890200019, 262.88699731230736, 496.59054493531585, 44.90217100828886, -441.4119469001889, 1782.4337324127555, -269.77423299103975],
[748.8169632852077, 336.41374530270696, 1684.0793499723077, -123.5110298730433, 1109.3289218842983, 423.3962232246995, 354.1235653683543, -307.66808334738016],
[1329.577681608498, 470.3424177132547, 273.0302046984434, -147.08185475319624, 1873.354759067297, 415.8988082781434, 1152.5639267638326, -228.8104579783976],
[480.6276988238096, -168.55818405747414, 724.2633355781436, -137.24337238818407, 879.4547133147717, -114.34462806209922, 988.7294666841626, -206.20282599702477],
[1954.3535728007555, 214.61118385195732, 851.2419117614627, 420.7796682603657, 953.703748062253, 89.70340387895703, 61.40255834907293, -160.9144126996398],
[1207.9351842403412, 386.9934994727373, 1142.1515522524714, 279.29873764514923, 1069.3543190136552, 239.56217663362622, 1898.9934483543038, 341.7890924029052],
[736.7067560553551, -414.1982044093311, 1718.982090242207, 83.44200439751148, 814.3314002081752, -484.1634132899344, 346.93830739706755, 150.88692586869]
]);
//map data for the first series, take x from the zero column and value from the first column of data set
var seriesData_1 = dataSet.mapAs({x: [0], value: [1]});
//map data for the second series, take x from the second column and value from the third column of data set
var seriesData_2 = dataSet.mapAs({x: [2], value: [3]});
//map data for the third series, take x from the fourth column and value from the fifth column of data set
var seriesData_3 = dataSet.mapAs({x: [4], value: [5]});
//map data for the fourth series, take x from the sixth column and value from the seventh column of data set
var seriesData_4 = dataSet.mapAs({x: [6], value: [7]});
//create scatter chart
var chart = anychart.scatter();
//set container id for the chart
chart.container('container');
//set chart title text settings
chart.title().text('Scatter Chart: Marker Series with Axis Ranges');
//set chart X scale settings
chart.xScale().ticks().interval(250);
chart.xScale().minimumGap(0).maximumGap(0);
//set chart margin settings
chart.padding().bottom(50);
//set chart axes settings
chart.xAxis().title().enabled(false);
chart.yAxis().title().text('Values');
//create first series with mapped data
chart.marker(seriesData_1).size(6).hoverSize(8);
//create second series with mapped data
chart.marker(seriesData_2).size(6).hoverSize(8);
//create third series with mapped data
chart.marker(seriesData_3).size(6).hoverSize(8);
//create fourth series with mapped data
chart.marker(seriesData_4).size(6).hoverSize(8);
//create 'low' range
chart.rangeMarker()
.from(0)
.to(500)
.fill('green 0.2')
.layout('vertical');
//create 'average' range
chart.rangeMarker(1)
.from(500)
.to(1500)
.fill('gold 0.2')
.layout('vertical');
//create 'high' range
chart.rangeMarker(2)
.from(1500)
.to(2000)
.fill('red 0.2')
.layout('vertical');
//create 'low' text marker
chart.textMarker()
.value(250)
.align('bottom')
.rotation(0)
.offsetY(50)
.layout('vertical')
.text('Low (0-500)');
//create 'average' text marker
chart.textMarker(1)
.value(1000)
.align('bottom')
.rotation(0)
.offsetY(50)
.layout('vertical')
.text('Average (500-1500)');
//create 'high' text marker
chart.textMarker(2)
.value(1750)
.align('bottom')
.rotation(0)
.offsetY(50)
.layout('vertical')
.text('High (1500-2000)');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>