Today I just have a short post about some nice little bar chart which I've found last week when looking for new ideas on the web. Here is the image I've stumbled upon...
I saw it and directly understood the idea behind it because it's like a compact view of two bar charts. The big bars in the background show the sum of all inner bars (like in a stacked bar chart) and the inner bars visualize the distribution of that sum into portions. If you want to know how to realize this kind of chart in Excel you should take a look at Jon Peltier's blog where this image was taken from.
To be honest the thing that got my attention are the colors he used for this chart because they directly reminded me on the Material Design colors.
And because I once implemented these colors in JavaFX I gave it a try.
Well I was surprised how easy it was to implement and finished the whole thing within 1.5h and here is a little screenshot of the result...
As you can see this kind of chart works really well with the Material Design colors. So it does not make sense to use it for everything but there might be some use cases where saves a lot of space and still transfers the information.
Because I will add this chart to my JavaFX charts library anyway I did not spend more time on implementing axis and labels but I only implemented a mouse event handler. Meaning to say if you click on an element the component will fire an event that contains the data of the selected series (the big bar) and if you've clicked on one of the inner bars it will also contain the data of the selected item.
Using this event I've implemented a simple popup that will show the selected data.
This kind of chart can for example be used to compare sales data of products per quarter or similar things, you will find something ;)
As always the source is available over at github so enjoy playing around with it.
That's it for today...I wish you a codeful year 2018...keep coding...
No comments:
Post a Comment