It is remarkable, what comes across your desk, sometimes. Once people know that you know how to build SAP Lumira custom extensions, you end up on the receiving end of some interesting requests. And to be fair, as something of a visualization geek I am always keen to learn about new chart types that people have come up with to communicate their analysis, and see whether we can get them into a Lumira extension. That’s the origin of two Lumira extensions that are an interesting show case of what Lumira is capable of.
“Needles”/Extended Bar Chart
We are all familiar with bar- or column charts, but this one is a bit special. Typically, in a bar chart only the height of a bar is meaningful, while the bars themselves are plotted across the X-axis in equal distance and width. In this chart, the width of the bar/rectangle itself carries meaning as well. This chart was originally done for a watch maker, and unfortunately I cannot speak to the detailed meaning of everything here, but the idea is that there are different needle types of a particular depth range, which map to “Hg ng/g(dm)”.
You see here two of these charts side-by-side, each for a different needle type, and with different heights for the extended bars. The code for this is not particularly complex: we just need to have a “startdepth” and an “enddepth” to ensure that we know what the width of the rectangle should be.
The second chart is mostly complex because of the number of data elements involved, the dual Y-axes, and having to think through a little bit what the order of drawing should be so that not parts of the chart are hidden by other parts. The idea behind this chart is capacity planning and there is a past-future element including in it. That is, the “present” is between the blue/light blue bars and the red/green/yellow bars. It therefore shows a history, as well as a projection into the future.
As you can see from the legend, there are 12 data elements in the chart, all measures, plotted against Month on the X-axis. The bars show Completed work hours (direct labor and subcontracting) actuals, followed by projections for Orders and sales forecast. The grey areas shows base and maximum capacity (in house and including sub contracting), and there is an existing backlog and backlog of previous year, as well as a full absorption line.
The trick is really to get the order right. The individual elements themselves are not too complex, if you break them down into their individual parts. It’s basically an area chart, with a stacked bar chart on top (past and present) and again overlaid by a line chart. To ensure that the grey areas are in the back, those are drawn first. Then followed by the stacked bars, and finally the lines.
In the code, you’ll see that the data is very closely tied to the chart. I think that’s perfectly acceptable in this case, as it serves a very particular purpose. The colors are also hard-coded as those have specific meaning associated with the data, so we don’t just use the built-in colorPalette.
Isn’t it wasteful to spend time on building unique charts tied very closely to specific data sets? After all, how often will we need these charts? Well, that depends on how quickly they can be developed and what value they bring. To the watch maker, the extended bar chart is a critical chart that they need to have. For the capacity planning chart, this also was a chart type already in use at a customer, and they wanted to make sure it could be reproduced in SAP Lumira.
And development time for these was short. The extended bar chart took no more than 2 hours or so, and the capacity planning chart maybe more like 4-5, but largely because of the large number of data elements involved. But that’s still a very short time frame for the development of a chart extension you can use again and again. I would therefore strongly encourage to learn how to develop Lumira extensions. It’s incredibly liberating to be able to create just about any chart you can think up and feel would best represent your analysis.
The code for these charts is available from SAP’s lumira-viz-library on Github, including sample data files.