<!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>
<button id='addNode'>AddNode</button>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: 'line',
title: {
text: 'Timestamp 2d addnode API Call'
},
series: [{
values: [
[
1383555600000,
70.34363
],
[
1383555900000,
70.28301
],
[
1383556200000,
70.2224045
],
[
1383556500000,
70.2224045
],
[
1383556800000,
70.16179
],
[
1383557100000,
70.7679138
],
[
1383557400000,
71.91954
],
[
1383557700000,
71.9801559
],
[
1383558000000,
71.85893
],
[
1383558300000,
71.61648
],
[
1383558600000,
71.4952545
],
[
1383558900000,
71.25281
],
[
1383559200000,
71.1315842
],
[
1383559500000,
70.9497452
],
[
1383559800000,
70.7679138
],
[
1383560100000,
70.5860748
],
[
1383560400000,
70.46485
],
[
1383560700000,
70.28301
],
[
1383561000000,
70.10117
],
[
1383561300000,
70.16179
],
[
1383561600000,
71.31342
],
[
1383561900000,
71.61648
],
[
1383562200000,
71.55587
],
[
1383562500000,
71.37403
],
[
1383562800000,
71.19219
],
[
1383563100000,
70.9497452
],
[
1383563400000,
70.7679138
],
[
1383563700000,
70.7073
],
[
1383564000000,
70.5860748
],
[
1383564300000,
70.4042358
],
[
1383564600000,
70.2224045
],
[
1383564900000,
70.10117
],
[
1383565200000,
70.2224045
],
[
1383565500000,
71.43465
],
[
1383565800000,
71.79832
],
[
1383566100000,
71.61648
]
] //values
}],
'plot': {
"max-nodes": 99999,
"max-trackers": 9999,
"marker": {
"size": 5
},
"selected-marker": {
"background-color": "red"
}
},
"scale-x": {
"step": "second",
"transform": {
"type": "date",
"all": "%d %M %Y<br>%h:%i:%s:%q %A",
"guide": {
"visible": true
},
"item": {
"visible": false
}
}
},
"tooltip": {
"text": "%scale-key-value",
"visible": true,
"font-color": "white"
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
document.getElementById('addNode').addEventListener('click', function addNode() {
zingchart.exec('myChart', 'addnode', {
nodeindex: 1,
plotindex: 0,
value: [
1383555800000,
20
]
})
});
</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>
<button id='addNode'>AddNode</button>
</body>
</html>
var myConfig = {
type: 'line',
title: {
text: 'Timestamp 2d addnode API Call'
},
series: [{
values: [
[
1383555600000,
70.34363
],
[
1383555900000,
70.28301
],
[
1383556200000,
70.2224045
],
[
1383556500000,
70.2224045
],
[
1383556800000,
70.16179
],
[
1383557100000,
70.7679138
],
[
1383557400000,
71.91954
],
[
1383557700000,
71.9801559
],
[
1383558000000,
71.85893
],
[
1383558300000,
71.61648
],
[
1383558600000,
71.4952545
],
[
1383558900000,
71.25281
],
[
1383559200000,
71.1315842
],
[
1383559500000,
70.9497452
],
[
1383559800000,
70.7679138
],
[
1383560100000,
70.5860748
],
[
1383560400000,
70.46485
],
[
1383560700000,
70.28301
],
[
1383561000000,
70.10117
],
[
1383561300000,
70.16179
],
[
1383561600000,
71.31342
],
[
1383561900000,
71.61648
],
[
1383562200000,
71.55587
],
[
1383562500000,
71.37403
],
[
1383562800000,
71.19219
],
[
1383563100000,
70.9497452
],
[
1383563400000,
70.7679138
],
[
1383563700000,
70.7073
],
[
1383564000000,
70.5860748
],
[
1383564300000,
70.4042358
],
[
1383564600000,
70.2224045
],
[
1383564900000,
70.10117
],
[
1383565200000,
70.2224045
],
[
1383565500000,
71.43465
],
[
1383565800000,
71.79832
],
[
1383566100000,
71.61648
]
] //values
}],
'plot': {
"max-nodes": 99999,
"max-trackers": 9999,
"marker": {
"size": 5
},
"selected-marker": {
"background-color": "red"
}
},
"scale-x": {
"step": "second",
"transform": {
"type": "date",
"all": "%d %M %Y<br>%h:%i:%s:%q %A",
"guide": {
"visible": true
},
"item": {
"visible": false
}
}
},
"tooltip": {
"text": "%scale-key-value",
"visible": true,
"font-color": "white"
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
document.getElementById('addNode').addEventListener('click', function addNode() {
zingchart.exec('myChart', 'addnode', {
nodeindex: 1,
plotindex: 0,
value: [
1383555800000,
20
]
})
});