Building a KPI dashboard using Medusa

Hi everyone,

Today I'll show you how to build a simple KPI (Key Performance Indicator) dashboard by using Medusa. If you google for "KPI Dashboard" images you will get an idea of what I'm talking about. When visualizing KPI's you usually have a value and either some colored sections that indicates something like poor, average and good or you have a threshold indicator that shows the target value. Or you have both :)
Interestingly the management prefers gauges where the analysts prefer bulletcharts to visualize KPI's. The problem with gauges is that they use a lot of space with no real benefit (except that they look good).
Let's take a look at some typical KPI's like

• Revenue
• Profit
• Sales

For each of those KPI's we have a maximum value, a target value and three zones for

• Poor (red)
• Average (yellow)
• Good (green)

If we visualize this using gauges we create a factory method getGauge() that could look like follows...

private Gauge getGauge(final String TITLE, final String UNIT, 
                       final double MAX_VALUE, final double THRESHOLD, 
                       final Section... SECTIONS) {
    return GaugeBuilder.create()
                       .skinType(HORIZONTAL)
                       .animated(true)
                       .thresholdColor(GRAY)
                       .title(TITLE)
                       .unit(UNIT)
                       .decimals(0)
                       .minorTickMarksVisible(false)
                       .mediumTickMarksVisible(false)
                       .majorTickMarksVisible(false)
                       .tickLabelLocation(TickLabelLocation.OUTSIDE)
                       .tickLabelOrientation(TickLabelOrientation.HORIZONTAL)
                       .maxValue(MAX_VALUE)
                       .threshold(THRESHOLD)
                       .areasVisible(true)
                       .areas(SECTIONS)
                       .knobColor(Color.BLACK)
                       .needleSize(NeedleSize.THICK)
                       .needleColor(Color.BLACK)
                       .thresholdVisible(true)
                       .thresholdColor(GRAY)
                       .build();
}

If we use this method to create the three gauges the result will look similar to this...

As you can see this takes a lot of space but it might look nice to one or the other.

Now that we saw the gauge approach let's take a look at the BulletChart approach. Therefore we create another factory method that will create the BulletCharts for us and it could look like follows...

private Gauge getBulletChart(final String TITLE, final String UNIT, 
                             final double MAX_VALUE, final double THRESHOLD, 
                             final Section... SECTIONS) {
    return GaugeBuilder.create()
                       .skinType(BULLET_CHART)
                       .animated(true)
                       .thresholdColor(GRAY)
                       .title(TITLE)
                       .unit(UNIT)
                       .maxValue(MAX_VALUE)
                       .threshold(THRESHOLD)
                       .sectionsVisible(true)
                       .sections(SECTIONS)
                       .build();
}

If we create the KPI dashboard using this method it will look similar to this...

As you can see we save some space by using the BulletChartSkin and it also doesn't look that fancy but simply shows the facts.

The demo code could be found over at github...

And that's it for today...keep coding...