Map, Violin or BoxPlot Example

[mbarradas]

Hey is there a way in which you could share some data grouping examples? Some plots need raw data and create traces on the fly.I would like have some guidance on how to achieve it through the panel, so far I have not been able to achieve the results I would like to get. Thanks! and Great work

[ae3e]

Not sure I understand. Are you able to create your desired chart only with Plotly (in a code playground) with sample data? If it's only related to Plotly, you should check Plotly documentation first. Otherwise, please give an example with some code.

[mbarradas]

Hi sorry for now writing back in the previous weeks I had an accident and was not able to type on a computer for a couple of weeks.

I'm trying to do Violin charts as described on https://plotly.com/javascript/violin/.

I would like to group the data by a column and display a violin for each of the distinct values of that column.

It seems to me that the grouping is done with these lines on the examples I'm following

`Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){

function unpack(rows, key) { return rows.map(function(row) { return row[key]; }); }

var data = [{ type: 'violin', x: unpack(rows, 'day'), y: unpack(rows, 'total_bill'), points: 'none', box: { visible: true },`

I now that the unpack function is doing the job but I don´t seem to be capable of adapting it to the data array that the panel exposes.

I'm not fluent on JavaScript and appreciate any help that you could provide.

[ae3e]

This issue is not related to ae3e-plolty-plugin but here is an example using the Grafana (Radnom Walk) data source and https://plotly.com/javascript/violin/.

Data

[
  {
    "type": "violin",
    "points": "none",
    "box": {
      "visible": true
    },
    "boxpoints": false,
    "line": {
      "color": "black"
    },
    "fillcolor": "#8dd3c7",
    "opacity": 0.6,
    "meanline": {
      "visible": true
    },
    "x0": "Total Bill"
  }
]

Layout

{
  "font": {
    "color": "darkgrey"
  },
  "paper_bgcolor": "rgba(0,0,0,0)",
  "plot_bgcolor": "rgba(0,0,0,0)",
  "margin": {
    "t": 30,
    "b": 20
  }
}

Script

var trace = {
  y: Array.from(data.series[0].fields[1].values.toArray())
};
return {data:[trace],layout:{title:'My Chart'}};

Result

Hope it helps