<!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>Flot has support for simple background decorations such as
   lines and rectangles. They can be useful for marking up certain
   areas. You can easily add any HTML you need with standard DOM
   manipulation, e.g. for labels. For drawing custom shapes there is
   also direct access to the canvas.</p>

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

// generate a dataset
var d1 = [];
for (var i = 0; i < 20; ++i)
    d1.push([i, Math.sin(i)]);

var data = [{ data: d1, label: "Pressure", color: "#333" }];

// setup background areas
var markings = [
    { color: '#f6f6f6', yaxis: { from: 1 } },
    { color: '#f6f6f6', yaxis: { to: -1 } },
    { color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
    { color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
];

var placeholder = $("#placeholder");

// plot it
var plot = $.plot(placeholder, data, {
    bars: { show: true, barWidth: 0.5, fill: 0.9 },
    xaxis: { ticks: [], autoscaleMargin: 0.02 },
    yaxis: { min: -2, max: 2 },
    grid: { markings: markings }
});

// add labels
var o;

o = plot.pointOffset({ x: 2, y: -1.2});
// we just append it to the placeholder which Flot already uses
// for positioning
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');

o = plot.pointOffset({ x: 8, y: -1.2});
placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');

// draw a little arrow on top of the last label to demonstrate
// canvas drawing
var ctx = plot.getCanvas().getContext("2d");
ctx.beginPath();
o.left += 4;
ctx.moveTo(o.left, o.top);
ctx.lineTo(o.left, o.top - 10);
ctx.lineTo(o.left + 10, o.top - 5);
ctx.lineTo(o.left, o.top);
ctx.fillStyle = "#000";
ctx.fill();

}); </script>

</body>

</html>