[dygraphs.git] / tests / fillGraph-alpha.html

<!DOCTYPE html>
<html>
  <head>
    <title>fillGraph with per series fillAlpha</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dist/dygraph.js"></script>

  </head>
  <body>
    <p>Filled, using default value</p>
    <div id="div_g0" style="width:600px; height:300px;"></div>

    <p>Filled, using global alpha value</p>
    <div id="div_g1" style="width:600px; height:300px;"></div>

    <p>Filled, using per series alpha values</p>
    <div id="div_g2" style="width:600px; height:300px;"></div>

    <p>Filled, using a mix of global and per series values</p>
    <div id="div_g3" style="width:600px; height:300px;"></div>

    <script type="text/javascript">
      // Create some data for the charts
      var gdata = "X,Y1,Y2\n";
      for (var i = 0; i < 100; i++) {
        gdata += i + "," + i + "," + (i * (100-i) * 100/(50*50)) + "\n";
      }

      // Just use the default values
      var g0 = new Dygraph(
        document.getElementById("div_g0"),
        gdata,
        {
          fillGraph: true
        }
      );

      var g1 = new Dygraph(
        document.getElementById("div_g1"),
        gdata,
        {
          fillGraph: true,
          fillAlpha: 0.8
        }
      );

      var g2 = new Dygraph(
        document.getElementById("div_g2"),
        gdata,
        {
          fillGraph: true,
          series: {
            Y1: { fillAlpha: 0.9 },
            Y2: { fillAlpha: 0.1 }
          }
        }
      );

      var g3 = new Dygraph(
        document.getElementById("div_g3"),
        gdata,
        {
          fillGraph: true,
          fillAlpha: 0.9,
          series: {
            Y2: { fillAlpha: 0.1 }
          }
        }
      );


    </script>
  </body>
</html>
Commit	Line	Data
17bdb194 TL	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	-->
fbd6834a	9	<script type="text/javascript" src="../dist/dygraph.js"></script>
17bdb194 TL	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>