1 files changed, 75 insertions, 0 deletions
diff --git a/examples/annotating.html b/examples/annotating.html
new file mode 100644
index 0000000..9d99ea4
--- /dev/null
+++ b/examples/annotating.html
@@ -0,0 +1,75 @@
+<!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>