Create a bullet like chart in Lumira
Ever want to create a bullet like chart in Lumira without using the SDK? Well, using pictograms it’s already possible. I’ll show you how to create a chart that looks like this:
Start by creating a new Lumira document. I also created a simple dataset to connect to in excel:
In the compose area select the “Combined Column Line Chart” and add the measures and dimensions as shown below:
Next go to the compose tab, create a new story and drag your visualization into the page. It should look like this:
Now adjust the colors of the graph and make it so the line is invisible by selecting “No Color” for the line part of the graph:
Here is where it gets a little tricky. SAP has provided all these great pictograms, and I really wish that SAP had provided some that were standard lines so that I could use them by themselves without the lines and they would still look good. As you can see, having the bubble on the bar chart doesn’t really help much, and even if I make it bigger it’s not going to show what I would like to. The good news is that we can create our own pictograms by creating SVG files. There is a lot of information on the internet on how to do this. I used a program called inkscape to create mine, and attached the xml document so you can use the same one.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30mm"
height="30mm"
viewBox="0 0 50 50"
>
<rect
id="rect4166"
width="50"
height="5"
x="0"
y="25"
ry="2.5" />
<path
style="fill:#fcffff;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;opacity:0"
d="M 0,0 50,50"
id="path4168"
inkscape:connector-curvature="0" />
</svg>
Once you have the pictogram created, just navigate to the “pictograms” section in Lumira and import your local document. Once you do this, it will be available to add to your visualization as a marker pictogram:
Now add it to your visualization and increase the size of the pictogram and you have a really cool bullet like marker:
Hope you find it useful and I really hope that SAP includes some additional pictograms that are really generic shapes so we can do things like this more easily in the future!
Nice Trick