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