tests/fillGraph-alpha.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>fillGraph with per series fillAlpha</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8   </head>
   9   <body>
  10     <p>Filled, using default value</p>
  11     <div id="div_g0" style="width:600px; height:300px;"></div>
  12
  13     <p>Filled, using global alpha value</p>
  14     <div id="div_g1" style="width:600px; height:300px;"></div>
  15
  16     <p>Filled, using per series alpha values</p>
  17     <div id="div_g2" style="width:600px; height:300px;"></div>
  18
  19     <p>Filled, using a mix of global and per series values</p>
  20     <div id="div_g3" style="width:600px; height:300px;"></div>
  21
  22     <script type="text/javascript">
  23       // Create some data for the charts
  24       var gdata = "X,Y1,Y2\n";
  25       for (var i = 0; i < 100; i++) {
  26         gdata += i + "," + i + "," + (i * (100-i) * 100/(50*50)) + "\n";
  27       }
  28
  29       // Just use the default values
  30       var g0 = new Dygraph(
  31         document.getElementById("div_g0"),
  32         gdata,
  33         {
  34           fillGraph: true
  35         }
  36       );
  37
  38       var g1 = new Dygraph(
  39         document.getElementById("div_g1"),
  40         gdata,
  41         {
  42           fillGraph: true,
  43           fillAlpha: 0.8
  44         }
  45       );
  46
  47       var g2 = new Dygraph(
  48         document.getElementById("div_g2"),
  49         gdata,
  50         {
  51           fillGraph: true,
  52           series: {
  53             Y1: { fillAlpha: 0.9 },
  54             Y2: { fillAlpha: 0.1 }
  55           }
  56         }
  57       );
  58
  59       var g3 = new Dygraph(
  60         document.getElementById("div_g3"),
  61         gdata,
  62         {
  63           fillGraph: true,
  64           fillAlpha: 0.9,
  65           series: {
  66             Y2: { fillAlpha: 0.1 }
  67           }
  68         }
  69       );
  70
  71
  72     </script>
  73   </body>
  74 </html>