<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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">
<!--[if lte IE 8]><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 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>