tests/legend-formatter.html

   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>