New panel plugin - Carpet plot

Grafana Plugin Development Share & showcase
1

Hi,

I’ve just finished new panel plugin - carpet plot.
Git repo: GitHub - petrslavotinek/grafana-carpetplot: Carpet plot panel plugin for grafana

Could you please let me know what needs to be done to publish it on Grafana Plugins - extend and customize your Grafana | Grafana Labs?

Thanks!
Petr

1 Like
2

The way to submit a plugin or an update to a plugin is to send a Pull Request to the grafana-plugin-repository. Although submitting it here works too!

I need three pieces of information to publish a plugin: an url, a version number and a commit hash. The plugin.json needs to be valid (links to images are valid etc.) and a README.md

I just had a quick look but noticed that the plugin id in the plugin.json file does not follow the convention. Probably should be petrslavotinek-carpetplot-panel (or should it be enesa-carpetplot-panel? It’s up to you).

You are also missing a version attribute in the plugin.json.

I will review it this week and get back to you with feedback (and hopefully publish it too!). Thanks for submitting!

3

Thanks for the reply!
I’ve updated plugin.json file. And sorry for not reading the styleguide…

The required information:
url: https://github.com/petrslavotinek/grafana-carpetplot
version: 0.0.1
commit: 329815e24c506f3d3b2de0c4cad9ca5832e637a9

4

I’m sorry, I forgot to fix the template url after changing plugin.json. It should be ok now.

url: https://github.com/petrslavotinek/grafana-carpetplot
version: 0.0.1
commit: 147e1709378dfa99be0f515e5822c8990ed7b779

1 Like
5

Hi Petr,

Please, let me know once the plugin is available. I really like the carpetplot so I would give it a try.

Also, could you summarize what is the difference from the heatmap plugin that was just introduced in the latests release (grafana 4.3)?

Thanks!
Ales

6

Hi,

you can already use it. Just download or clone the repository and copy the dist folder into /var/lib/grafana/plugins/ (e.g. /var/lib/grafana/plugins/carpetplot/dist). It should be built and working. If not, just use “npm install” and then “grunt” to build it.

The heatmap is based on a histogram (just take a look here: http://docs.grafana.org/features/panels/heatmap/, it’s explained there very well). There is time in any resolution on x axis and values on y axis. Color (of a bucket) represents frequency of a specific value in a specific time. There is usually different number of buckets in every column.

In a carpet plot there is time on x axis but always in day resolution (one column = one day) and there is also time on y axis (from midnight to midnight) in a chosen resolution (hour => 24 buckets/day, 15 minutes => 96 buckets/day, minute => 1440 buckets/day). And it is easy to implement another resolution. There is always same number of buckets in every column. (With exception of first and last column, which depend on selected time period).
Bucket represents one value (or aggregation of multiple values that fall into the same bucket - same time and day) and the values are distinguished by a color.

Example: https://raw.githubusercontent.com/petrslavotinek/grafana-carpetplot/master/dist/src/img/screenshot1.png
This chart shows hourly gas consumption in a building. You can see that the biggest consumption is every day between 5 and 7 o’clock in the morning. And that the consumption has been very low since 19th May.
This is just one usage and there are many more possible - e.g. load of the server during a day, number of visitors, state of an alert - just showing 0 and 1, etc.

I hope this is at least a bit helpful.

2 Likes
7

Hi Petr,

I would really like to test your carpet panel, but i always get an error message when I try to add the pannel to a dashboard:
“Plugin Error
Error Loading http://domainname/public/app/core/utils/ticks.js as “app/core/utils/ticks” from
http://domainname/public/plugins/petrslavotinek-carpetplot-panel/svg/renderings.js”

I have tried to install your panel via cli and form the zip file manually. Same results…
Im Using Grafana Version 4.0.2.
Any idea?

Thanks a lot
Carsten

8

Seems to work on latest Grafana. Did you restart Grafana after installing the plugin?

9

Hi,
thanks for the reply. Yes, I did restart the server after installing the plugin.

Any other idea? Upgrading to the newest server version is not the preferred option (productive environment)

Thanks

10

This panel based on Grafana Heatmap panel and uses some files available only in latest releases (with the heatmap panel).

11

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

12

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

13

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

14

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.

15

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

16

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

2 Likes
17

@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

18

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
19

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!

20

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.