index.html (2778B)
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: Stacking</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 language="javascript" type="text/javascript" src="../../jquery.flot.stack.js"></script> 11 <script type="text/javascript"> 12 13 $(function() { 14 15 var d1 = []; 16 for (var i = 0; i <= 10; i += 1) { 17 d1.push([i, parseInt(Math.random() * 30)]); 18 } 19 20 var d2 = []; 21 for (var i = 0; i <= 10; i += 1) { 22 d2.push([i, parseInt(Math.random() * 30)]); 23 } 24 25 var d3 = []; 26 for (var i = 0; i <= 10; i += 1) { 27 d3.push([i, parseInt(Math.random() * 30)]); 28 } 29 30 var stack = 0, 31 bars = true, 32 lines = false, 33 steps = false; 34 35 function plotWithOptions() { 36 $.plot("#placeholder", [ d1, d2, d3 ], { 37 series: { 38 stack: stack, 39 lines: { 40 show: lines, 41 fill: true, 42 steps: steps 43 }, 44 bars: { 45 show: bars, 46 barWidth: 0.6 47 } 48 } 49 }); 50 } 51 52 plotWithOptions(); 53 54 $(".stackControls button").click(function (e) { 55 e.preventDefault(); 56 stack = $(this).text() == "With stacking" ? true : null; 57 plotWithOptions(); 58 }); 59 60 $(".graphControls button").click(function (e) { 61 e.preventDefault(); 62 bars = $(this).text().indexOf("Bars") != -1; 63 lines = $(this).text().indexOf("Lines") != -1; 64 steps = $(this).text().indexOf("steps") != -1; 65 plotWithOptions(); 66 }); 67 68 // Add the Flot version string to the footer 69 70 $("#footer").prepend("Flot " + $.plot.version + " – "); 71 }); 72 73 </script> 74 </head> 75 <body> 76 77 <div id="header"> 78 <h2>Stacking</h2> 79 </div> 80 81 <div id="content"> 82 83 <div class="demo-container"> 84 <div id="placeholder" class="demo-placeholder"></div> 85 </div> 86 87 <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> 88 89 <p class="stackControls"> 90 <button>With stacking</button> 91 <button>Without stacking</button> 92 </p> 93 94 <p class="graphControls"> 95 <button>Bars</button> 96 <button>Lines</button> 97 <button>Lines with steps</button> 98 </p> 99 100 </div> 101 102 <div id="footer"> 103 Copyright © 2007 - 2013 IOLA and Ole Laursen 104 </div> 105 106 </body> 107 </html>