Plugins 〉Plotly panel


Developer
AE3E

Resources

Sign up to receive occasional product news and updates:



Panel
community

Plotly panel

  • Overview
  • Installation
  • Related content

Plotly Panel

Marketplace Downloads

https://github.com/ae3e/ae3e-plotly-panel

Render any kind of charts from any datasource with Plotly (An open source javascript graphing library)

Unlike the natel-plotly-panel, this plugin is not limited to specific types of charts. But, on the other hand, the user interface is really rough in order to let users to set all options available in Plotly.

The Data, Layout and Config fields match the common parameters described in Plotly's documentation. They must be in JSON format.

Data provided by the datasource can be transformed via a user-defined script before to be injected in the Plotly chart. The script includes 2 arguments :

  • data : Data returns by the datasource
  • variables : Object that contains Grafana's variables available in the current dashboard (user variables and few global variables : __from, __to, __interval and __interval_ms).

The script must return an object with one or more of the following properties : data, layout, config and frames.

example :

let x  = data.series[0].fields[0].values.buffer
let y  = data.series[0].fields[1].values.buffer

let serie = { x : x, y : y, name : variables.project //where project is the name of a Grafana’s variable }

return { data : [serie], config : { displayModeBar: false } }

Object returned by the script and JSON provided in the Data, Layout and Config fields will be merged (deep merge).

If no script is provided, the panel will use only Data, Layout and Config fields.

Plotly panel editor :

Editor

Example of charts :

Panel

Installing Plotly panel on Grafana Cloud:

For more information, visit the docs on plugin installation.