New panel plugin - Carpet plot

Thanks, well, seems that we have to plan an update to the newest version…

It is stated in the descprition of the panel that grafana server 3.0 or greater is required for the plugin.
Is that wrong information, as we are running 4.0.2?
Thanks

The heatmap was released in 4.3.0 so it would seem that dependency description is wrong.

Hi, I’m sorry, I’m currently on a vacation without access to my pc. I’ll take a look at it next week. The plugin really is based on heatmap - I took heatmap as a source and adjusted it. The required version is probably incorrect - I’ll correct it as soon as I can.

Hi, i have checked your panel using a seperate installation of the newes Grafana server and it works fine. So i guess the plugin/panel description is not correct.
thanks

Hi, thanks. I’ve just fixed the required version and also made some small upgrades.

2 Likes

@petrslavotinek Just wondering how much work it would be to extend this to support this kind of heatmap: http://www.brendangregg.com/HeatMaps/wireframe-05-raw.png
where we can see a graph where X-axis is time, Y-axis is the CPU ID. The color depth of each tile represents the CPU ID usage.
So each Y-axes bucket/row represents a separate timeseries.

also see discussion in Multiple time-series (one per row) in heatmap

It should be possible. Although it wouldn’t be called carpet plot then. But it’s a minor issue…
I think we might have use for this kind of heatmap in our company as well.

What do you think is better option?

  1. Add some kind of mode switch to the existing plugin (carpet plot).
  2. Create completely new plugin.

Do you have some idea what should be customizable?

1 Like

You could probably have this as a separate plugin because its such a distinct version of a heapmap and very desirable feature too. But thats up to you, also what would be more practical from your dev/maintenance point of view.

For customization, if we look at heatmaps that already do that in various JS charting libraries they give a pretty good idea of what is good to be customizable. For example here: https://www.zingchart.com/gallery/chart/#!heatmap-color-rules-tooltips and here: https://www.zingchart.com/docs/chart-types/heat-maps-piano-charts/

So, for customization, at our company and in our dashboards we have found these the most important:

  • set the value min/max range - this is important to determine the color depth of each tile. For example if you want to visualize CPU usage per a set of host, you want to set min=0 and max=100 so that only CPUs with close to 100% utilization are displayed in the deepest shade or red. Because by default heatmaps determine the min/max range out the all values of the given timeseries (which is a problem if all you CPUs are lightly 30% utilized max and they get displayed as dark red).
  • another important aspect is to set that all heatmap rows should be in displayed in the same color, so that the tiles color depth is ranging from light to dark red for each timeseries, that way you can clearly see where are the outliers. If you have each row in a different color it quickly becomes a mess (but may be useful in some scenarios).

Let me know if I can help with anything, my JS visual skills are not my specialty though. Thanks!

I’m glad someone already suggested this kind of heatmap! I was just thinking about how great it would be if you could have the Y axis as series instead of hours/timeslots,

It would allow for incredibly dense information views for stuff like switch port throughputs, disk array response times and so on where you have a large number of similar series, and I think much easier to read than regular stacked graphs. :slight_smile:

I agree that it should probably be a separate plugin since it would have such a different behavior.

Thanks for the plugin Petr.

I have just one question, which is how do you set the custom colours?
For each colour row there seems to be a square between the colour number and breakpoint. When selecting it, it doesn’t appear to do anything. Is this supposed to be a colour selector?

Yes, it’s a color selector. Same is used for selecting Null color. Are you able to select that?
Which version of grafana are you using? It should work with 4.6.x. There has been some change recently. According to the authors the backward compatibility should be preserved, but anything is possible.
Could you also take a look into console (F12) if there is some error displayed and post it?
Which browser are you using?

Since my last post, I upgraded from 4.5.2 to 4.6.3 to see if that helped, but I now get additional errors through the Chrome console which I was not previously receiving.
Before upgrading, I had tried it in Edge browser with the same result.

Here is the Chrome error.

Plugin component error Error: interpolateRgbBasis is not a function
  Evaluating http://10.1.1.3:3000/public/plugins/petrslavotinek-carpetplot-panel/libs/d3-scale-chromatic/diverging/BrBG.js
  Evaluating http://10.1.1.3:3000/public/plugins/petrslavotinek-carpetplot-panel/libs/d3-scale-chromatic/index.js
  Evaluating http://10.1.1.3:3000/public/plugins/petrslavotinek-carpetplot-panel/canvas/rendering.js
  Evaluating http://10.1.1.3:3000/public/plugins/petrslavotinek-carpetplot-panel/carpetplot-ctrl.js
  Evaluating http://10.1.1.3:3000/public/plugins/petrslavotinek-carpetplot-panel/module.js
  Loading plugins/petrslavotinek-carpetplot-panel/module
    at eval (:3000/public/plugins/petrslavotinek-carpetplot-panel/libs/d3-scale-chromatic/ramp.js:9)
    at Object.execute (:3000/public/plugins/petrslavotinek-carpetplot-panel/libs/d3-scale-chromatic/diverging/BrBG.js:18)
    at O (:3000/public/build/0.be20b78823b4c9d93a84.js:1)
    at E (:3000/public/build/0.be20b78823b4c9d93a84.js:1)
    at E (:3000/public/build/0.be20b78823b4c9d93a84.js:1)
    at E (:3000/public/build/0.be20b78823b4c9d93a84.js:1)
    at E (:3000/public/build/0.be20b78823b4c9d93a84.js:1)
    at E (:3000/public/build/0.be20b78823b4c9d93a84.js:1)
    at A (:3000/public/build/0.be20b78823b4c9d93a84.js:1)
    at :3000/public/build/0.be20b78823b4c9d93a84.js:1

I submitted pull request two weeks ago that should fix this error but it hasn’t been merged yet. In the meantime you can download new version directly from github (https://github.com/petrslavotinek/grafana-carpetplot) and just replace the files.

Thank you for the reply. I have manually downloaded and copied the files, but with the same result.

I am running Grafana in Docker. Could it have to do with the path?
In my error, it shows http://10.1.1.3:3000/public/plugins/petrslavotinek-carpetplot-panel
But in my Grafana, it shows http://10.1.1.3:3000/plugins/petrslavotinek-carpetplot-panel

As Petr’s comment on GitHub, clearing the browser cache has worked. It’s now all working.

I would be extremely interested in this kind of non-histogram-based, multiple series heatmap panel!

Thanks for the plugin, Petr… it has been extremely useful for visualizing the data from my weather station.
I have a couple questions or maybe suggestions (if it’s not possible to do this in the plugin presently).
Is it possible to scale the color choices based on two variables? I have a chart for wind direction and I’d like to scale the color brightness (or transparency) by the wind speed, because when the wind speed is really low it kind of comes from any direction and I’m trying to pay attention to where the stronger wind comes from.
Is there a way to accumulate data vertically? I also use your carpetplot for rainfall intensity and it would be interesting to have another plot to see the accumulated amount across the day.

Has anyone used the carpet plot panel successfully in Grafana v6.1.3?

Does anyone knows the format of carpet plot data as in a JSON object ?