How to Convert Table Data to Heatmap (MySQL Data Source)

[vicky10]

Hi everyone,
I recently transitioned from using Metabase and Tableau to Grafana, and I’m currently working with a MySQL data source. I’m using Grafana v8.0.1 and having some trouble configuring a heatmap panel — would really appreciate your help!

Data Context

The result of my query is in table format, with the following columns: store_name, created_at, and error_status.

My goal is to visualize error distribution across different stores in a heatmap — for example, how frequently specific error codes occur. The created_at column is just for time reference.

Issues I’m Facing

• When switching to the heatmap panel, I’m not sure how to properly map the fields (screenshot attached).
• There seems to be a difference between the current UI in Grafana v8.0.1 and the official tutorials I’ve seen, so I’m unclear on the correct setup steps.
• I’m also unsure whether I need to convert the data into a time series format or transform any columns beforehand.

Questions

1. How can I properly convert this kind of table data into a heatmap? What should I set for the X/Y axes and value field?
2. Are there recommended settings for parameters like bucket size or aggregation functions?
3. Are there any recent tutorials or dashboard examples for Grafana v8.0.1 that I could follow? (I’ve already checked the official docs and video, but noticed some UI differences.)

Thanks so much in advance for your help!

[infofcc3]

1. How can I properly convert this kind of table data into a heatmap? What should I set for the X/Y axes and value field?
   → simply select heatmap the table data show in heatmap visulaization
   
   
   
   
   
   
   calculate form data → yes it will show the count on panel
   
   
   
   or you can use transformation to manipulate data and show on panel
   Transform data | Grafana documentation
   or
   using sql query also manipulate the data like this …

SELECT
  store_name,
  error_status,
  COUNT(*) AS error_count
FROM
  store_errors
GROUP BY
  store_name,
  error_status
ORDER BY
  store_name, error_status;

[vicky10]

Hi there,
Thank you for your reply and suggestions!

Sorry if my previous screenshot wasn’t clear—I’ve actually already tried converting the table data into a heatmap, but the result still doesn’t look as expected.

Just to clarify, one of the fields in my data is store_name, and since we have multiple stores, the ideal heatmap I’m trying to build would look something like this:

• Y-axis: Store names
• X-axis: Each occurrence of error codes (e.g., 2002, 2203, etc.)
• Color of each cell: Represents the frequency or intensity of that error (darker color = more frequent)
• Time info: Only shown in the tooltip when hovering over a cell, not used as a main axis

The goal is to visually identify how concentrated certain errors are per store during operations.

Given this setup, do you think a heatmap is the right chart type to use?

Or would you recommend a better alternative for this kind of data?

Really appreciate your help—thanks again!

[infofcc3]

Heatmap | Grafana documentation

Grafana

I have tried as much as i can but still i can’t able to find out the solution but you can follow the document and similar example for better understanding .

Thanks

[yosiasz]

use Business Chart plugin

Examples - Apache ECharts