Highcharts - export current state of a chart

The export method of Hig开发者_运维技巧hcharts uses the chart's initial state rather than the latest state according to the user's interaction. If you show/hide some series, then export the chart, you still get all series rather than what the chart actually shows.

var chart;
$(document).ready(function() {

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'line',
        },

        title: {
            text: 'Expression Profile',
        },

        subtitle: {
            text: 'Reference: act'
        },

        xAxis: {
            categories: ['14das-seedling','25das-aerial','35das-aerial',
                         '42das-rosette','42das-stem','53das-stem',
                         '53das-inflores'],
            title: {
                text: 'Development stages',
                margin:20
            }

        },

        yAxis: {
            title: {                                            
                text: 'Log10 act'
            },

            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        legend: {
            margin:20
        },

        tooltip: {
            formatter: function() {
                return '<b>mir'+ this.series.name +'</b><br/>'+
                                this.x +' <br/>log10:'+ this.y ;
            }
        },

        series: [
            {
                name: '156a',
                data: [-2.75607, -3.41066, -4.10053, -4.63856, 
                       -4.73462,-4.6145,-3.90987]
            },
            {
                name: '156b',
                data: [-4.15935, -6.54969, -6.70229, -5.80646, 
                       -5.68092,-5.38481,-5.96406]
            },
            {
                name: '156c',
                data: [-4.83317, -5.52142, -4.94995, -5.47179, 
                       -4.97123,-4.86163,-5.12806]
            },
            {
                name: '156d',
                data: [0, -5.93499, -5.41856, -5.88918, 
                       -6.70304,-5.69335,-5.39792]
            },
            {
                name: '156e',
                data: [-4.0707, -6.1185, -6.58353, -6.17734, 
                       -6.84433,-5.4114,-5.37817]
            },
            {
                name: '156f',
                data: [-3.97561, -5.02619, -5.67834, -5.65722, 
                       -5.76238,-4.51125,-5.30344]
            },
            {
                name: '156g',
                data: [-3.81589, -2.50758, -2.41623, -3.63983, 
                       -3.73004,-2.90055,-3.61997]
            },
            {
                name: '156h',
                data: [-4.31169, -5.74017, -5.55419, -5.26679,
                       -5.01009,-4.99596,-5.68062]
            }
         ] 
    });
});

Here's my fiddle: http://jsfiddle.net/sherlock85/safKs/

Is it possible to export the current state of the chart?

Any help would be appreciated.

For me is exporting the latest state even when I modify the chart. I guess if you do a chart.redraw() after your modifications it will export the latest state. Also try to upgrade to the latest version of highcharts.

This issue has been fixed in version 2.1.5 of Highcharts. I believe the comment from the changelog seen below addresses your issue.

Exported charts now respect user set min and max after zoom and visibility option.

The problem still persists if you have used the following code in your chart:

chart = new Highcharts.Chart({
        chart: {
            ...,
            events: {
                load: function(event) {
                    this.series.forEach(function(d,i){if(d.options.id==1)d.hide()})
                }
            }    
        },...

This piece of code is responsible for initially hiding series in your graph (with id==1 in this example). It seems it has the negative side effect of not being able to export the current state of your graph.

Remove it, and the initial problem is solved.

If you still want to keep the 'initial hiding' of data series, and you use AJAX (and jQuery) for example to fetch the data, use the following kind of code instead:

$.ajax({
    type: "GET",
    url: myURL,
    data: {data: myData},
    dataType: 'json',
    success: function(data) {
        chart.series[0].setData(data[0], true);
        chart.series[1].setData(data[1], true);
    },
    complete: function(jqXHR, textStatus) {
        chart.series[1].hide();
    }
});