HighStock Export Renders Incorrect Title and Navigator Series

Question

We have a chart containing 4 series of data that are shown only one at a time. All 4 series are already added to the chart just that 3 are not visible. To view another series you click on it in the legend. Now that series is viewable but the other 3 are not.

Here is a sample of what we are doing: jsFiddle. Note that is does not have the export buttons enabled - see item 3 below.

We are allowing the user to export the chart. Testing this we have found 2 issues (and a third just came up while trying to make a jsFiddle for this post): 1) Upon changing the range via the rangeSelector buttons it renders corectly but upon export the "highlighted" range selection is the one in that is the default selection when the chart initially loads. Solved this by removing the rangeSelector from the export. Which is not really an ideal solution but it hides the bug. Here is how we did it:

 exporting: {
     chartOptions: {
         rangeSelector: {
             enabled: false
         }
     },
     buttons: {
         enabled: false
     },
     filename: 'UnempRate',
     width: 590
 }

2) When changing what the series is that is visible we also set the navigator series to it and update the chart title (which we have at the bottom of the graph). When a user exports the data the main graph has the correct series listed but the navigator goes back to the original "loaded" series and so does the chart title.

3) When trying to create a jsFiddle of this I get errors on the events: legendItemClick that the chartTrend is not defined only if I set the export buttons to be enabled:

 navigation: {
     buttonOptions: {
         enabled: false
     }
 }

So I am not sure how to let you guys see the issue here.

Basically we want the navigator series and the chart title to match what the user has selected via the legendItemClick when they choose to export the chart.

slawekkolodziej slawekkolodziej · Accepted Answer · 2013-03-24T13:49:20

these issues are the result of how the exporting module works.

Basically it creates a completely new chart in a hidden element. This new chart always uses SVG renderer (so browsers without SVG support, like old IE or Androids 2.x generates code that it can't display). Then Highcharts get generated SVG code and sends it to the exportin server. However, this new chart is created from options, so almost everything you changed in a runtime is gone.

If you don't have to support Androids 2.x or IE<9, you can call chart.getSVG and send POST request directly to the exporting server. Here is the sample request payload:

------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="filename"

UnempRate
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="type"

image/png
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="width"

590
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="scale"

2
------WebKitFormBoundaryiBhRpBiiTfKjcspB
Content-Disposition: form-data; name="svg"

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ...and so on to the end of SVG code
------WebKitFormBoundaryiBhRpBiiTfKjcspB--

But if you have to support as many browsers as possible, you should store informations like navigator series, active range selector button, etc. and pass them as a second parameter in exportChart method: http://api.highcharts.com/highcharts#Chart.exportChart()

HighStock Export Renders Incorrect Title and Navigator Series

1 Answers