ae3e/ae3e-plotly-panel

plotly-panel example

Opened this issue · 7 comments

oholimoli commented

Hello, thank you for this contribution.

I tried to use this panel but it was not possible for me with the provided documentation. I use Grafana 7.2 in Docker and installed your plugin with this env variable: GF_INSTALL_PLUGINS=ae3e-plotly-panel.

When I choose the plugin and edit the panel there is no data, layout or config field and the panel returns this error:
m.getBuiltInIntervalValue is not a function :(

ae3e commented

Unfortunatly, the last published version of Plotly panel on Grafana Plugin Repository is not compliant with Grafana 7.2.
You have to install manually v0.3.1.

I also did a pull request to publish this latest version but it has to be approuved and merged by the Grafana Team.

  • 👍3
oholimoli commented

I hope your pull request will be accepted soon. Will it than also work for Grafana 7.3.1?

ae3e commented

Not tested yet but it's on the task list..

mertbakir commented

I can confirm that 0.3.1 works fine with 7.3.1.

  • 👍2
ae3e commented

Thanks for reporting this !

AntiTenzor commented

Is it possible to display CandleStick charts (aka OHLCV candles)?
Could you please provide an example how to do this?
How much would you like to get for this feature?
(Currently I use Grafana v7.5.5 )

jcrumley commented

Please keep in mind I have only hacked together a simple proof of concept but it was around a Candlestick. The time scale is not changing with the time picker but I think that is unrelated to the information below. This is either from the defaults when the panel is added or modifications from the Plotly javascript candlestick. To figure out the "script" section, it may be help to "inspect" the panel, look at the Panel JavaScript, and then look at the "Data Javascript" to see the structure of the data.

In the Plotly Panel "data" section I have...
[
{
"line": {
"color": "red",
"width": 2
},
"type": "candlestick"
}
]

In the Plotly Panel "layout" section I have...
{
"font": {
"color": "darkgrey"
},
"paper_bgcolor": "rgba(0,0,0,0)",
"plot_bgcolor": "rgba(0,0,0,0)",
"margin": {
"t": 30,
"b": 20
},
"xaxis": {
"type": "date",
"rangeslider": {
"visible": false
}
}
}

In the Plotly Panel "data" section I have...
{
"font": {
"color": "darkgrey"
},
"paper_bgcolor": "rgba(0,0,0,0)",
"plot_bgcolor": "rgba(0,0,0,0)",
"margin": {
"t": 30,
"b": 20
},
"xaxis": {
"type": "date",
"rangeslider": {
"visible": false
}
}
}

In the Plotly Panel "configuration" section I have...
{
"displayModeBar": false
}

In the "Script" section I have...
console.log(data)
r trace5 = {
x: data.series[0].fields[0].values.buffer,
close: data.series[0].fields[1].values.buffer,
high: data.series[1].fields[1].values.buffer,
low: data.series[2].fields[1].values.buffer,
open: data.series[3].fields[1].values.buffer
};

return {data:[trace5],layout:{title:'Fred2 Chart'}};

  • ❤️1