0

I currently have a chart which I place in my page by calling 

function myChart(aParameter) {
  // here is some code which queries data based on aParameter
  // and sets a variable later used for series: [...] in the chart below

  $("#mychartid").highcharts({...})
}

This function is then called when a choice on some radio buttons is done:

$('#productselect input[type=radio]').change(function(){
    myChart($(this).val())
      })

It works fine, but is not effective: the complete redrawing of the chart moves the page and I need to scroll back on the chart.

When searching for a solution, I found a good question and answers which gives some details on how to correctly update a chart (which I hope will fix my issue). It suggests to first create a chart (chart = new Highcharts.Chart(chartOptions)) and then use incantations of chart.series[0].setData(data,true); to update the data.

The point I am missing is how to initially position such a chart on my page (using jQuery), similar to my $("#mychartid").highcharts({...}) above?

Community
  • 1
  • 1
WoJ
  • 27,165
  • 48
  • 180
  • 345

1 Answers1

1

You can still create the chart exactly as you are, except that you assign it to a variable. So 

$("#mychartid").highcharts(chartOptions);
var chart = $("#mychartid").highcharts();

Then you can perform whatever actions you want on chart, including the

chart.series[0].setData(data,true);

Example:

** UPDATED to correct code **

jlbriggs
  • 17,612
  • 4
  • 35
  • 56
  • Thanks. You mention that both do the same thing, but the update (via `chart.series[0].setData(data,true);`) will be in-place, right? In other words the browser will notice a change in the DOM but the chart does not need to be rewritten and its size set to zero, then recalculated (this is, I suppose, what is causing the page drift)? – WoJ Feb 11 '16 at 14:58
  • I just modified my code to have `chart = $("#mychartid").highcharts({...})`. It breaks when I want to do a `chart.series[0].setData(data,true);`. When checking `chart`in DevTools, it is a `div`, not a highcharts object (see http://i.imgur.com/Pber22t.png for a screenshot) – WoJ Feb 11 '16 at 15:20
  • Right. Sorry. Corrected code added to answer, with example – jlbriggs Feb 11 '16 at 15:42
  • Thank you - this is exactly what I was looking for. And indeed - changing the values via `setData` solves the problem of the page scrolling (the change is in situ) – WoJ Feb 11 '16 at 15:46