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