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

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