CODEWITHSUNDEEP
dygraphs
marcin82w
marcin82w

Reputation: 51

dygraphs - disable legend for two series

I created Website with a chart, to generate chart I used dygraphs library. Chart displays three series of data (measurement value and tolerances)

enter image description here

How can I disable legend for tolerances? Is it possible in dygraphs disable legend for one or more series?

Upvotes: 4

Views: 1047

Answers (2)

cyperpunk
cyperpunk

Reputation: 702

You can use the this function to format the legend-

LegendFormatter(data) {
if (data.x == null) {
  // This happens when there's no selection and {legend: 'always'} is set.
  return data.series.map(function(series) { 
if(series.labelHTML != 'counter_label')
return series.dashHTML + ' ' + series.labelHTML }).join(' ');
}
var html = data.xHTML;
return html;
}

The above code will return all the legend except the series having label as 'counter_label'. Make necessary amendments in the code for applying two conditions for your requirement.

And while defining the graph use the below format for specifying the graph:

this.graph = new Dygraph(document.getElementById("graph_div"), 
    this.data,
    {
      legend: 'always',
      drawPoints: true,
      animatedZooms: true,
      showRoller: true,
      rollPeriod: 14,
      legendFormatter: this.LegendFormatter,
    });

Here the legendformatter function will be use to format the legend according to the requirement.

Upvotes: 0

danvk
danvk

Reputation: 16903

Yes. If you're using dygraphs 2.0 or later, you can do this with a legendFormatter. You can customize the formatting of the legend to your heart's content using a legendFormatter. But if you just want to hide two series, the easiest way is to remove your Min and Max series from the series array and hand it back to the default formatter:

g = new Dygraph(
    document.getElementById("graph"),
    "X,Y,min,max\n" +
    "1,6,3,12\n" +
    "2,3,3,12\n" +
    "3,4,3,12\n" +
    "4,6,3,12\n" +
    "5,8,3,12\n" +
    "6,10,3,12\n" +
    "7,12,3,12\n" +
    "8,10,3,12\n",
    {
      legend: 'always',
      series: {
        min: { color: 'red' },
        max: { color: 'red' },
      },
      legendFormatter: function(data) {
        data.series = [data.series[0]];  // pick whichever series you want to keep
        return Dygraph.Plugins.Legend.defaultFormatter.call(this, data);
      }
    });

See fiddle.

Upvotes: 3

Related Questions