tests/fillGraph.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>fillGraph</title>
   5     <!--[if IE]>
   6     <script type="text/javascript" src="../excanvas.js"></script>
   7     <![endif]-->
   8     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   9     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  10     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  11     <script type="text/javascript" src="../dygraph.js"></script>
  12   </head>
  13   <body>
  14     <p>Filled, no error bars:</p>
  15     <div id="div_g" style="width:600px; height:300px;"></div>
  16
  17     <p>Filled, negatives:</p>
  18     <div id="div_g2" style="width:600px; height:300px;"></div>
  19
  20     <p>Filled, error bars:</p>
  21     <div id="div_g3" style="width:600px; height:300px;"></div>
  22
  23     <script type="text/javascript">
  24       new Dygraph(
  25         document.getElementById("div_g"),
  26         function() {
  27           var ret = "X,Y1,Y2\n";
  28           for (var i = 0; i < 100; i++) {
  29             ret += i + "," + i + "," + (i * (100-i) * 100/(50*50)) + "\n";
  30           }
  31           return ret;
  32         },
  33         { fillGraph: true }
  34       );
  35
  36       new Dygraph(
  37         document.getElementById("div_g2"),
  38         function() {
  39           var ret = "X,Y1,Y2\n";
  40           for (var i = 0; i < 100; i++) {
  41             ret += i + "," + (i - 50) +
  42             "," + (50 - i * (100-i) * 100/(50*50)) + "\n";
  43           }
  44           return ret;
  45         },
  46         { fillGraph: true }
  47       );
  48
  49       new Dygraph(
  50         document.getElementById("div_g3"),
  51         function() {
  52           var ret = "X,Y1,Y2\n";
  53           for (var i = 0; i < 100; i++) {
  54             ret += i + "," + i + ",10," +
  55               (i * (100-i) * 100/(50*50)) + ",5\n";
  56           }
  57           return ret;
  58         },
  59         {
  60           errorBars: true,
  61           fillGraph: true
  62         }
  63       );
  64     </script>
  65   </body>
  66 </html>