grafana/grafana — pull request #797 by jcellary (2014-09-12 16:12:05+00:00)
Title: Added support for heatmaps

I implemented a new panel type - heatmap. It looks like this:
![screenshot from 2014-09-12 17 55 38](https://cloud.githubusercontent.com/assets/7473307/4252337/49d776e4-3a95-11e4-8046-36989396b56a.png)

As storage I used InfluxDB, I did not test it on other database types. In order to display the data eather the histogram command from InfluxDB should be used or a custom query with columns named "count" and "bucket_start" (actually we use custom queries, as we have to aggregate the data before it goes to Influx). For drawing I used the "markings" from flot.

I tried no to change too much inside of grafanas core, so I hope merging it won't be too difficult. Also I'm neither Grafana nor AngularJS expert, so I hope I didn't break anything along the way :)

When developing the new dashboard I concentrated on our companies needs, there are for sure things that could be done to make it easier to use for others. My ideas for improvement:

- The heatmap can only display one data series, so when multiple series are defined the first one containing columns "count" and "bucket_start" is used. It would make sense to block adding multple queries for heatmaps as they are useless in this case, but I didn't want to make changes to the query editor.
- I'm not sure how intuitive the UI for the heatmap is, maybe some hints on how to use it would be useful
- Needs to be tested with other database types
- There are no hints when moving to a specific "pixel" on the heatmap, as there are on dataponits on a graph.
- I couldn't get transparency to work, maybe using it instead of black background color would make the heatmap look nicer.
- I implemented the heatmap by copying the graph and adjusting it, I trying to clean the code from any unused elements, but It may happen I ommited something, since It tok me a while to understand all the dependencies.

I hope you can make some use of the code I've written, let me know if you have any questions, I'll be happy to answer :)