[dygraphs.git] / tests / value-axis-formatters.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../css/dygraph.css">
    <title>valueFormatter and axisLabelFormatter</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 style="max-width: 800px;">
    <h2>Multiple y-axes</h2>
    <p>This demonstrates how the valueFormatter and axisLabelFormatter options work. The valueFormatter controls the display of the legend. The axisLabelFormatter controls the display of axis tick marks. These can be set on a per-axis basis.</p>
    <div id="demodiv"></div>

    <ul>
      <li>xvf = x-axis valueFormatter
      <li>yvf = y-axis valueFormatter
      <li>y2vf = secondary y-axis valueFormatter
      <li>xalf = x-axis axisLabelFormatter
      <li>yalf = y-axis axisLabelFormatter
      <li>y2alf = secondary y-axis axisLabelFormatter
    </ul>

    <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))]);
      }

      function formatDate(d) {
        var yyyy = d.getFullYear(),
            mm = d.getMonth() + 1,
            dd = d.getDate();
        return yyyy + '-' + (mm < 10 ? '0' : '') + mm + (dd < 10 ? '0' : '') + dd;
      }

      g = new Dygraph(
          document.getElementById("demodiv"),
          data,
          {
            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
            width: 640,
            height: 350,
            series: {
              'Y3': { axis: 'y2' },
              'Y4': { axis: 'y2' }
            },
            axes: {
              x: {
                valueFormatter: function(ms) {
                  return 'xvf(' + formatDate(new Date(ms)) + ')';
                },
                axisLabelFormatter: function(d) {
                  return 'xalf(' + formatDate(d) + ')';
                },
                pixelsPerLabel: 100,
                axisLabelWidth: 100,
              },
              y: {
                valueFormatter: function(y) {
                  return 'yvf(' + y.toPrecision(2) + ')';
                },
                axisLabelFormatter: function(y) {
                  return 'yalf(' + y.toPrecision(2) + ')';
                },
                axisLabelWidth: 100
              },
              y2: {
                valueFormatter: function(y2) {
                  return 'y2vf(' + y2.toPrecision(2) + ')';
                },
                axisLabelFormatter: function(y2) {
                  return 'y2alf(' + y2.toPrecision(2) + ')';
                }
              }
            }
          }
      );
    </script>
</body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<link rel="stylesheet" href="../css/dygraph.css">
	5	<title>valueFormatter and axisLabelFormatter</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 style="max-width: 800px;">
	14	<h2>Multiple y-axes</h2>
	15	<p>This demonstrates how the valueFormatter and axisLabelFormatter options work. The valueFormatter controls the display of the legend. The axisLabelFormatter controls the display of axis tick marks. These can be set on a per-axis basis.</p>
	16	<div id="demodiv"></div>
	17
	18	<ul>
	19	<li>xvf = x-axis valueFormatter
	20	<li>yvf = y-axis valueFormatter
	21	<li>y2vf = secondary y-axis valueFormatter
	22	<li>xalf = x-axis axisLabelFormatter
	23	<li>yalf = y-axis axisLabelFormatter
	24	<li>y2alf = secondary y-axis axisLabelFormatter
	25	</ul>
	26
	27	<script type="text/javascript">
	28	var data = [];
	29	for (var i = 1; i <= 100; i++) {
	30	var m = "01", d = i;
	31	if (d > 31) { m = "02"; d -= 31; }
	32	if (m == "02" && d > 28) { m = "03"; d -= 28; }
	33	if (m == "03" && d > 31) { m = "04"; d -= 31; }
	34	if (d < 10) d = "0" + d;
	35	// two series, one with range 1-100, one with range 1-2M
	36	data.push([new Date("2010/" + m + "/" + d),
	37	i,
	38	100 - i,
	39	1e6 * (1 + i * (100 - i) / (50 * 50)),
	40	1e6 * (2 - i * (100 - i) / (50 * 50))]);
	41	}
	42
	43	function formatDate(d) {
	44	var yyyy = d.getFullYear(),
	45	mm = d.getMonth() + 1,
	46	dd = d.getDate();
	47	return yyyy + '-' + (mm < 10 ? '0' : '') + mm + (dd < 10 ? '0' : '') + dd;
	48	}
	49
	50	g = new Dygraph(
	51	document.getElementById("demodiv"),
	52	data,
	53	{
	54	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	55	width: 640,
	56	height: 350,
	57	series: {
	58	'Y3': { axis: 'y2' },
	59	'Y4': { axis: 'y2' }
	60	},
	61	axes: {
	62	x: {
	63	valueFormatter: function(ms) {
	64	return 'xvf(' + formatDate(new Date(ms)) + ')';
	65	},
	66	axisLabelFormatter: function(d) {
	67	return 'xalf(' + formatDate(d) + ')';
	68	},
	69	pixelsPerLabel: 100,
	70	axisLabelWidth: 100,
	71	},
	72	y: {
	73	valueFormatter: function(y) {
	74	return 'yvf(' + y.toPrecision(2) + ')';
	75	},
	76	axisLabelFormatter: function(y) {
	77	return 'yalf(' + y.toPrecision(2) + ')';
	78	},
	79	axisLabelWidth: 100
	80	},
	81	y2: {
	82	valueFormatter: function(y2) {
	83	return 'y2vf(' + y2.toPrecision(2) + ')';
	84	},
	85	axisLabelFormatter: function(y2) {
	86	return 'y2alf(' + y2.toPrecision(2) + ')';
	87	}
	88	}
	89	}
	90	}
	91	);
	92	</script>
	93	</body>
	94	</html>