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 :

Example of charts :