tests/legend-formatter.html

   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>