flot sample

by Yoshiharu Kamata

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/excanvas.min.js"></script><![endif]-->
<h1>Flot Examples</h1>
<div id="cnt">
<div id="placeholder" style="width:600px;height:300px;"></div>
</div>
<div id="cnt2">
<div id="placeholder2" style="width:600px;height:300px;"></div>
</div>

JavaScript

$(function() {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

    var data = [];
    for (i = 0; i < 10; i++) {
        data.push({
            label: "d" + i,
            data: $.map(d1, function(val) {
                return [[val[0], val[1] + i + 1]]
            })
        });

    }
    $("#cnt,#cnt2").dialog({
        height: 360,
        width: 650
    });
    $.plot($("#placeholder"), data, {
        legend: {
            position: "nw",
            noColumns: 6
        }
    });
    $.plot($("#placeholder2"), data, {
        legend: {
            position: "nw",
            noColumns: 6
        }
    });

});