Skip to Content
Author's profile photo Former Member

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:

Capture5.PNG

Start by creating a new Lumira document. I also created a simple dataset to connect to in excel:

Capture6.PNG

In the compose area select the “Combined Column Line Chart” and add the measures and dimensions as shown below:

Capture4.PNG

Next go to the compose tab, create a new story and drag your visualization into the page. It should look like this:

Capture7.PNG

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:

Capture8.PNG

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:

Capture9.PNG

Now add it to your visualization and increase the size of the pictogram and you have a really cool bullet like marker:

Capture10.PNG

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!

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Meng Wang
      Meng Wang

      Nice Trick