javascript - zoom a Highcharts chart programatically -



javascript - zoom a Highcharts chart programatically -

in this jsfiddle demo have 2 highcharts line charts. when 1 of charts zoomed, other chart should zoom in on same area. code is

xaxis: { events: { aftersetextremes: function (event) { var index = document.getelementbyid('container2').dataset.highchartschart; var chartpartner = highcharts.charts[index]; chartpartner.xaxis[0].setextremes(event.min, event.max); chartpartner.showresetzoom(); } }, },

wherein container2 id of dom element other chart rendered to. behaviour working, there couple of little problems:

after zooming-in, grayness shading area used select area zoom doesn't disappear in firefox (i haven't tested other browsers) the "reset zoom" button doesn't appear in other chart despite fact phone call chartpartner.showresetzoom();

your problem called setextremes in infinite loop, because told "aftersetextremes" event trigger "aftersetextremes" event. can prevent having state-variable.

that's why introduced this:

var updating = false;

and changed lastly part of events that:

if (!updating) { updating = true; chartpartner.xaxis[0].setextremes(event.min, event.max); chartpartner.showresetzoom(); } else { updating = false; }

jsfiddle: http://jsfiddle.net/qq4wnyqo/1/

edit: original jsfiddle produced console error 'maximum phone call stack size exceeded'. next time want stuff that.

edit: still need find solution hiding 'reset zoom' buttons after they're used.

javascript highcharts

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -