You may want to consider using Flot, an open-source plotting library based on jQuery.
I'm assuming that by real-time you mean that the graph will update automatically. The following is how your code would look like if you were to fetch and plot the data using AJAX polling at 1 second intervals:
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 out the following demo to see it in action (Click on the "Poll for Data" button):
- Flot Examples - Updating graphs with AJAX
For further information on Flot:
- Flot Project Site
- Flot Examples
- Other Flot Examples