Is there a complete/ready event even if I turn off the animation effect for a HighChart instance?

Question

I am wondering, is there any 'ready' event for me to check whether a HighChart instance is 100% rendered in my browser.

I found that with some complicated data, the HighChart would take a few seconds to render even if I turned off the animation. So is there any way to know that if the chart is 100% ready so that I can take further steps (like to trigger a function to convert the HighChart into a raw image data and to save it locally later)?

Example:

Animation ON: http://jsfiddle.net/7rLnwdxu/11

Animation OFF: http://jsfiddle.net/7rLnwdxu/12

The load event fires before the chart is completely drawn (the lines inside the chart). It also fails to fire when the animation is turned off. And the redraw event never fires in both cases.

Thanks,

CODE BELOW:

$(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line',
            events: {
              load: function(event) {
                alert('Chart loaded');
              },
              redraw: function(event) {
                alert('Chart redrawn');
              }
                    }
        },

        title: {
            text: 'Budget vs spending',
            x: -80
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Word1_Word2', 'Word1 Word2', 
            'Word1 - Word2', 'Word1-Word2', 
            'Word1 Word2', 'Word1 Word2'],
            tickmarkPlacement: 'on',
            lineWidth: 0,
            animation: false
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },

        series: [{
            name: 'Allocated Budget',
            data: [43000, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [50000, 39000, 42000, 31000, 26000, 14000],
            pointPlacement: 'on'
        }]

    });
});

And this is happening not just with Polar Chart but also simple charts, for example:

http://jsfiddle.net/AVygG/97/

CODE BELOW:

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                load: function(event) {
                    alert ('This is triggered BEFORE the whole series line is drawn');
                    console.log(this);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            name : 'TestSeries',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
        }]
    });

    chart.title = "hello";
});

Answer 1

Yes there are 2 events for this :

• load : Fires when the chart is finished loading.
• redraw : Fires when the chart is redrawn.

HIGHCHARTS API : http://api.highcharts.com/highcharts#chart.events

There some example of code :

• Highcharts's onReady event?

• when is a highchart completely loaded?

If you need the graph is finished to be rendered

Can you try with this :

• http://jsfiddle.net/7rLnwdxu/14/

or with following code :

$(function () {

    function myFunction() {
        setTimeout(function(){ 
        alert("Chart should be rendered now"); 
        //codes
        }, 1500);
    }

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line',
            events: {
              load: function(event) {
                myFunction();
              }
            }
        },

        title: {
            text: 'Budget vs spending',
            x: -80
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Word1_Word2', 'Word1 Word2', 
            'Word1 - Word2', 'Word1-Word2', 
            'Word1 Word2', 'Word1 Word2'],
            tickmarkPlacement: 'on',
            lineWidth: 0,
            animation: false
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },

        series: [{
            name: 'Allocated Budget',
            data: [43000, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [50000, 39000, 42000, 31000, 26000, 14000],
            pointPlacement: 'on'
        }]

    });
});