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