4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>Series highlighting
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
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; }
15 <h2>Series highlighting demo
</h2>
16 <script type='text/javascript'
>
18 var getData = function(numSeries, numRows, isStacked) {
21 for (var j =
0; j < numRows; ++j) {
24 for (var i =
0; i < numSeries; ++i) {
26 for (var j =
0; j < numRows; ++j) {
30 val += Math.random() -
0.5;
38 var 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);
45 for (var i =
0; i < numSeries; ++i) {
47 label = 's' + '
000'.substr(label.length) + label;
48 labels[i +
1] = label;
52 getData(numSeries, numRows, isStacked),
56 labels: labels.slice(),
57 stackedGraph: isStacked,
59 highlightCircleSize:
2,
61 strokeBorderWidth: isStacked ? null :
1,
63 highlightSeriesOpts: {
66 highlightCircleSize:
5,
69 g.setSelection(false, 's005');
73 makeGraph(
"few",
20,
50, false);
74 makeGraph(
"few",
10,
20, true);
75 makeGraph(
"many",
75,
50, false);
76 makeGraph(
"many",
40,
50, true);