Flot Example

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE < 9).

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<h1>Flot Examples</h1> 
<div id="placeholder" style="width:600px;height:300px;"></div>

JavaScript

var options = {
    yaxis: {
        tickColor: "#fff"
    },
    xaxis: {
        tickColor: "#fff"
    }
};
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

    var d2 = [
        [0, 3],
        [4, 8],
        [8, 5],
        [9, 13]
    ];

    // a null signifies separate line segments
    var d3 = [
        [0, 12],
        [7, 12], null, [7, 2.5],
        [12, 2.5]
    ];

    $.plot($("#placeholder "), [d1, d2, d3], options);
});