chartist-js/site/examples/example-plugin-zoom.js
2015-11-14 19:27:12 +01:00

40 lines
829 B
JavaScript

var data = {
series: [[
{ x: 1, y: 100 },
{ x: 2, y: 50 },
{ x: 3, y: 25 },
{ x: 4, y: 66 },
{ x: 5, y: 30 },
{ x: 6, y: 22 }
]]
};
var options = {
axisX: {
type: Chartist.AutoScaleAxis
},
axisY: {
type: Chartist.AutoScaleAxis
},
plugins: [
Chartist.plugins.zoom({ onZoom: onZoom })
]
};
var chart = Chartist.Line('.ct-chart', data, options);
var resetFnc;
function onZoom(chart, reset) {
resetFnc = reset;
}
var btn = document.createElement('button');
btn.id = 'reset-zoom-btn';
btn.innerHTML = 'Reset Zoom';
btn.style.float = 'right';
btn.addEventListener('click', function() {
console.log(resetFnc);
resetFnc && resetFnc();
});
var parent = document.querySelector('#example-plugin-zoom .chart');
!parent.querySelector('#reset-zoom-btn') && parent.appendChild(btn);