Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Contributor

Maybe you want a different way to convey a single KPI in order to draw attention.  Perhaps infer a goal without using conditional formatting.  Maybe it's a different way to show a percentage.  Maybe you are just bored of KPI tiles.

In SAP Lumira we do see a degree of capability to create Infographics in the form of vector graphics with dynamic texts, etc but I hadn't yet in Design Studio (nor Lumira at that) seen the ability to create something similar to example like this:

Example taken from

(Note: This was the first example I ran across - I'm not agreeing for or against healthcare reform in the US. :razz: )

(Note 2: The author on the page laments that the 'quality' of this icon is not meaningful enough, but I'm not that picky, let's move on to seeing what we can do.)

I googled for D3 pictogram and ran across this good starter page with example code on how I could create a pictogram in D3: Pictogram grid in d3js

I've since heavily modified this code to allow for parameterization of properties such as:

  • Background Color
  • Fill color and empty color of shapes
  • Font size/color/family
  • Shape (This is the 'd' attribute of an SVG path)
  • X and Y padding
  • Number of Rows and Number of Columns
  • Fill direction (forward or backward)
  • Partial fill (top to bottom, bottom to top, left to right, right to left)
  • Alignment
  • Title with placeholders (Example: {value} out of {max}:
    • {value} - Databound (or manual) value of a single KPI
    • {max} - 'Target' or 'Max'
    • {scaledvalue} - Value converted based on number of shapes (rows * columns)
    • {scaledmax} - Number of shaped (rows * columns)
    • {percent} - Percent of max that the value has

So how does this look at design time?  Let us pull in a Pictogram and see the defaults:

Here we see a pictogram similar to the D3 example with a placeholder manual value and a max of 20 set as a default.  Also you can see the General cosmetic properties on display.

What if we'd like to do a fancy progress indicator?  Let's mess around with some of the properties:

So a few things I've changed.  The most important ones were I changed rows to 1, giving a shape/cell count of 10, and I changed a few colors, and the Shape property to be the SVG path of the Windows logo.  (Courtesy

What else?  Could we do a single icon representing a slow fill instead of multiples?

Yes, with a few other cosmetic changes, and changing the fill direction to 'Bottom to Top' we can achieve that effect.

(Shape for Apple logo courtesy of

So from here I started playing around a little more just to see the variety and below you can see a compilation of several different pictograms you could send up with.

The source code is available to pull down now or you can view the main important parts on Github here:

sdkpackage/Pictogram.js at master · org-scn-design-studio-community/sdkpackage · GitHub

This one ended up being pretty fun to play with and will be available later this week in the open source SCN Design Studio SDK Development Community download.  (Just a few minor things to clean up before then)

As always, feedback or ideas always welcomed.

Labels in this area