Plotly Panel

Render charts with Plotly.js.

A maintained fork of ae3e-plotly-panel with:

Updated Plotly.js package
Ability to export plot as image (fixed)
Expandable code editors
YAML support
Updated dependencies
Depreciated packages/code removed
Linting, style standardization, code correction
Better documentation
and more!

Unlike the natel-plotly-panel, this plugin is not limited to specific types of charts. This plugin allows fine grained control over the data, layout, andconfig parameters used to build a Plotly plot.

Getting started

The Data, Layout and Config fields match the common parameters described in Plotly's documentation. They must be in JSON format as described by this schema, however they are parsed and interpreted as YAML for ease of use in development. These fields are consumed by Plotly { data: [traces], layout: layout, config: config } and produce a Plotly graph within the panel. They can be collapsed, expanded (by dragging) and used to format the contents (like VSCode).

Data provided by the data source can be transformed via a user-defined script before being delivered to the Plotly chart. This script section includes 2 implicit variables that can be used:

data: Data returned by the datasource query. See the example below for the object's schema.
variables: Object that contains Grafana's dashboard variables available in the current dashboard (user variables as well as a few global variables: __from, __to, __interval and __interval_ms).
parameters: The panel's data, layout, and config objects. This may be helpful in the case of applying static properties from the data panel (as one item rather than an array) across many traces via something like a merge.

The script must return an object with one or more of the following properties:

data
layout
config
frames

Note: The data and frames properties are arrays of dictionaries/JSON and must begin with a dash (as per YAML specs) or added as an array in the return of the function. However, the data field can be an object in which case it will apply the parameters to all of the returned traces in the Script section.

For example:

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

let series = {
  x: x,
  y: y,
  name: variables.dash_var,
  // where 'dash_var' is the name of
  // a Grafana dashboard variable
};

return {
  data: [series],
  config: {
    displayModeBar: false,
  },
};

Screenshots

For screenshots see the src/img folder.

mvalletta/nline-plotlyjs-panel

Plotly Panel

Getting started

Screenshots