plotly-panel example

[oholimoli]

trafficstars

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]

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]

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

[ae3e]

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

[mertbakir]

I can confirm that 0.3.1 works fine with 7.3.1.

[ae3e]

Thanks for reporting this !

[AntiTenzor]

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]

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