tests/fillGraph-alpha.html

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