Merge branch 'master' into kberg-work
[dygraphs.git] / tests / series-highlight.html
CommitLineData
353e254e
KW
1<!DOCTYPE html>
2<html>
3 <head>
7ebdf2fd 4 <title>Series highlighting</title>
353e254e
KW
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
9 <script type="text/javascript" src="../dygraph-dev.js"></script>
10
11 <style type='text/css'>
12 .few .dygraph-legend > span.highlight { border: 1px solid grey; }
13 .many .dygraph-legend > span { display: none; }
14 .many .dygraph-legend > span.highlight { display: inline; }
15 </style>
16 </head>
17 <body>
18 <h2>Series highlighting demo</h2>
19<script type='text/javascript'>
20
21var getData = function(numSeries, numRows, isStacked) {
22 var data = [];
23
24 for (var j = 0; j < numRows; ++j) {
25 data[j] = [j];
26 }
27 for (var i = 0; i < numSeries; ++i) {
28 var val = 0;
29 for (var j = 0; j < numRows; ++j) {
30 if (isStacked) {
31 val = Math.random();
32 } else {
33 val += Math.random() - 0.5;
34 }
35 data[j][i + 1] = val;
36 }
37 }
38 return data;
39};
40
41var makeGraph = function(className, numSeries, numRows, isStacked) {
42 var div = document.createElement('div');
43 div.className = className;
7ebdf2fd 44 div.style.display = 'inline-block';
353e254e
KW
45 document.body.appendChild(div);
46
47 var labels = ['x'];
48 for (var i = 0; i < numSeries; ++i) {
49 var label = '' + i;
50 label = 's' + '000'.substr(label.length) + label;
51 labels[i + 1] = label;
52 }
53 var g = new Dygraph(
54 div,
55 getData(numSeries, numRows, isStacked),
56 {
7ebdf2fd
KW
57 width: 480,
58 height: 320,
353e254e 59 labels: labels.slice(),
2a02e5dd
KW
60 stackedGraph: isStacked,
61
353e254e
KW
62 highlightCircleSize: 2,
63 strokeWidth: 1,
64 strokeBorderWidth: isStacked ? null : 1,
2a02e5dd 65
353e254e
KW
66 highlightSeriesOpts: {
67 strokeWidth: 3,
68 strokeBorderWidth: 1,
69 highlightCircleSize: 5,
70 },
71 });
72 g.setSelection(false, 's005');
73 //console.log(g);
74};
75
76makeGraph("few", 20, 50, false);
77makeGraph("few", 10, 20, true);
7ebdf2fd
KW
78makeGraph("many", 75, 50, false);
79makeGraph("many", 40, 50, true);
353e254e
KW
80</script>
81</body>
82</html>