<!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>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"graphset": [{
"scale-x": {
"zooming": 1
},
"arrows": [{
"text": "Positive Correlation",
"font-family": "Helvetica",
"font-size": 12,
"background-color-1": "#ef4810",
"background-color-2": "#cc3300",
"border-width": 2,
"border-color": "#a62b02",
"shadow": true,
"shadow-blur": 3,
"offset-y": -35,
"padding": "5px",
"from": {
"hook": "node:plot=2,index=1"
},
"to": {
"hook": "node:plot=2,index=19"
}
}],
"scale": {
"size-factor": 0.9
},
"type": "scatter",
"series": [{
"values": [
[0, 83],
[1, 73],
[2, 146],
[3, 165],
[4, 141],
[5, 61],
[6, 96],
[7, 62],
[8, 161],
[9, 108],
[10, 21],
[11, 169],
[12, 168],
[13, 61],
[14, 161],
[15, 78],
[16, 107],
[17, 97],
[18, 160],
[19, 159],
[20, 153]
]
},
{
"values": [
[0, 107],
[1, 68],
[2, 130],
[3, 163],
[4, 190],
[5, 163],
[6, 145],
[7, 115],
[8, 99],
[9, 190],
[10, 151],
[11, 68],
[12, 109],
[13, 154],
[14, 151],
[15, 100],
[16, 96],
[17, 158],
[18, 111],
[19, 185],
[20, 176]
]
},
{
"values": [
[0, 107],
[1, 112],
[2, 134],
[3, 133],
[4, 145],
[5, 142],
[6, 160],
[7, 144],
[8, 166],
[9, 179],
[10, 150],
[11, 190],
[12, 193],
[13, 184],
[14, 218],
[15, 220],
[16, 243],
[17, 235],
[18, 250],
[19, 258],
[20, 269]
]
},
{
"values": [
[0, 284],
[1, 243],
[2, 237],
[3, 273],
[4, 248],
[5, 245],
[6, 276],
[7, 162],
[8, 186],
[9, 144],
[10, 252],
[11, 190],
[12, 216],
[13, 247],
[14, 255],
[15, 189],
[16, 180],
[17, 158],
[18, 277],
[19, 245],
[20, 173]
]
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});
</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>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
var myConfig = {
"graphset": [{
"scale-x": {
"zooming": 1
},
"arrows": [{
"text": "Positive Correlation",
"font-family": "Helvetica",
"font-size": 12,
"background-color-1": "#ef4810",
"background-color-2": "#cc3300",
"border-width": 2,
"border-color": "#a62b02",
"shadow": true,
"shadow-blur": 3,
"offset-y": -35,
"padding": "5px",
"from": {
"hook": "node:plot=2,index=1"
},
"to": {
"hook": "node:plot=2,index=19"
}
}],
"scale": {
"size-factor": 0.9
},
"type": "scatter",
"series": [{
"values": [
[0, 83],
[1, 73],
[2, 146],
[3, 165],
[4, 141],
[5, 61],
[6, 96],
[7, 62],
[8, 161],
[9, 108],
[10, 21],
[11, 169],
[12, 168],
[13, 61],
[14, 161],
[15, 78],
[16, 107],
[17, 97],
[18, 160],
[19, 159],
[20, 153]
]
},
{
"values": [
[0, 107],
[1, 68],
[2, 130],
[3, 163],
[4, 190],
[5, 163],
[6, 145],
[7, 115],
[8, 99],
[9, 190],
[10, 151],
[11, 68],
[12, 109],
[13, 154],
[14, 151],
[15, 100],
[16, 96],
[17, 158],
[18, 111],
[19, 185],
[20, 176]
]
},
{
"values": [
[0, 107],
[1, 112],
[2, 134],
[3, 133],
[4, 145],
[5, 142],
[6, 160],
[7, 144],
[8, 166],
[9, 179],
[10, 150],
[11, 190],
[12, 193],
[13, 184],
[14, 218],
[15, 220],
[16, 243],
[17, 235],
[18, 250],
[19, 258],
[20, 269]
]
},
{
"values": [
[0, 284],
[1, 243],
[2, 237],
[3, 273],
[4, 248],
[5, 245],
[6, 276],
[7, 162],
[8, 186],
[9, 144],
[10, 252],
[11, 190],
[12, 216],
[13, 247],
[14, 255],
[15, 189],
[16, 180],
[17, 158],
[18, 277],
[19, 245],
[20, 173]
]
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});