<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “www.w3.org/TR/html4/loose.dtd”> <html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Flot Examples</title>
   <link href="layout.css" rel="stylesheet" type="text/css"></link>
   <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
   <script language="javascript" type="text/javascript" src="../jquery.js"></script>
   <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
   <body>
   <h1>Flot Examples</h1>

   <div id="placeholder" style="width:600px;height:300px"></div>

   <p>There are plenty of options you can set to control the precise
   looks of your plot. You can control the axes, the legend, the
   default graph type, the look of grid, etc.</p>

   <p>The idea is that Flot goes to great lengths to provide <b>sensible
   defaults</b> which you can then customize as needed for your
   particular application. If you've found a use case where the
   defaults can be improved, please don't hesitate to give your
   feedback.</p>

<script id=“source” language=“javascript” type=“text/javascript”> $(function () {

var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
    d1.push([i, Math.sin(i)]);

var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
    d2.push([i, Math.cos(i)]);

var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.1)
    d3.push([i, Math.tan(i)]);

$.plot($("#placeholder"), [
    { label: "sin(x)",  data: d1},
    { label: "cos(x)",  data: d2},
    { label: "tan(x)",  data: d3}
], {
    series: {
        lines: { show: true },
        points: { show: true }
    },
    xaxis: {
        ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
    },
    yaxis: {
        ticks: 10,
        min: -2,
        max: 2
    },
    grid: {
        backgroundColor: { colors: ["#fff", "#eee"] }
    }
});

}); </script>

</body>

</html>