1

I tried to use custom plotly.js script and it throws a warning “loggers.js:94 WARN: Unrecognized transform type groupby.”
and doesn’t do the ‘group’ operation (it does plot the chart but it’s not grouped) at all only when used within Redash, is there any particular reason for such behaviour?

Here is the code that I’ve used:

// Available variables are x, ys, element, and Plotly
// Type console.log(x, ys); for more info about x and ys
// To plot your graph call Plotly.plot(element, ...)
// Plotly examples and docs: https://plot.ly/javascript/

var ys = {groupvar : ['A', 'C', 'A', 'C', 'A', 'V', 'A', 'A'], 
          val1 : [2, 4, 7, 10, 9, 8, 7, 8],
          val2 : [0, 1, 4, 9, 7, 9, 6, 10]};

var groupvar = ys.groupvar;
var xval= ys.val1;
var yval= ys.val2;
var xtitle = "Val 1";
var ytitle = "Val 2";

var font_options = {
        family: '@{icomoon-font-family}',
        size: 10,
        color: "@visualizations-gray" };

var trace_line = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  type: "scatter",
  mode: "lines",
  line: {
    color: "gray",
    dash: "dot",
    width: 0.5
  },
  hoverinfo: "none",
  showlegend: false
};

var trace_scatter = {
  x: xval,
  y: yval,
  type: 'scatter',
  mode: "markers",
  marker: {
        size: 5,
        sizemode: "area"
  },
  transforms: [{
    type: "groupby",
    groups: groupvar,
    styles: [{
        target: 'A',
        value: {
          name: "A",
          marker: {
            color: '#574B99'
          }
        }
      },
      {
        target: 'C',
        value: {
          name: "C",
          marker: {
            color: '#05BF6F'
          }
        }
      },
      {
        target: 'V',
        value: {
          name: 'V',
          marker: {
            color: '#EB5D66'
          }
        }
      }
    ]
  }],
 hovertemplate: "<b>x:%{x}<br>y:%{y}</b>",
 hovermode: "closest"
};

var data = [trace_line, trace_scatter];

var layout = {
  xaxis: {
    title: xtitle,
    titlefont : font_options,
    type: "category",
    categoryarray: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    categoryorder: "array",
    tickvals: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    constrain: "domain",
    showspikes: true,
    spikecolor: 'gray',
    spikethickness: 0.5
  },
  yaxis: {
    title: ytitle,
    type: "category",
    titlefont : font_options,
    categoryarray: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    categoryorder: "array",
    tickvals: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    scaleanchor: "x",
    scaleratio: 1,
    showspikes: true,
    spikecolor: 'gray',
    spikethickness: 0.5
  }
};

Plotly.plot(element, data, layout);
// Plotly.plot('myDiv', data, layout);
2

I am encountering the same issue as @agnaug. Does Redash not support all Plotly javascript functionality?