Question

I am using jqPlot javascript library ( http://www.jqplot.com/ ) for graphs and charts in one of my application.

In my application, there are 5-6 pages where this library is used. But I would like to discuss one particular case here.

On 1 of page, I am loading 3 charts. Data for these 3 charts is populated from database tables.

There is different set of queries for each chart. So, populated data for each chart is different too.

Once I have populated data, I have to process it, before providing its input to chart.

What is the problem then:
Problem that I am facing is it takes lots of time for page to render on browser (which is quiet obvious, as first it will form query, then fire that query against database tables, get the data, process on data and give to chart)

One of my friend suggested to implement following thing using ajax. I really liked his solution.

This is what I intend to do:

I would create a page, which will load all the required js/css files for jqPlot library.
There will be 3 sections on that page, where I would put some GIF images indicating that some process is going on (say ajax-loader.gif)

Once page is loaded, it will fire 3 ajax call, one at a time, to fetch each chart.

My Question Is how can I load chart from data received from ajax-call?

jqplot puts data and creates chart in following way (look at example below)

<script class="code" type="text/javascript"> 
$(document).ready(function(){
  var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
      // Give the plot a title.
      title: 'Plot With Options',
      // You can specify options for all axes on the plot at once with
      // the axesDefaults object.  Here, we're using a canvas renderer
      // to draw the axis label which allows rotated text.
      axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
      // An axes object holds options for all axes.
      // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
      // Up to 9 y axes are supported.
      axes: {
        // options for each axis are specified in seperate option objects.
        xaxis: {
          label: "X Axis",
          // Turn off "padding".  This will allow data point to lie on the
          // edges of the grid.  Default padding is 1.2 and will keep all
          // points inside the bounds of the grid.
          pad: 0
        },
        yaxis: {
          label: "Y Axis" 
        }
      }
    });
});
</script> 

Answer 1

Since you’re using jQuery, you’d use the jQuery Ajax method to fetch the chart data after the page has loaded.

In your success function, your JS code (on the browser) receives the data from your server. Once you have the data, make the call to $.jqplot — passing in the data you’ve just received.

To initially show the busy gif, just use the img element as the static content of the chart2 div which will later be the graph’s container.

Some tips:

• Some browsers don’t do well at handling an animated gif while running a js program. So you may want to try a text message (“Loading chart…”) in addition to the rotating gif. — Or update the text messages. Eg start with “Fetching chart data from server” then update to “Processing chart data” once your success function has been called.

• Rather than starting all 3 Ajax calls at once, experiment with having the success function for the first chart initiating the second Ajax call. (In addition to it charting the data.)

If you have problems with your Ajax calls, Google for examples and ask a separate question on SO if you still have problems.