<!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>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let v = (ts1, ts2) => {
let v = [];
let step = 1000 * 60 * 60 * 24,
granularity = 0;
if (ts2 - ts1 < 1000 * 60 * 60 * 24 * 30) {
step = 1000 * 60 * 60;
granularity = 1;
}
if (ts2 - ts1 < 1000 * 60 * 60 * 24) {
step = 1000 * 60;
granularity = 2;
}
if (ts2 - ts1 < 1000 * 60 * 60) {
step = 1000;
granularity = 3
}
if (ts2 - ts1 < 1000 * 60) {
step = 100;
granularity = 4;
}
for (let ts = ts1; ts < ts2; ts += step) {
v.push([ts, Math.random(10 * Math.sin(ts / (1000 * 60 * 60 * 24 * 10))) + granularity * Math.sin(ts / step)]);
}
return [step, v];
}
let tsmin = 1583302787000,
tsmax = 1664691587000;
let info = v(tsmin, tsmax);
let chartConfig = {
type: 'line',
backgroundColor: '#fff',
title: {
text: 'Infinite Zoom: ' + info[0] + 'ms'
},
plot: {
exact: true,
lineWidth: '1px',
maxTrackers: 9999
},
scaleX: {
step: info[0],
transform: {
type: 'date'
},
zooming: true
},
crosshairX: {
plotLabel: {
text: '%kl<br>%v',
backgroundColor: '#40ABD0',
borderColor: '#fff',
borderWidth: '1px',
decimals: 8,
fontColor: '#fff'
}
},
tooltip: {
visible: false
},
gui: {
behaviors: [{
id: 'Reload',
enabled: 'none'
}]
},
series: [{
values: info[1]
}]
};
zingchart.bind('myChart', 'zoom', (p) => {
let info;
window.setTimeout(() => {
if (!p.action) {
// user zoom
info = v(p.kmin, p.kmax);
} else if (p.action == 'viewall') {
info = v(tsmin, tsmax);
} else if (p.action == 'zoomin') {
let diff = p.kmax - p.kmin;
info = v(p.kmin + 1000 * parseInt((diff / 4) / 1000, 10), p.kmax - 1000 * parseInt((diff / 4) / 1000, 10))
} else if (p.action == 'zoomout') {
let diffmin = p.kmin - tsmin,
diffmax = tsmax - p.kmax;
info = v(p.kmin - 1000 * parseInt((diffmin / 4) / 1000, 10), p.kmax + 1000 * parseInt((diffmax / 4) / 1000, 10));
}
zingchart.exec(p.id, 'modify', {
data: {
scaleX: {
step: info[0]
},
title: {
text: 'Infinite Zoom: ' + info[0] + 'ms'
}
},
update: false
});
zingchart.exec(p.id, 'setseriesvalues', {
plotindex: 0,
values: info[1]
});
}, 100);
return false;
});
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
})
</script>
</body>
</html>
let v = (ts1, ts2) => {
let v = [];
let step = 1000 * 60 * 60 * 24, granularity = 0;
if (ts2 - ts1 < 1000 * 60 * 60 * 24 * 30) {
step = 1000 * 60 * 60;
granularity = 1;
}
if (ts2 - ts1 < 1000 * 60 * 60 * 24) {
step = 1000 * 60;
granularity = 2;
}
if (ts2 - ts1 < 1000 * 60 * 60) {
step = 1000;
granularity = 3
}
if (ts2 - ts1 < 1000 * 60) {
step = 100;
granularity = 4;
}
for (let ts = ts1; ts < ts2; ts += step) {
v.push([ts, Math.random(10 * Math.sin(ts / (1000 * 60 * 60 * 24 * 10))) + granularity * Math.sin(ts / step)]);
}
return [step, v];
}
let tsmin = 1583302787000, tsmax = 1664691587000;
let info = v(tsmin, tsmax);
let chartConfig = {
type: 'line',
backgroundColor: '#fff',
title: {
text: 'Infinite Zoom: ' + info[0] + 'ms'
},
plot: {
exact: true,
lineWidth: '1px',
maxTrackers: 9999
},
scaleX: {
step: info[0],
transform: {
type: 'date'
},
zooming: true
},
crosshairX: {
plotLabel: {
text: '%kl<br>%v',
backgroundColor: '#40ABD0',
borderColor: '#fff',
borderWidth: '1px',
decimals: 8,
fontColor: '#fff'
}
},
tooltip: {
visible: false
},
gui: {
behaviors: [
{
id: 'Reload',
enabled: 'none'
}
]
},
series: [
{
values: info[1]
}
]
};
zingchart.bind('myChart', 'zoom', (p) => {
let info;
window.setTimeout(() => {
if (!p.action) {
// user zoom
info = v(p.kmin, p.kmax);
} else if (p.action == 'viewall') {
info = v(tsmin, tsmax);
} else if (p.action == 'zoomin') {
let diff = p.kmax - p.kmin;
info = v(p.kmin + 1000 * parseInt((diff / 4) / 1000, 10), p.kmax - 1000 * parseInt((diff / 4) / 1000, 10))
} else if (p.action == 'zoomout') {
let diffmin = p.kmin - tsmin, diffmax = tsmax - p.kmax;
info = v(p.kmin - 1000 * parseInt((diffmin / 4) / 1000, 10), p.kmax + 1000 * parseInt((diffmax / 4) / 1000, 10));
}
zingchart.exec(p.id, 'modify', {
data: {
scaleX: {
step: info[0]
},
title: {
text: 'Infinite Zoom: ' + info[0] + 'ms'
}
},
update: false
});
zingchart.exec(p.id, 'setseriesvalues', {
plotindex: 0,
values: info[1]
});
}, 100);
return false;
});
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
})
