| <!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> | |
| <script language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script> | |
| </head> | |
| <body> | |
| <h1>Flot Examples</h1> | |
| <div id="placeholder" style="width:600px;height:300px;"></div> | |
| <p>With the stack plugin, you can have Flot stack the | |
| series. This is useful if you wish to display both a total and the | |
| constituents it is made of. The only requirement is that you provide | |
| the input sorted on x.</p> | |
| <p class="stackControls"> | |
| <input type="button" value="With stacking"> | |
| <input type="button" value="Without stacking"> | |
| </p> | |
| <p class="graphControls"> | |
| <input type="button" value="Bars"> | |
| <input type="button" value="Lines"> | |
| <input type="button" value="Lines with steps"> | |
| </p> | |
| <script id="source"> | |
| $(function () { | |
| var d1 = []; | |
| for (var i = 0; i <= 10; i += 1) | |
| d1.push([i, parseInt(Math.random() * 30)]); | |
| var d2 = []; | |
| for (var i = 0; i <= 10; i += 1) | |
| d2.push([i, parseInt(Math.random() * 30)]); | |
| var d3 = []; | |
| for (var i = 0; i <= 10; i += 1) | |
| d3.push([i, parseInt(Math.random() * 30)]); | |
| var stack = 0, bars = true, lines = false, steps = false; | |
| function plotWithOptions() { | |
| $.plot($("#placeholder"), [ d1, d2, d3 ], { | |
| series: { | |
| stack: stack, | |
| lines: { show: lines, steps: steps }, | |
| bars: { show: bars, barWidth: 0.6 } | |
| } | |
| }); | |
| } | |
| plotWithOptions(); | |
| $(".stackControls input").click(function (e) { | |
| e.preventDefault(); | |
| stack = $(this).val() == "With stacking" ? true : null; | |
| plotWithOptions(); | |
| }); | |
| $(".graphControls input").click(function (e) { | |
| e.preventDefault(); | |
| bars = $(this).val().indexOf("Bars") != -1; | |
| lines = $(this).val().indexOf("Lines") != -1; | |
| steps = $(this).val().indexOf("steps") != -1; | |
| plotWithOptions(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |