tests/stacked.html

   1 <html>
   2   <head>
   3     <title>stacked</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11   </head>
  12   <body>
  13     <p>Simple graph:</p>
  14     <div id="simple_div"></div>
  15     <p>Stacked graph:</p>
  16     <div id="stacked_div"></div>
  17     <p>Simple graph with missing data:</p>
  18     <div id="simple_missing_div"></div>
  19     <p>Stacked graph with missing data:</p>
  20     <div id="stacked_missing_div"></div>
  21     <p>Stacked graph with many series:</p>
  22     <div id="stacked_many_div"></div>
  23
  24     <script type="text/javascript">
  25       data = "X,x,100-x\n";
  26       for (var i = 0; i < 100; i++) {
  27         data += i + "," + i + "," + (100 - i) + "\n";
  28       }
  29
  30       new Dygraph(document.getElementById("simple_div"),
  31                   data);
  32       new Dygraph(document.getElementById("stacked_div"),
  33                   data,
  34                   { stackedGraph: true });
  35
  36       missing_data = "X,x,100-x\n";
  37       for (var i = 0; i < 100; i++) {
  38         if (i >= 20 && i < 40) {
  39           missing_data += i + ",," + (100 - i) + "\n";
  40         } else if (i >= 60 && i < 80) {
  41           missing_data += i + "," + i + ",\n";
  42         } else {
  43           missing_data += i + "," + i + "," + (100 - i) + "\n";
  44         }
  45       }
  46
  47       new Dygraph(document.getElementById("simple_missing_div"),
  48                   missing_data);
  49       new Dygraph(document.getElementById("stacked_missing_div"),
  50                   missing_data,
  51                   { stackedGraph: true });
  52
  53       many_data = "X,a,b,c,d,e,100-a,100-b,100-c,100-d,100-e\n";
  54       for (var i = 0; i < 100; i++) {
  55         many_data += i + "," + i + "," + i + "," + i + "," + i + "," + i;
  56         j = 100 - i;
  57         many_data += "," + j + "," + j + "," + j + "," + j + "," + j;
  58         many_data += "\n";
  59       }
  60
  61       new Dygraph(document.getElementById("stacked_many_div"),
  62                   many_data,
  63                   { stackedGraph: true });
  64     </script>
  65   </body>
  66 </html>