| | 1 | <!DOCTYPE html> |
| | 2 | <link rel="stylesheet" href="../css/dygraph.css"> |
| | 3 | <title>legendFormatter</title> |
| | 4 | <style> |
| | 5 | #demodiv { |
| | 6 | width: 640px; |
| | 7 | height: 480px; |
| | 8 | display: inline-block; |
| | 9 | vertical-align: top; |
| | 10 | } |
| | 11 | #legend { |
| | 12 | display: inline-block; |
| | 13 | vertical-align: top; |
| | 14 | } |
| | 15 | </style> |
| | 16 | |
| | 17 | <h2>legendFormatter</h2> |
| | 18 | <p>This page demonstrates use of <a href="../options.html#legendFormatter"><code>legendFormatter</code></a>, which can be used to create more complex legends than <code>valueFormatter</code>.</p> |
| | 19 | <div id="demodiv"></div> |
| | 20 | <div id="legend"></div> |
| | 21 | |
| | 22 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
| | 23 | <script type="text/javascript"> |
| | 24 | function legendFormatter(data) { |
| | 25 | if (data.x == null) { |
| | 26 | // This happens when there's no selection and {legend: 'always'} is set. |
| | 27 | return '<br>' + data.series.map(function(series) { return series.dashHTML + ' ' + series.labelHTML }).join('<br>'); |
| | 28 | } |
| | 29 | |
| | 30 | var html = this.getLabels()[0] + ': ' + data.xHTML; |
| | 31 | data.series.forEach(function(series) { |
| | 32 | if (!series.isVisible) return; |
| | 33 | var labeledData = series.labelHTML + ': ' + series.yHTML; |
| | 34 | if (series.isHighlighted) { |
| | 35 | labeledData = '<b>' + labeledData + '</b>'; |
| | 36 | } |
| | 37 | html += '<br>' + series.dashHTML + ' ' + labeledData; |
| | 38 | }); |
| | 39 | return html; |
| | 40 | } |
| | 41 | |
| | 42 | new Dygraph( |
| | 43 | document.getElementById("demodiv"), |
| | 44 | function() { |
| | 45 | var zp = function(x) { if (x < 10) return "0"+x; else return x; }; |
| | 46 | var r = "date,parabola,line,another line,sine wave\n"; |
| | 47 | for (var i=1; i<=31; i++) { |
| | 48 | r += "200610" + zp(i); |
| | 49 | r += "," + 10*(i*(31-i)); |
| | 50 | r += "," + 10*(8*i); |
| | 51 | r += "," + 10*(250 - 8*i); |
| | 52 | r += "," + 10*(125 + 125 * Math.sin(0.3*i)); |
| | 53 | r += "\n"; |
| | 54 | } |
| | 55 | return r; |
| | 56 | }, |
| | 57 | { |
| | 58 | labelsDiv: document.getElementById('status'), |
| | 59 | labelsKMB: true, |
| | 60 | colors: ["rgb(51,204,204)", |
| | 61 | "rgb(255,100,100)", |
| | 62 | "#00DD55", |
| | 63 | "rgba(50,50,200,0.4)"], |
| | 64 | title: 'Interesting Shapes', |
| | 65 | xlabel: 'Date', |
| | 66 | ylabel: 'Count', |
| | 67 | highlightSeriesOpts: { strokeWidth: 2 }, |
| | 68 | labelsDiv: document.getElementById('legend'), |
| | 69 | legend: 'always', |
| | 70 | legendFormatter: legendFormatter |
| | 71 | } |
| | 72 | ); |
| | 73 | </script> |
projects / dygraphs.git / blame_incremental