JavaScript charts - dynamically adding data points

Question

I am trying to dynamically add data points to jqplot as a result of AJAX received data, but I do not see a way to accomplish this. Is this not possible?

If it isn't, what other packages are available that can accomplish the same basic graphing plus allow for dynamic data?

Answer 1

You may want to check the example below on how this is handled in Flot. Flot is an open-source plotting library based on jQuery, like jqplot. Both libraries are very similar.

This is how fetching and plotting the data with AJAX would look like in code:

function fetchData() {
   $.ajax({
      url:      "json_fetch_new_data.php",
      method:   "GET",
      dataType: "json",
      success:  function(series) {
         var data = [ series ];

         $.plot($("#placeholder"), data, options);
      }
   });

   setTimeout(fetchData, 1000);
}

Make sure to check the following demo to see it in action:

• Flot Examples - Updating graphs with AJAX

For further information on Flot:

• Flot Project Site
• Flot Examples
• Other Flot Examples