I'm wondering if there are any 2D graph plotting libraries that run on the client side using JavaScript? The basic idea is that you could put up a plot in a browser and the user can change things like X and Y scales and limits, zooming in and out, without having to constantly reload the web page from the server. The data itself would be fetched via AJAX, which would allow a user to also just wget the data straight from the server if they want to use heavy-duty tools. Something like the 2D part of matplotlib for Python.

This is something I took a look at a long time ago before deciding that it was faster to develop some code that just generated an SVG on the server side (using a built-in eCos web server), but now that I've been reading up on things like Prototype and jQuery, I'm wondering if someone has gone and done this already.

I'm wondering if there are any 2D graph plotting libraries that run on the client side using JavaScript? The basic idea is that you could put up a plot in a browser and the user can change things like X and Y scales and limits, zooming in and out, without having to constantly reload the web page from the server. The data itself would be fetched via AJAX, which would allow a user to also just wget the data straight from the server if they want to use heavy-duty tools. Something like the 2D part of matplotlib for Python.

This is something I took a look at a long time ago before deciding that it was faster to develop some code that just generated an SVG on the server side (using a built-in eCos web server), but now that I've been reading up on things like Prototype and jQuery, I'm wondering if someone has gone and done this already.

• javascript
• ajax
• plot

3 Answers 3

http://g.raphaeljs./ - cross browser patible JS charting library.

You may be interested in trying Flot. Flot is a pure Javascript open-source plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly on the client-side.

First of all, make sure to check the following example which uses data fetched via AJAX to plot a chart in rea-ltime:

• Flot Examples - Updating graphs with AJAX

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

function fetchData() {

    function onDataReceived(series) {
        data = [ series ];

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

    $.ajax({
        url:      "data_feed.php",
        method:   "GET",
        dataType: "json",
        success:  onDataReceived
    });

    setTimeout(fetchData, 1000);
}

Stack Overflow also uses Flot for the zoomable chart in the Reputation tab of user profiles.

For further information on Flot:

• Flot Project Site
• Flot Examples
• Other Flot Examples

This web page pares different javascript plotting tools.

http://sixrevisions./javascript/graph_chart_plot_data_javascript/

FLOT: http://code.google./p/flot/