CODEWITHSUNDEEP
angularjshighcharts
WiSeeker
WiSeeker

Reputation: 842

Highcharts export stops working after first export

I've an AngularJS application using HighCharts (but not highcharts-ng though). I implemented export functionality similar to this JSFiddle which came from this GitHub discussion.

The issue is, after loading, the export works exactly once. For subsequent exports, it throws an error saying TypeError: Cannot read property 'exporting' of undefined.

Interestingly, the same behavior can be observed both in the JSFiddle and my implementation.

I believe it is referring to exporting property of chart options. Why would options become undefined after one export?

Upvotes: 0

Views: 498

Answers (1)

morganfree
morganfree

Reputation: 12472

exportChart() method losses its context which should be a chart but in fact after the first exporting the context is a deleted chart with no properties - so it does not have any options.

When the chart is loaded the callback is invoked

func: function (chart) {
           $scope.chartExport = $.proxy(chart.exportChart, chart);
         }

In the above callback chartExport()'s context is bound with the rendered chart - which is fine for the first exporting.

When the first exporting is being proceed there is created a new temporary chart with new options merged with the options from the original chart. The callback from the chartConfig is invoked once more time and now $scope.chartExport() is bound with the temporary chart which will be destroyed just after the exporting is finished.

Move the callback to load events and in in the export options overwrites it so it will not change the chartExport() context.

options: {
        chart: {
            type: 'bar',
            events: {
                load: function () {
                 $scope.chartExport = $.proxy(this.exportChart, this);
              }
            }
        }
    },

...

$scope.svgExport = function() {
    $scope.chartExport({type: 'image/svg+xml', filename: 'my-svg'}, {
        chart: {events: {load: function () {} }},
      subtitle: {text:''}});
}

example: http://jsfiddle.net/a9cse5pt/18/

Upvotes: 0

Related Questions