2 <title>legendFormatter
</title>
11 display: inline-block;
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>
21 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
22 <script type=
"text/javascript">
23 function legendFormatter(data) {
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>');
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>';
36 html += '
<br>' + series.dashHTML + ' ' + labeledData;
42 document.getElementById(
"demodiv"),
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));
50 r +=
"," +
10*(
250 -
8*i);
51 r +=
"," +
10*(
125 +
125 * Math.sin(
0.3*i));
57 labelsDiv: document.getElementById('status'),
59 colors: [
"rgb(51,204,204)",
62 "rgba(50,50,200,0.4)"],
63 title: 'Interesting Shapes',
66 highlightSeriesOpts: { strokeWidth:
2 },
67 labelsDiv: document.getElementById('legend'),
69 legendFormatter: legendFormatter