source: appstream-generator/contrib/setup/js_tmp/Flot/examples/annotating/index.html @ 4841

Last change on this file since 4841 was 4841, checked in by Juanma, 2 years ago

Initial release

File size: 2.7 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5        <title>Flot Examples: Adding Annotations</title>
6        <link href="../examples.css" rel="stylesheet" type="text/css">
7        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
8        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
9        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
10        <script type="text/javascript">
11
12        $(function() {
13
14                var d1 = [];
15                for (var i = 0; i < 20; ++i) {
16                        d1.push([i, Math.sin(i)]);
17                }
18
19                var data = [{ data: d1, label: "Pressure", color: "#333" }];
20
21                var markings = [
22                        { color: "#f6f6f6", yaxis: { from: 1 } },
23                        { color: "#f6f6f6", yaxis: { to: -1 } },
24                        { color: "#000", lineWidth: 1, xaxis: { from: 2, to: 2 } },
25                        { color: "#000", lineWidth: 1, xaxis: { from: 8, to: 8 } }
26                ];
27
28                var placeholder = $("#placeholder");
29
30                var plot = $.plot(placeholder, data, {
31                        bars: { show: true, barWidth: 0.5, fill: 0.9 },
32                        xaxis: { ticks: [], autoscaleMargin: 0.02 },
33                        yaxis: { min: -2, max: 2 },
34                        grid: { markings: markings }
35                });
36
37                var o = plot.pointOffset({ x: 2, y: -1.2});
38
39                // Append it to the placeholder that Flot already uses for positioning
40
41                placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Warming up</div>");
42
43                o = plot.pointOffset({ x: 8, y: -1.2});
44                placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Actual measurements</div>");
45
46                // Draw a little arrow on top of the last label to demonstrate canvas
47                // drawing
48
49                var ctx = plot.getCanvas().getContext("2d");
50                ctx.beginPath();
51                o.left += 4;
52                ctx.moveTo(o.left, o.top);
53                ctx.lineTo(o.left, o.top - 10);
54                ctx.lineTo(o.left + 10, o.top - 5);
55                ctx.lineTo(o.left, o.top);
56                ctx.fillStyle = "#000";
57                ctx.fill();
58
59                // Add the Flot version string to the footer
60
61                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
62        });
63
64        </script>
65</head>
66<body>
67
68        <div id="header">
69                <h2>Adding Annotations</h2>
70        </div>
71
72        <div id="content">
73
74                <div class="demo-container">
75                        <div id="placeholder" class="demo-placeholder"></div>
76                </div>
77
78                <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>
79
80        </div>
81
82        <div id="footer">
83                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
84        </div>
85
86</body>
87</html>
Note: See TracBrowser for help on using the repository browser.