Map, Violin or BoxPlot Example

[ae3e]

Map, Violin or BoxPlot Example

[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

[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.