tests/fillGraph.html

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