Use Ajax to populate ZingChart

Ajax can be used to update ZingChart in a variety of ways. Use Ajax in combination with the ZingChart API to completely update the chart, update the data, or simply update a specific region (such as title).

Steps - Full Update

We will use jQuery and PHP for this example. Of course, any JS library and server-side language can be substituted.

1. Create initial ZingChart as described in the Overview.

2. Create an HTML button to trigger the reload.

            
                    <input type="button" id="reload" value="Get New Data" />
                

3. Hook up an event on button click.

                    $('#reload').bind('click', fetchData);
                

4. Create the fetchData function and have it fetch data from the server.

                    function fetchData(){
                        $.get('fetchdata.php', updateGraph);
                    }
                

5. Create a php file called fetchdata.php. This file should return a JSON packet. In our example, the data is randomly generated.

                    <?php
                    $values  = "";
                    for ($i=0;$i<20;$i++){
                    	if ($values != "")
                    	   $values .= ",";
                        $values .= rand(0, 50);
                    }
                    ?>
                    {
                      "graphset" : [
                      {
                        "type" : "area",
                        "series" : [
                         {
                            "values" : [<?php echo $values; ?>]
                         }] 
                      }]
                    }
                

6. Back in the HTML file, create a function called updateGraph that will refresh the ZingChart with the returned data.

            function updateGraph(data){
                var options = '{"data": ' + data + '}';
                zingchart.exec('zingchart-ajax', 'setdata', options);
            }
          

Example - Full Update

Steps - Data Update

1. Follow steps 1 - 4 from above.

5. Create a php file called fetchseries.php. This file should return a JSON packet. In our example, the data is randomly generated.

                    <?php
                    $values  = "";
                    for ($i=0;$i<20;$i++){
                    	if ($values != "")
                    	   $values .= ",";
                        $values .= rand(0, 50);
                    }
                    ?>
                        {
                         "series" : [
                         {
                            "values" : [<?php echo $values; ?>]
                         }]
                        }
                

6. Back in the HTML file, create a function called updateSeries that will refresh the ZingChart with the returned data.

            function updateSeries(data){
                var options = '{"data": ' + data + '}';
                zingchart.exec('zingchart-series', 'modify', options);
            }
          

Example - Data Update

Timed Updates

You may be tempted to do something like this for a timed update every 500ms. However, such an approach is more naturally handled by the feed or full refresh features built into ZingChart.