[dygraphs.git] / tests / series-highlight.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Series highlighting</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>

    <style type='text/css'>
      .few .dygraph-legend > span.highlight { border: 1px solid grey; }
      .many .dygraph-legend > span { display: none; }
      .many .dygraph-legend > span.highlight { display: inline; }
    </style>
  </head>
  <body>
    <h2>Series highlighting demo</h2>
<script type='text/javascript'>

var getData = function(numSeries, numRows, isStacked) {
  var data = [];

  for (var j = 0; j < numRows; ++j) {
    data[j] = [j];
  }
  for (var i = 0; i < numSeries; ++i) {
    var val = 0;
    for (var j = 0; j < numRows; ++j) {
      if (isStacked) {
        val = Math.random();
      } else {
        val += Math.random() - 0.5;
      }
      data[j][i + 1] = val;
    }
  }
  return data;
};

var makeGraph = function(className, numSeries, numRows, isStacked) {
  var div = document.createElement('div');
  div.className = className;
  div.style.display = 'inline-block';
  document.body.appendChild(div);

  var labels = ['x'];
  for (var i = 0; i < numSeries; ++i) {
    var label = '' + i;
    label = 's' + '000'.substr(label.length) + label;
    labels[i + 1] = label;
  }
  var g = new Dygraph(
      div,
      getData(numSeries, numRows, isStacked),
      {
        width: 480,
        height: 320,
        labels: labels.slice(),
        stackedGraph: isStacked,

        highlightCircleSize: 2,
        strokeWidth: 1,
        strokeBorderWidth: isStacked ? null : 1,

        highlightSeriesOpts: {
          strokeWidth: 3,
          strokeBorderWidth: 1,
          highlightCircleSize: 5,
        },
      });
  g.setSelection(false, 's005');
  //console.log(g);
};

makeGraph("few", 20, 50, false);
makeGraph("few", 10, 20, true);
makeGraph("many", 75, 50, false);
makeGraph("many", 40, 50, true);
</script>
</body>
</html>
Commit	Line	Data
353e254e KW	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
7ebdf2fd	5	<title>Series highlighting</title>
353e254e KW	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	<style type='text/css'>
	16	.few .dygraph-legend > span.highlight { border: 1px solid grey; }
	17	.many .dygraph-legend > span { display: none; }
	18	.many .dygraph-legend > span.highlight { display: inline; }
	19	</style>
	20	</head>
	21	<body>
	22	<h2>Series highlighting demo</h2>
	23	<script type='text/javascript'>
	24
	25	var getData = function(numSeries, numRows, isStacked) {
	26	var data = [];
	27
	28	for (var j = 0; j < numRows; ++j) {
	29	data[j] = [j];
	30	}
	31	for (var i = 0; i < numSeries; ++i) {
	32	var val = 0;
	33	for (var j = 0; j < numRows; ++j) {
	34	if (isStacked) {
	35	val = Math.random();
	36	} else {
	37	val += Math.random() - 0.5;
	38	}
	39	data[j][i + 1] = val;
	40	}
	41	}
	42	return data;
	43	};
	44
	45	var makeGraph = function(className, numSeries, numRows, isStacked) {
	46	var div = document.createElement('div');
	47	div.className = className;
7ebdf2fd	48	div.style.display = 'inline-block';
353e254e KW	49	document.body.appendChild(div);
	50
	51	var labels = ['x'];
	52	for (var i = 0; i < numSeries; ++i) {
	53	var label = '' + i;
	54	label = 's' + '000'.substr(label.length) + label;
	55	labels[i + 1] = label;
	56	}
	57	var g = new Dygraph(
	58	div,
	59	getData(numSeries, numRows, isStacked),
	60	{
7ebdf2fd KW	61	width: 480,
7ebdf2fd KW	62	height: 320,
353e254e	63	labels: labels.slice(),
2a02e5dd KW	64	stackedGraph: isStacked,
2a02e5dd KW	65
353e254e KW	66	highlightCircleSize: 2,
	67	strokeWidth: 1,
	68	strokeBorderWidth: isStacked ? null : 1,
2a02e5dd	69
353e254e KW	70	highlightSeriesOpts: {
	71	strokeWidth: 3,
	72	strokeBorderWidth: 1,
	73	highlightCircleSize: 5,
	74	},
	75	});
	76	g.setSelection(false, 's005');
	77	//console.log(g);
	78	};
	79
	80	makeGraph("few", 20, 50, false);
	81	makeGraph("few", 10, 20, true);
7ebdf2fd KW	82	makeGraph("many", 75, 50, false);
7ebdf2fd KW	83	makeGraph("many", 40, 50, true);
353e254e KW	84	</script>
	85	</body>
	86	</html>