dygraph - how to change series names for bar chart

Question

I have a bar chart with 3 series, but I cant change their names, I have only y1 y2 y2, not my own names from the code. As per example bar chartI see, that I should use Multi-columnBarChart, but how can I do that? here is comment from example Multi-columnBarChart:

function multiColumnBarPlotter(e) {
  // We need to handle all the series simultaneously.
  if (e.seriesIndex !== 0) return;

  var g = e.dygraph;
  var ctx = e.drawingContext;
  var sets = e.allSeriesPoints;
  var y_bottom = e.dygraph.toDomYCoord(0);

  // Find the minimum separation between x-values.
  // This determines the bar width.
  var min_sep = Infinity;
  for (var j = 0; j < sets.length; j++) {
    var points = sets[j];
    for (var i = 1; i < points.length; i++) {
      var sep = points[i].canvasx - points[i - 1].canvasx;
      if (sep < min_sep) min_sep = sep;
    }
  }
  var bar_width = Math.floor(2.0 / 3 * min_sep);

here is my code:

function barChartPlotter(e) {
    var ctx = e.drawingContext;
    var points = e.points;
    var y_bottom = e.dygraph.toDomYCoord(0);

    // The RGBColorParser class is provided by rgbcolor.js, which is
    // packed in with dygraphs.
    var color = new RGBColorParser(e.color);
    color.r = Math.floor((255 + color.r) / 2);
    color.g = Math.floor((255 + color.g) / 2);
    color.b = Math.floor((255 + color.b) / 2);
    ctx.fillStyle = color.toRGB();

    // Find the minimum separation between x-values.
    // This determines the bar width.
    var min_sep = Infinity;
    for (var i = 1; i < points.length; i++) {
      var sep = points[i].canvasx - points[i - 1].canvasx;
      if (sep < min_sep) min_sep = sep;
    }
    var bar_width = Math.floor(2.0 / 3 * min_sep);

    // Do the actual plotting.
    for (var i = 0; i < points.length; i++) {
      var p = points[i];
      var center_x = p.canvasx;

      ctx.fillRect(center_x - bar_width / 2, p.canvasy,
          bar_width, y_bottom - p.canvasy);

      ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
          bar_width, y_bottom - p.canvasy);
    }
    }

data = [];
var x = js_array.length;
// CONVERTATION
pass = [];
fail = [];
tree = [];
for (var i=0; i<x; i++){
    if (js_array[i] == 1) {
        pass.push(js_array[i]);
        fail.push(NaN);
        tree.push(NaN);
        }
    else  if (js_array[i] == 2) {
        pass.push(NaN);
        fail.push(js_array[i]);
        tree.push(NaN);
        }

    else if (js_array[i] == 3) {
        pass.push(NaN);
        fail.push(NaN);
        tree.push(js_array[i]);
        }
    }

// DATA
for (var i=0; i<x; i++){
    var y = x - i - 1;
    data.push([new Date(js_array_time[y]), pass[y], fail[y], tree[y]]);
    }

seriesName = ['x','PASS', 'FAIL', 'TREE']
// OPTIONS
var start = new Date(js_array_time[9]);
var stop = new Date(js_array_time[0]);
start.setMinutes(start.getMinutes() - 10);
stop.setMinutes(stop.getMinutes() + 10);

s = document.getElementById("s");

g = new Dygraph(
document.getElementById("graphdiv"),
data,
{
    width: 580,
            includeZero: true,
            animatedZooms: true,
            plotter: barChartPlotter,
    axisLineWidth: 0.001,
    //labels: seriesName,
        legend: 'always',
        title: 'Test results',
    drawYAxis:false,
    valueRange: [0.5, 3.5],
    dateWindow: [Date.parse(start), Date.parse(stop)],
    pointClickCallback: function(e, p) {
                //s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.xval + "<br/>";
        window.open('../RUNNER/_VLOGS/launch' + p.xval + '.html','_blank');
        window.open('../RUNNER/_LOGS/launch_log' + p.xval + '.txt','_blank');
                },
    //drawPoints: true,
    //drawXGrid: false,
    //drawYGrid: false,
    //fillGraph: true

    }
);

g.ready(function() {
    g.setAnnotations([
    {

    }]);
});

Answer 1

For multiple series, you need to get allSeriesPoints instead of just points. Here is an example I put together for another SO question:

Here is a working DEMO at jsFiddle.com

The plotter code looks like this:

function multiColumnBarPlotter(e) {
  // We need to handle all the series simultaneously.
  if (e.seriesIndex !== 0) return;

  var g = e.dygraph;
  var ctx = e.drawingContext;
  var sets = e.allSeriesPoints;
  var y_bottom = e.dygraph.toDomYCoord(0);

  // Find the minimum separation between x-values.
  // This determines the bar width.
  var min_sep = Infinity;
  for (var j = 0; j < sets.length; j++) {
    var points = sets[j];
    for (var i = 1; i < points.length; i++) {
      var sep = points[i].canvasx - points[i - 1].canvasx;
      if (sep < min_sep) min_sep = sep;
    }
  }
  var bar_width = Math.floor(2.0 / 3 * min_sep);

  var fillColors = [];
  var strokeColors = g.getColors();
  for (var i = 0; i < strokeColors.length; i++) {
    var color = new RGBColorParser(strokeColors[i]);
    color.r = Math.floor((255 + color.r) / 2);
    color.g = Math.floor((255 + color.g) / 2);
    color.b = Math.floor((255 + color.b) / 2);
    fillColors.push(color.toRGB());
  }

  for (var j = 0; j < sets.length; j++) {
    ctx.fillStyle = fillColors[j];
    ctx.strokeStyle = strokeColors[j];
    for (var i = 0; i < sets[j].length; i++) {
      var p = sets[j][i];
      var center_x = p.canvasx;
      var x_left = center_x - (bar_width / 1.3) * (1 - j/(sets.length-1));

      ctx.fillRect(x_left, p.canvasy,
          bar_width/sets.length, y_bottom - p.canvasy);

      ctx.strokeRect(x_left, p.canvasy,
          bar_width/sets.length, y_bottom - p.canvasy);
    }
  }
}

I then create 2 charts of the same data, one using CSV and the other an array. The CSV provides labels directly in the data, for the array, you can change labels with the labels property:

labels: ['x', 'series1', 'series2', 'series3'],

The whole chart code would then be

g2 = new Dygraph(document.getElementById("g_div2"),
                 theData,
                   {
                     // options go here. See http://dygraphs.com/options.html
                     legend: 'always',
                     labels: ['x', 'series1', 'series2', 'series3'],
                     animatedZooms: true,
                     plotter: multiColumnBarPlotter,
                     colors: ["#00A0B0", "#6A4A3C", "#CC333F", ],
                     dateWindow: [0, 8]
                 });