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