search

ae3e / ae3e-plotly-panel

Plotly panel for Grafana
Apache License 2.0
97 stars 21 forks source link

plotly-panel example #8

Open oholimoli opened 3 years ago

oholimoli commented 3 years ago

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 3 years ago

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.

oholimoli commented 3 years ago

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

ae3e commented 3 years ago

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

mertbakir commented 3 years ago

I can confirm that 0.3.1 works fine with 7.3.1.

ae3e commented 3 years ago

Thanks for reporting this !

AntiTenzor commented 3 years ago

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 3 years ago

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'}};