[dygraphs.git] / docs / per-axis.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>dygraphs per-series and per-axis options</title>
    <style type="text/css">
      code { white-space: pre; border: 1px dashed black; display: block; }
      pre  { white-space: pre; border: 1px dashed black; }
      body { max-width: 800px; }
    </style>
  </head>
  <body>
    <h2>dygraphs per-series and per-axis options</h2>

    <p>When you create a Dygraph object, your code looks something like
    this:</p>

    <code>
      g = new Dygraph(document.getElementById("div"),
                      <i>data</i>,
                      { <i>options</i> });
    </code>

    <p>This document is about some of the values you can put in the
    <i>options</i> parameter.</p>

    <h3>per-series options</h3>

    <p>Typically, an option applies to the whole chart: if you set the
    strokeWidth option, it will apply to all data-series equally:</p>

    <code>
      g = new Dygraph(document.getElementById("div"),
                      "X,Y1,Y2,Y3\n" +
                      "1,2,3,4\n" +
                      ...,
                      {
                        strokeWidth: 5
                      });
    </code>

    <p>Some options, however, can be applied on a per-series or a per-axis
    basis. For instance, to set three different strokeWidths, you could
    write:</p>

    <code>
      g = new Dygraph(document.getElementById("div"),
                      "X,Y1,Y2,Y3\n" +
                      "1,2,3,4\n" +
                      ...,
                      {
                        strokeWidth: 5,  // default stroke width
                        'Y1': {
                          strokeWidth: 3  // Y1 gets a special value.
                        },
                        'Y3': {
                          strokeWidth: 1  // so does Y3.
                        }
                      });
    </code>

    <p>The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this <a href='tests/per-series.html'>here</a>.</p>

    <h3>per-axis options</h3>

    <p>Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.</p>

    <p>Here's how you can do that:</p>

    <code>
      g = new Dygraph(document.getElementById("div"),
                      "X,Y1,Y2,Y3\n" +
                      "1,2,3,4\n" +
                      ...,
                      {
                        axes: {
                          x: {
                            axisLabelFormatter: function(x) {
                              return 'x' + x;
                            }
                          },
                          y: {
                            axisLabelFormatter: function(y) {
                              return 'y' + y;
                            }
                          }
                        }
                      });
    </code>

    <p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
    secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
    top level, it will apply to all axes.</p>

    <p>To see this in practice, check out the <a
    href="tests/two-axes.html">two-axes</a> test.</p>

  <!-- Google Analytics -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-769809-2']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</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>dygraphs per-series and per-axis options</title>
	6	<style type="text/css">
	7	code { white-space: pre; border: 1px dashed black; display: block; }
	8	pre { white-space: pre; border: 1px dashed black; }
	9	body { max-width: 800px; }
	10	</style>
	11	</head>
	12	<body>
	13	<h2>dygraphs per-series and per-axis options</h2>
	14
	15	<p>When you create a Dygraph object, your code looks something like
	16	this:</p>
	17
	18	<code>
	19	g = new Dygraph(document.getElementById("div"),
	20	<i>data</i>,
	21	{ <i>options</i> });
	22	</code>
	23
	24	<p>This document is about some of the values you can put in the
	25	<i>options</i> parameter.</p>
	26
	27	<h3>per-series options</h3>
	28
	29	<p>Typically, an option applies to the whole chart: if you set the
	30	strokeWidth option, it will apply to all data-series equally:</p>
	31
	32	<code>
	33	g = new Dygraph(document.getElementById("div"),
	34	"X,Y1,Y2,Y3\n" +
	35	"1,2,3,4\n" +
	36	...,
	37	{
	38	strokeWidth: 5
	39	});
	40	</code>
	41
	42	<p>Some options, however, can be applied on a per-series or a per-axis
	43	basis. For instance, to set three different strokeWidths, you could
	44	write:</p>
	45
	46	<code>
	47	g = new Dygraph(document.getElementById("div"),
	48	"X,Y1,Y2,Y3\n" +
	49	"1,2,3,4\n" +
	50	...,
	51	{
	52	strokeWidth: 5, // default stroke width
	53	'Y1': {
	54	strokeWidth: 3 // Y1 gets a special value.
	55	},
	56	'Y3': {
	57	strokeWidth: 1 // so does Y3.
	58	}
	59	});
	60	</code>
	61
	62	<p>The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this <a href='tests/per-series.html'>here</a>.</p>
	63
	64	<h3>per-axis options</h3>
	65
	66	<p>Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.</p>
	67
	68	<p>Here's how you can do that:</p>
	69
	70	<code>
	71	g = new Dygraph(document.getElementById("div"),
	72	"X,Y1,Y2,Y3\n" +
	73	"1,2,3,4\n" +
	74	...,
	75	{
	76	axes: {
	77	x: {
	78	axisLabelFormatter: function(x) {
	79	return 'x' + x;
	80	}
	81	},
	82	y: {
	83	axisLabelFormatter: function(y) {
	84	return 'y' + y;
	85	}
	86	}
	87	}
	88	});
	89	</code>
	90
	91	<p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
	92	secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
	93	top level, it will apply to all axes.</p>
	94
	95	<p>To see this in practice, check out the <a
	96	href="tests/two-axes.html">two-axes</a> test.</p>
	97
	98	<!-- Google Analytics -->
	99	<script type="text/javascript">
	100	var _gaq = _gaq \|\| [];
	101	_gaq.push(['_setAccount', 'UA-769809-2']);
	102	_gaq.push(['_trackPageview']);
	103	(function() {
	104	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	105	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	106	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	107	})();
	108	</script>
	109	</body>
	110	</html>