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>

<span id="someID">[["19.00","0.04833"],["18.45","0.04717"],["18.35","0.04833"],["18.20","0.04686"],["18.10","0.04718"],["18.00","0.04937"],["17.50","0.04674"],["17.35","0.04804"],["17.20","0.04810"],["17.10","0.04723"],["17.00","0.04989"],["16.45","0.05519"],["16.35","0.08635"],["16.20","0.04742"],["16.10","0.04712"],["16.00","0.04861"],["15.50","0.04607"],["15.40","0.04758"],["15.30","0.04662"],["15.20","0.04768"]]</span>

JavaScript

$(function () {
    var someID = $("#someID").text();
    var parsed = $.parseJSON(someID);
   
   
    
    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, parsed ]);
});