Skip to content
This repository
Newer
Older
100644 78 lines (65 sloc) 2.565 kb
0d15280a »
2009-05-23 Implemented plugin system, introduced experimental hooks system (thre…
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>Flot Examples</title>
477b6147 »
2011-03-17 Fix some validator warnings (suggested by Colin Law)
6 <link href="layout.css" rel="stylesheet" type="text/css">
d8e20bf1 »
2011-01-26 Skip loading excanvas in IE 9 in examples (thanks to Ryley Breiddal),…
7 <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
0d15280a »
2009-05-23 Implemented plugin system, introduced experimental hooks system (thre…
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 language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script>
11 </head>
12 <body>
13 <h1>Flot Examples</h1>
14
15 <div id="placeholder" style="width:600px;height:300px;"></div>
16
17 <p>With the stack plugin, you can have Flot stack the
18 series. This is useful if you wish to display both a total and the
19 constituents it is made of. The only requirement is that you provide
20 the input sorted on x.</p>
21
22 <p class="stackControls">
23 <input type="button" value="With stacking">
24 <input type="button" value="Without stacking">
25 </p>
26
27 <p class="graphControls">
28 <input type="button" value="Bars">
29 <input type="button" value="Lines">
30 <input type="button" value="Lines with steps">
31 </p>
32
33 <script id="source">
34 $(function () {
35 var d1 = [];
36 for (var i = 0; i <= 10; i += 1)
37 d1.push([i, parseInt(Math.random() * 30)]);
38
39 var d2 = [];
40 for (var i = 0; i <= 10; i += 1)
41 d2.push([i, parseInt(Math.random() * 30)]);
42
43 var d3 = [];
44 for (var i = 0; i <= 10; i += 1)
45 d3.push([i, parseInt(Math.random() * 30)]);
46
47 var stack = 0, bars = true, lines = false, steps = false;
48
49 function plotWithOptions() {
50 $.plot($("#placeholder"), [ d1, d2, d3 ], {
51 series: {
52 stack: stack,
c3a34cd6 »
2009-12-07 Support for specifying a bottom for each point for line charts when
53 lines: { show: lines, fill: true, steps: steps },
0d15280a »
2009-05-23 Implemented plugin system, introduced experimental hooks system (thre…
54 bars: { show: bars, barWidth: 0.6 }
55 }
56 });
57 }
58
59 plotWithOptions();
60
61 $(".stackControls input").click(function (e) {
62 e.preventDefault();
63 stack = $(this).val() == "With stacking" ? true : null;
64 plotWithOptions();
65 });
66 $(".graphControls input").click(function (e) {
67 e.preventDefault();
68 bars = $(this).val().indexOf("Bars") != -1;
69 lines = $(this).val().indexOf("Lines") != -1;
70 steps = $(this).val().indexOf("steps") != -1;
71 plotWithOptions();
72 });
73 });
74 </script>
75
76 </body>
77 </html>
Something went wrong with that request. Please try again.