| <!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"></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> | |