Friday Fun XLVIII - Calendar Heatmap

Aloha,

This week I have another little fun component for you and I bet all of you know it...

I released another version of my TilesFX library last week and stumbled upon the contributions chart on github...sawing this matrix I instantly thought about my beloved DotMatrix control.

So here is the chart I'm talking about...

This is a really nice idea to visualize the contributions in a small and great looking way...and it perfectly fits to my DotMatrix control.

So long story short, here is my little control...

As you can see it is not perfectly the same but it should give you an idea. Also this control is not really a control but more an app that shows you how to build something like this by using the DotMatrix control.

The interesting part of that control was that I needed some kind of mouse interactivity because I would like to click on a dot in the matrix and would like to get the underlying information.

And because I'm using the JavaFX Canvas node for the DotMatrix control I needed to implement some kind of mouse click handling on my own.

So you somehow have to check the coordinates of mouseclicks against all shapes in your JavaFX canvas node. In my case this is not that hard because I decided to simply check against the boundaries of all boxes in my matrix. In case of a hit I will fire a custom event that contains the coordinates of the dot in the matrix (e.g. the first dot has the coordinates [0,0]) and the coordinates of the mouse click as screen coordinates.

Having this information makes it possible to click on a dot and display a tooltip or something similar.

The code for the ContributionChart file can this time be found in a gist on github. To run this gist you will need the dotmatrix.jar file which you could either build on your own by checking out the DotMatrix source from github or you can directly download the latest jar here.

Just keep in mind that this is not a full blown component but more a proof of concept, esp. the layout of the months, weekdays and legend is a bit hacky but it should give you an idea. The main purpose of this post is to show you what you can doo with a simple dot matrix control.

That's it for today...so keep coding...