I previously posted some info about plotting data with jQuery and Flot and I have now set up a small demonstration:

The data value below are 100% random generated numbers, but they will simulate data from a database (or anything else for that matter). It consists of an array, where the first parameter the a Unix timestamp (multiplied by 1000) and the second parameter is the value to be drawed.

Generate a list of numbers
Push the generate button to get a new dataset.

You can also try to change some of the values, to see that happens. Just push the update button below, to have your changes updated.
Update graph if values has changed

The graph:

The code to output the graph is:

        var options = {
            xaxis: {
                mode: "time",
                timeformat: "%y/%m/%d %h:%M"
            },
            lines: {
                show: true,
            },
        };

        var data = [];
        data = eval($("#randomnumber").val());
        $.plot($("#livejquery"), data, options);

I have set a few options (goto the Flot API for futher options) – the xasis should convert the unix timestamp to a human readable format and the graph should output a line. I am only using the eval()-function because I have to convert the string input from the textarea (class #randomnumber) to an array.

Tags: flot, jQuery