Duplicate Series in the legend when exporting - highcharts

Question

Sorry if this question has been asked before but I could not find a similar question that is related to my problem.
The issue I am experiencing is that when exporting to PNG, JPG etc. the series would double up. So if my on screen chart has four series plotted, when it comes to exporting it will have eight series in the legend.
I think the problem is related to 'load' event of the chart is being executed subsequent times when exporting.
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
function fnFetchData(chart) {
// Just imagine an AJAX request has just been done to get a JSON response
// JSONData = $.getJSON('/FetchSales');
var JSONData
JSONData = {
seriesName: 'Sales 2013',
data: [(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1]
};
//alert('About to load the chart Data');
chart.addSeries({
name: JSONData.seriesName,
data: JSONData.data,
type: 'spline'
}, true);
chart.redraw(true);
};
// Create the chart
$('#container').highcharts({
chart: {
events: {
load: function () {
fnFetchData(this);
}
}
},
title: {
text: 'Chart Data from load Event'
},
exporting: {
enabled: true,
scale: 2,
filename: 'ChartWithDoubleupSeries'
},
spline: {
animation: false
},
series: []
});
});
I can reproduce the issue, here is an example:
http://jsfiddle.net/FtjJF/
I keep thinking it might be a bug that the 'load' event is being executed when exporting unless this is the standard behaviour and I need to include and extra option.
Versions details:
Highstock JS v1.3.1 (2013-04-09)
Highstock JS v1.3.1 (2013-04-09) Exporting module

Answer 1

Export chart through pragmatically like , make load event null
var chart = $('#chart-container').highcharts();
chart.exportChart(
{type: 'image/png', filename: 'name'},
{chart: { events:null } });

Answer 2

Simple workaround is to use setTimeout():
load: function () {
var chart = this;
setTimeout(function() {
fnFetchData(chart);
}, 1);
}
And for me looks like a bug, reported: https://github.com/highslide-software/highcharts.com/issues/1868
Thanks!

Answer 3

Currently as an alternative solution was to store the series names into an array. When the load event is fired I check the series name to see if it exists in the array. If it does, don't call the addSeries method.
var AvailableSeries = [];
$( chart.series).each(function(key,value){
AvailableSeries.push(value.name);
});
if ($.inArray( 'Sales 2013' ,AvailableSeries)==-1 ) {
chart.addSeries(name:'Sales 2013', data:[234,453,56732,435,4,45,32,232,43]});
};
After a little bit more investigation for a long term solution, I've added this line "options.chart.events = null;" to the exportpting.js script.
The problem with this solution might be a legitimate reason for the chart's events to be executed when the chart is being exported. I can't think of one. May be there should be an option to suppress events when exporting:
{ exporting:{ skipEvents:true } }