jquery - JavaScript Zooming Chart function -

jquery - JavaScript Zooming Chart function -

i write java-script code trace line chart after finishing need modify code allow zooming mouse selection , panning canvas

function zoom(){ startindex = document.getelementbyid("startpoint").selectedindex; endindex= document.getelementbyid("endpoint").selectedindex; var newlabels=oldlabels.slice(startindex, endindex); var newdata=olddatas.slice(startindex,endindex); data.labels= newlabels; data.datasets.data=newdata; mychart = new chart(context).line(data); }

the link chart

learn context.translate , context.scale methods.

knowing these allow pan & zoom.

the basics of zoom are:

translate point want zoom scale canvas desired zoom level erase canvas redraw chart @ -chartwidth/2 , -chartheight/2.

pan easier:

translate x-distance want pan erase canvas redraw chart @ 0,0

javascript jquery html5-canvas zoom linechart