Today I have a chart for you which was a bit tricky to implement. It's a so called parallel coordinates chart and to be honest it doesn't look really fancy at a glance but it is really neat.
If you have no idea what it looks like here is a little image that show one...
First it looks like some kind of simple line chart but it's not. With this chart one can compare objects in a nice way. So let's assume you would like to compare cars and you would not only to compare one property of the cars like horsepower but a set of properties (e.g. cylinder, horsepower, acceleration, weight, consumption, etc.) and the whole comparison should be in one chart.
In this case the parallel coordinates chart ist perfect. Here is a little screenshot of my implementation that uses this example...
In this chart each line represents one car (e.g. the blue line represents my Smart Roadster Coupé and the purple line represents the Bugatti Veyron...a fair comparison right ;) ).
Now the interesting part about that chart is that it makes it easy to find similarities between cars or that you can figure out trends easily.
There are tons of possibilities on how to extend this chart but because I do not have the time for that I've just added two things that I've found very nice:
- Dragging axes
- Filter specific lines
So you can imagine that the order of the categories has a big impact on the expressiveness of the chart and therefor it is possible to drag a category by dragging the header of a category to another position...
Here I've simply moved some categories around to show the effect of the different category order.
The filtering of specific lines (cars in this example) works similar. Here you simply click close to one axis and drag down and you will see that a little rectangle will be drawn that selects the lines in the range of the rectangle.
If you release the mouse button it will show you something similar like follows...
As soon as you select some lines all other "unselected" lines will be drawn in light gray (configurable) and the selected lines will be drawn in blue (configurable). In addition the names of the selected lines will be shown on the left side.
Once you click again somewhere the selection will be removed again.
In principle that's it and I hope it might be useful for someone. As always I have no usage for it at all :)
The chart is part of my JavaFX charts library where the current version is 1.0.5 and that you can found here:
Source at github
Binaries at bintray or Maven Central
And if you would like to see it in action, here is a short screen video that I've recorded...
That's it for today, so enjoy Carnival and don't forget...keep coding... ;)
So if you would make the bottom of all those lines come together, you'd get a radar (or spiderweb) chart. One of the interesting things of a radar chart is that, if further out on a line is a better score, the surface create by a single line represents a kind of overall score. That would work here as well.
ReplyDelete👍🏻
ReplyDelete