Merge pull request #764 from danvk/label_v
[dygraphs.git] / tests / legend-formatter.html
CommitLineData
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">
23function 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
41new 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>