<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "scatter",
"title": {
"text": "Scatter Plot"
},
"crosshair-x": {
"plot-label": {
"text": "X: %kv<br>Y: %vv",
"font-family": "Georgia",
"alpha": 0.7,
"callout": true,
"padding": "10%",
"border-radius": "5px"
},
"scale-label": {
"visible": false
},
"marker": {
"size": 4,
"background-color": "yellow",
"border-width": 1,
"border-color": "gray"
}
},
"crosshair-y": {
"type": "multiple", //"single" (default) or "multiple"
"scale-label": {
"visible": false
}
},
"scale-x": {
"item": {
"font-size": 10
},
"guide": {
"line-style": "dotted"
}
},
"scale-y": {
"item": {
"font-size": 10
},
"guide": {
"line-style": "dotted"
}
},
"plot": {
"tooltip": {
"visible": false
},
"hover-marker": {
"visible": false
},
"marker": {
"rules": [{
"rule": "%v < 20",
"background-color": "#003399"
},
{
"rule": "%v >= 20 && %v <= 40",
"background-color": "#3366cc"
},
{
"rule": "%v >= 40 && %v <= 60",
"background-color": "#009999"
},
{
"rule": "%v >= 60 && %v <= 80",
"background-color": "#00cc99"
},
{
"rule": "%v > 80",
"background-color": "#ccccff"
}
]
}
},
"series": [{
"values": [
[0.1, 9],
[0.3, 11],
[0.5, 5],
[0.7, 3],
[0.8, 15],
[0.9, 15],
[1.1, 24],
[1, 9],
[1.3, 5],
[1.8, 21],
[1.9, 29],
[2, 15],
[2.1, 13],
[2.3, 29],
[2.5, 10],
[2.9, 30],
[3, 21],
[3.1, 30],
[3.3, 35],
[3.5, 25],
[4, 30],
[4.1, 33],
[4.5, 39],
[4.9, 35],
[5, 40],
[5.3, 41],
[5.6, 67],
[6, 59],
[6.1, 45],
[6.5, 57],
[6.7, 70],
[6.8, 74],
[6.9, 51],
[7, 60],
[7.1, 61],
[7.2, 50],
[7.3, 71],
[7.4, 64],
[7.8, 56],
[8, 75],
[8.1, 61],
[8.5, 71],
[8.7, 70],
[8.8, 70],
[8.9, 90],
[9, 81],
[9.2, 82],
[9.3, 93],
[9.5, 75],
[9.9, 95],
[10, 99]
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
var myConfig = {
"type": "scatter",
"title": {
"text": "Scatter Plot"
},
"crosshair-x": {
"plot-label": {
"text": "X: %kv<br>Y: %vv",
"font-family": "Georgia",
"alpha": 0.7,
"callout": true,
"padding": "10%",
"border-radius": "5px"
},
"scale-label": {
"visible": false
},
"marker": {
"size": 4,
"background-color": "yellow",
"border-width": 1,
"border-color": "gray"
}
},
"crosshair-y": {
"type": "multiple", //"single" (default) or "multiple"
"scale-label": {
"visible": false
}
},
"scale-x": {
"item": {
"font-size": 10
},
"guide": {
"line-style": "dotted"
}
},
"scale-y": {
"item": {
"font-size": 10
},
"guide": {
"line-style": "dotted"
}
},
"plot": {
"tooltip": {
"visible": false
},
"hover-marker": {
"visible": false
},
"marker": {
"rules": [{
"rule": "%v < 20",
"background-color": "#003399"
},
{
"rule": "%v >= 20 && %v <= 40",
"background-color": "#3366cc"
},
{
"rule": "%v >= 40 && %v <= 60",
"background-color": "#009999"
},
{
"rule": "%v >= 60 && %v <= 80",
"background-color": "#00cc99"
},
{
"rule": "%v > 80",
"background-color": "#ccccff"
}
]
}
},
"series": [{
"values": [
[0.1, 9],
[0.3, 11],
[0.5, 5],
[0.7, 3],
[0.8, 15],
[0.9, 15],
[1.1, 24],
[1, 9],
[1.3, 5],
[1.8, 21],
[1.9, 29],
[2, 15],
[2.1, 13],
[2.3, 29],
[2.5, 10],
[2.9, 30],
[3, 21],
[3.1, 30],
[3.3, 35],
[3.5, 25],
[4, 30],
[4.1, 33],
[4.5, 39],
[4.9, 35],
[5, 40],
[5.3, 41],
[5.6, 67],
[6, 59],
[6.1, 45],
[6.5, 57],
[6.7, 70],
[6.8, 74],
[6.9, 51],
[7, 60],
[7.1, 61],
[7.2, 50],
[7.3, 71],
[7.4, 64],
[7.8, 56],
[8, 75],
[8.1, 61],
[8.5, 71],
[8.7, 70],
[8.8, 70],
[8.9, 90],
[9, 81],
[9.2, 82],
[9.3, 93],
[9.5, 75],
[9.9, 95],
[10, 99]
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});