4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>Series highlighting
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
12 <style type='text/css'
>
13 .few .dygraph-legend
> span.highlight { border:
1px solid grey; }
14 .many .dygraph-legend
> span { display: none; }
15 .many .dygraph-legend
> span.highlight { display: inline; }
19 <h2>Series highlighting demo
</h2>
20 <script type='text/javascript'
>
22 var getData = function(numSeries, numRows, isStacked) {
25 for (var j =
0; j < numRows; ++j) {
28 for (var i =
0; i < numSeries; ++i) {
30 for (var j =
0; j < numRows; ++j) {
34 val += Math.random() -
0.5;
42 var makeGraph = function(className, numSeries, numRows, isStacked) {
43 var div = document.createElement('div');
44 div.className = className;
45 div.style.display = 'inline-block';
46 document.body.appendChild(div);
49 for (var i =
0; i < numSeries; ++i) {
51 label = 's' + '
000'.substr(label.length) + label;
52 labels[i +
1] = label;
56 getData(numSeries, numRows, isStacked),
60 labels: labels.slice(),
61 stackedGraph: isStacked,
63 highlightCircleSize:
2,
65 strokeBorderWidth: isStacked ? null :
1,
67 highlightSeriesOpts: {
70 highlightCircleSize:
5,
73 g.setSelection(false, 's005');
77 makeGraph(
"few",
20,
50, false);
78 makeGraph(
"few",
10,
20, true);
79 makeGraph(
"many",
75,
50, false);
80 makeGraph(
"many",
40,
50, true);