Scatter plots in Grafana

Question

I am using a dockerized grafana to create a dashboard for historical data. I cannot see a scatter plot option in grafana graph panel.

I want to use scatter plot to display data points in range of time interval. I equally want to be able to get/display number of data points for selected intervals say 30mins, 60mins etc.

Answer 1

In my instance of Grafana (v8.2.3), I couldn't find the "XY Chart" mentioned in another reply, but I found different other options:

1. "Scatter" Plugin by Michael Moore: Probably the simplest one, but rather basic.
2. "Plotly" Plugin by Natel Energy: More advanced and even with 3D scatter plots (and more) that uses the Plotly (Javascript?) Library.
3. "Plotly panel" Plugin by AE3E: Uses the same library but this plugin has less than a GUI and more than a coding interface, so you enter JSON and JavaScript code to generate the plot - more difficult but also very flexible, once you figured out how it works. Almost no examples are given on the plugin & GitHub page, so look things up in the Plotly documentation.

Examples

0. Installation:

Installation is similar for all plugins and described in the "installation" tab on each plugin page. It might depend on your installation (e.g. I don't know how this works when using docker), but in my case of a "regular" Grafana installation, I could just type this into the console (e.g. via SSH):

sudo grafana-cli plugins install michaeldmoore-scatter-panel
sudo grafana-cli plugins install natel-plotly-panel
sudo grafana-cli plugins install ae3e-plotly-panel
sudo systemctl restart grafana-server
sudo systemctl status grafana-server

(Select the plugins you want to install, restart Grafana server and check its status (should be green and without errors). Hint: Save dashboards in case you were changing things before restarting Grafana, as restarting the Grafana server will delete unsaved dashboards.)

1. Scatter Plugin:

• Add a new panel in a Grafana dashboard and select the "Scatter" visualization/panel.
• Start with the "Table view" to see if you receive valid results:
  • Select at least 2 fields from the database (you may use tags, but remove aggregators/selectors for the fields). To select a second field, click on the "+" icon next to the first field, scroll down and select "Fields > field".
  • Also remove "group by".
  • Format as "Table"

You should see two columns next to the timestamps.

(Click here for large image)

Now switch back from "Table view" to the graph and adjust it on the right side in the settings:

• X Axis > X Axis Field: select one of the two fields
• Y Axis > Field(s): select the other field

Could look like this:

(Click here for large image)

2. Plotly Plugin (Natel):

Prepare data similarly as for the Scatter plugin. Could look like this:

(Click here for large image)

(Click here for large image)

Note: At least in my version, the panel didn't refresh when I changed settings. Toggle between table and graph view ("Table view" selector above the graph) to rebuild the panel.

3. Plotly Panel Plugin (AE3E):

Prepare data similarly as for the Scatter plugin. (I also added a third field which I use in the tooltip when hovering data points.)

Could look like this:

(Click here for large image)

Code used for the screenshot:

Data section:

[
  {
    "line": {
      "color": "rgba(255,255,255,255)",
      "width": 1
    },
    "mode": "lines",
    "type": "scatter"
  }
]

for "color", you can also use "green", "red" and so on. When using rgba(), first value is red (0-255), second green, then blue and last alpha channel (0 is fully transparent, 255 not transparent at all)

Layout section:

{
  "annotations": [
    {
      "showarrow": false,
      "text": "-Im{Z} [mΩ]",
      "textangle": -90,
      "x": -0.03,
      "xanchor": "right",
      "xref": "paper",
      "y": 0.5,
      "yanchor": "right",
      "yref": "paper"
    },
    {
      "showarrow": false,
      "text": "Re{Z} [mΩ]",
      "x": 0.5,
      "xanchor": "top",
      "xref": "paper",
      "y": -0.07,
      "yanchor": "top",
      "yref": "paper"
    }
  ],
  "font": {
    "color": "darkgrey"
  },
  "margin": {
    "b": 40,
    "t": 15
  },
  "paper_bgcolor": "rgba(0,0,0,0)",
  "plot_bgcolor": "rgba(0,0,0,0)",
  "xaxis": {
    "autorange": false,
    "gridcolor": "rgba(128,128,128,255)",
    "range": [
      0,
      90
    ],
    "type": "linear"
  },
  "yaxis": {
    "autorange": false,
    "gridcolor": "rgba(128,128,128,255)",
    "range": [
      -50,
      20
    ],
    "type": "linear"
  },
  "hovermode": "closest"
}

Configuration section: (unchanged)

{
  "displayModeBar": false
}

Script section:

// console.log(data)
var trace = {
  x: data.series[0].fields[1].values.buffer,
  y: data.series[0].fields[2].values.buffer,
  text: data.series[0].fields[3].values.buffer,
  mode: 'lines+markers',
  type: 'scatter',
  hovertemplate: 'Re: %{x:.4f} mΩ | Im: %{y:.4f} mΩ @ %{text:.2f} Hz'
};
  
return {data:[trace]};

Make sure to select fields 1 and 2 to get an XY plot. By default, 0 and 1 are selected which will result in a regular time series plot. I included a third data set (frequency) and added it to the text variable to display it in a tooltip when hovering a data point.

Click script section:

// console.log(data)
window.updateVariables({query:{'var-project':'test'}, partial: true})

Answer 2

Edit:

As for Grafana v7.4 there is a new XY stat panel:

Older non-really answer

When using the standard the Graph panel, you can select "Points" and unselect "Lines".

You can also mix this with lines if you do a series override:

This can be seen on the public Grafana instance at https://play.grafana.org/d/000000016/graph-styles?tab=visualization&orgId=1&fullscreen&edit&panelId=17 . In regards to count per period, I'm not sure if that can be done in Grafana natively, but might be possible depending on which datasource you are using.