r1901156 r1901156 - 1 month ago 8x
Ajax Question

Ajax and Highcharts - Display 'loading' until data is retrieved, then populate chart

I have some php scripts which esentially take a long time to retrieve data. As a result this impacts highcharts loading times as the current code I have only writes the chart once all the data is retrieved as the highcharts code is only echoed once all processing is complete.

This causes the page to basically show nothing until the data is retrieved. The goal is to have the highcharts load immedietly and then write to the series with the data returned by the php scripts.

So, what I'm looking to to is have all the graphs load immedietly and display 'loading' with no data and then use setData to pass in the data to the graph series once the php scripts have completed.

I'm just wondering if anyone had any examples of this being done? Another problem I'm having is only being able to set the data within the $(document).ready(function() function. e.g.



Many thanks and any help would be greatly appriciated.


You can't access variable out of scope, move that into that scope, or make variable global.

  • http://jsfiddle.net/M2jv7/33/ -inside scope

  • http://jsfiddle.net/M2jv7/34/ -global variable

    var pipeline_by_sales_stage_highchart;
    $(document).ready(function () {
                pipeline_by_sales_stage_highchart = new Highcharts.Chart({
    // somewhere: