Zing Scatter Big Data
HTML
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
<body>
<div id='myChart'></div>
</body>
</html>
JavaScript
zingchart.THEME="classic";
var randomValue = function() {
var value = Math.pow( Math.random(), 2 ) * 100;
return Number( value.toFixed( 2 ) );
}
var getData = function() {
var result = [];
for( var i = 0; i < 2000; i++ ) {
result.push( [randomValue(), randomValue()] );
}
return result;
}
var myJson = {
"graphset":[
{
"type":"scatter",
"background-color":"#fff #fbfbfb",
"title":{
"text":"Height Versus Weight of 507 Individuals By Gender<br>Source: Heinz et al. 2003",
"background-color":"#00a679 #33b894"
},
"plotarea":{
"margin":"60 40 dynamic dynamic"
},
"legend":{
"margin-top":55,
"shadow":0,
"alpha":0.8,
"border-color":"#00a679",
"border-radius":5,
"border-width":3,
"adjust-layout":true,
"cursor":"hand",
"item":{
"bold":true,
"cursor":"hand"
},
"marker":{
"type":"circle",
"size":5,
"border-color":"#fff",
"border-width":1,
"cursor":"hand"
}
},
"shapes":[
{
"type":"star5",
"x":"89%",
"y":"24.6%",
"size":6,
"background-color":"#00a679"
}
],
"labels":[
{
"text":"Selected",
"x":"91%",
"y":"23%",
"bold":true,
"font-size":11
}
],
"scale-x":{
"offset-start":20,
"offset-end":20,
"items-overlap":true,
"max-items":16,
"label":{
"text":"Height (cm)"
}
},
"scale-y":{
"min-value":"auto",
"offset-start":20,
...