Plugins 〉Plotly
Plotly
Plotly Panel
⚠️ If you are on Grafana 10, the syntax to access the fields from the
data
variable is different! Usedata.series[0].fields[0].values
without thebuffer
property as it doesn't exist anymore. Before 10, there are stored with the.buffer
property.
Render charts with Plotly.js.
- Export plot as an image (with specified resolution)
- YAML/JSON support
- Automatic/manual timezone adjustment
- Apply
Data
configs across traces - Expandable code editors
- Grafana variable substitution
- 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.
This plugin began as maintained fork of ae3e-plotly-panel but has been rewritten since.
Getting started
The data, layout, and config fields are required objects described in Plotly's documentation. They must be in JSON format and structured by this schema. However, they can be parsed and interpreted as YAML for ease of use in development (see YAML/JSON toggle). These fields are consumed by Plotly as { data: [traces], layout: layout, config: config }
and produce a Plotly graph within the panel.
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 a few 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.timeZone
- The dashboard timezonedayjs
- A tiny timezone librarymatchTimezone
- A convenience function to wrap around timeseries data to convert data to the user's timezone.
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.
Timezones can be automatically converted to the user's dashboard timezone by selecting the time column with the Timezone correction option.
For example:
let x = data.series[0].fields[0].values;
let y = data.series[0].fields[1].values;
// If you can reference your SQL column names, this might be easier
// let fields = Object.fromEntries(data.series[0].fields.map((x) => [x.name, x.values]));
// x, y = fields[’time’], fields[‘data’] // where ’time’ and ‘data’ are column names
// Switch from UTC to the dashboard time zone
x = matchTimezone(x);
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.
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Grafana Cloud Free
- Free tier: Limited to 3 users
- Paid plans: $55 / user / month above included usage
- Access to all Enterprise Plugins
- Fully managed service (not available to self-manage)
Self-hosted Grafana Enterprise
- Access to all Enterprise plugins
- All Grafana Enterprise features
- Self-manage on your own infrastructure
Installing Plotly on Grafana Cloud:
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
For more information, visit the docs on plugin installation.
Installing on a local Grafana:
For local instances, plugins are installed and updated via a simple CLI command. Plugins are not updated automatically, however you will be notified when updates are available right within your Grafana.
1. Install the Panel
Use the grafana-cli tool to install Plotly from the commandline:
grafana-cli plugins install
The plugin will be installed into your grafana plugins directory; the default is /var/lib/grafana/plugins. More information on the cli tool.
Alternatively, you can manually download the .zip file for your architecture below and unpack it into your grafana plugins directory.
Alternatively, you can manually download the .zip file and unpack it into your grafana plugins directory.
2. Add the Panel to a Dashboard
Installed panels are available immediately in the Dashboards section in your Grafana main menu, and can be added like any other core panel in Grafana.
To see a list of installed panels, click the Plugins item in the main menu. Both core panels and installed panels will appear.