<!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>
#visible {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id='myChart'></div>
<pre id='visible'></pre>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var values = [];
for (var i = 0; i < 1000; i++) {
values.push(Math.random());
}
var myConfig = {
type: "bar",
scaleX: {
zooming: true
},
series: [{
values: values
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
zingchart.zoom = function(p) {
var start = p.xmin;
var end = p.xmax;
var series = zingchart.exec('myChart', 'getseriesvalues')[0];
series = series.slice(start, end + 1);
var visibleValues = JSON.stringify(series);
document.getElementById('visible').innerHTML = visibleValues;
}
</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>
<pre id='visible'></pre>
</body>
</html>
#visible {
white-space: pre-wrap;
word-wrap: break-word;
}
var values = [];
for (var i = 0; i < 1000; i++) {
values.push(Math.random());
}
var myConfig = {
type: "bar",
scaleX: {
zooming: true
},
series: [{
values: values
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
zingchart.zoom = function(p) {
var start = p.xmin;
var end = p.xmax;
var series = zingchart.exec('myChart', 'getseriesvalues')[0];
series = series.slice(start, end + 1);
var visibleValues = JSON.stringify(series);
document.getElementById('visible').innerHTML = visibleValues;
}