[dygraphs.git] / tests / grid_dot.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Custom grid and Dot</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    <script type="text/javascript" src="data.js"></script>
  </head>

  <body>
    <p>Dot and lines should be extra large. Grid is red.</p>
    <div id="div_g14" style="width:600px; height:300px;"></div>

    <script type="text/javascript">
      g14 = new Dygraph(
            document.getElementById("div_g14"),
            NoisyData, {
              rollPeriod: 14,
              errorBars: true,
              gridLineColor: '#FF0000',
              highlightCircleSize: 10,
              strokeWidth: 3
            }
          );
    </script>
    
    <p>Use axis specific grid options. (independentTicks, gridLinePattern, ...)</p>
    <div id="div_g15" style="width:600px; height:300px;"></div>

    <script type="text/javascript">
      var data = [];
      for (var i = 1; i <= 100; i++) {
        var m = "01", d = i;
        if (d > 31) { m = "02"; d -= 31; }
        if (m == "02" && d > 28) { m = "03"; d -= 28; }
        if (m == "03" && d > 31) { m = "04"; d -= 31; }
        if (d < 10) d = "0" + d;
        // two series, one with range 1-100, one with range 1-2M
        data.push([new Date("2010/" + m + "/" + d),
                   i,
                   100 - i,
                   1e6 * (1 + i * (100 - i) / (50 * 50)),
                   1e6 * (2 - i * (100 - i) / (50 * 50))]);
      }
      g15 = new Dygraph(
            document.getElementById("div_g15"),
            data,
            {
              labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
              series : {
                'Y3': {
                  axis: 'y2'
                },
                'Y4': {
                  axis: 'y2'
                }
              },
              axes: {
                x: {
                  gridLineWidth: 2,
                  drawGrid: true,
                  independentTicks: true
                },
                y: {
                  valueRange: [40, 80],
                  drawGrid: true,
                  independentTicks: true
                },
                y2: {
                  // set axis-related properties here
                  labelsKMB: true,
                  ticker: Dygraph.numericLinearTicks,
                  drawGrid: true,
                  independentTicks: true,
                  gridLineColor: "#ff0000",
                  gridLinePattern: [4,4]
                }
              }
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>Custom grid and Dot</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
	15	<script type="text/javascript" src="data.js"></script>
	16	</head>
	17
	18	<body>
	19	<p>Dot and lines should be extra large. Grid is red.</p>
	20	<div id="div_g14" style="width:600px; height:300px;"></div>
	21
	22	<script type="text/javascript">
	23	g14 = new Dygraph(
	24	document.getElementById("div_g14"),
	25	NoisyData, {
	26	rollPeriod: 14,
	27	errorBars: true,
	28	gridLineColor: '#FF0000',
	29	highlightCircleSize: 10,
	30	strokeWidth: 3
	31	}
	32	);
	33	</script>
	34
	35	<p>Use axis specific grid options. (independentTicks, gridLinePattern, ...)</p>
	36	<div id="div_g15" style="width:600px; height:300px;"></div>
	37
	38	<script type="text/javascript">
	39	var data = [];
	40	for (var i = 1; i <= 100; i++) {
	41	var m = "01", d = i;
	42	if (d > 31) { m = "02"; d -= 31; }
	43	if (m == "02" && d > 28) { m = "03"; d -= 28; }
	44	if (m == "03" && d > 31) { m = "04"; d -= 31; }
	45	if (d < 10) d = "0" + d;
	46	// two series, one with range 1-100, one with range 1-2M
	47	data.push([new Date("2010/" + m + "/" + d),
	48	i,
	49	100 - i,
	50	1e6 * (1 + i * (100 - i) / (50 * 50)),
	51	1e6 * (2 - i * (100 - i) / (50 * 50))]);
	52	}
	53	g15 = new Dygraph(
	54	document.getElementById("div_g15"),
	55	data,
	56	{
	57	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	58	series : {
	59	'Y3': {
	60	axis: 'y2'
	61	},
	62	'Y4': {
	63	axis: 'y2'
	64	}
	65	},
	66	axes: {
	67	x: {
	68	gridLineWidth: 2,
	69	drawGrid: true,
	70	independentTicks: true
	71	},
	72	y: {
	73	valueRange: [40, 80],
	74	drawGrid: true,
	75	independentTicks: true
	76	},
	77	y2: {
	78	// set axis-related properties here
	79	labelsKMB: true,
	80	ticker: Dygraph.numericLinearTicks,
	81	drawGrid: true,
	82	independentTicks: true,
	83	gridLineColor: "#ff0000",
	84	gridLinePattern: [4,4]
	85	}
	86	}
	87	}
	88	);
	89	</script>
	90	</body>
	91	</html>