Set this for drawCallback
[dygraphs.git] / tests / series-highlight.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Series highlighting</title>
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
21 var 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
41 var makeGraph = function(className, numSeries, numRows, isStacked) {
42 var div = document.createElement('div');
43 div.className = className;
44 div.style.display = 'inline-block';
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 {
57 width: 480,
58 height: 320,
59 labels: labels.slice(),
60 stackedGraph: isStacked,
61
62 highlightCircleSize: 2,
63 strokeWidth: 1,
64 strokeBorderWidth: isStacked ? null : 1,
65
66 highlightSeriesOpts: {
67 strokeWidth: 3,
68 strokeBorderWidth: 1,
69 highlightCircleSize: 5,
70 },
71 });
72 g.setSelection(false, 's005');
73 //console.log(g);
74 };
75
76 makeGraph("few", 20, 50, false);
77 makeGraph("few", 10, 20, true);
78 makeGraph("many", 75, 50, false);
79 makeGraph("many", 40, 50, true);
80 </script>
81 </body>
82 </html>