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:

/wp-content/uploads/2015/10/example_804206.png

Example taken from https://vis4.net/blog/posts/choose-your-icons-wisely/

(Note: This was the first example I ran across – I’m not agreeing for or against healthcare reform in the US. πŸ˜› )

(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:

/wp-content/uploads/2015/10/picto1_804211.png

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:

/wp-content/uploads/2015/10/picto2_804215.png

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 https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg)

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

/wp-content/uploads/2015/10/picto3_804216.png

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 https://commons.wikimedia.org/wiki/File:Apple_logo_black.svg)

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.

/wp-content/uploads/2015/10/picto4_804217.png

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.

To report this post you need to login first.

21 Comments

You must be Logged on to comment or reply to a post.

  1. Jonas Duclos

    Great Job ! This will be very useful and helpful.

    Thanks for your work !

    I have one question concerning this add-in for SDK Community. How can we update this SDK ? Do we have to uninstall/reinstall ? What is the better way ?

    (0) 
    1. Mike Howles Post author

      If you are downloading the .ZIP and installing based on the archive, you should be able to re-download the .ZIP to the same location and file name and then perform and update in the Help -> About -> Installation Details, select the component and click ‘Update…’ – It will scan all previous update locations (either URLs or ZIP archives) and try there first.

      If that does not work, you can remove the component via the Help Menu, and then reinstall as if it were the first time.

      (0) 
  2. Karol Kalisz

    Wow Mike!,

    and yesterday I thought that with more than 100 open source, free for use components in the SCN community for Design Studio there is not much to add.

    not counting prototypes, now there are 104!

    scn-com.PNG

    Today I see this post and think my imagination is in freezing stage – perhaps due to the coming winter in Germany πŸ˜‰

    Now the common infrastructure we have invested in last yer is paying off.

    Very nice looking visualizations!

    Karol

    (0) 
    1. Mike Howles Post author

      Thanks, Karol πŸ™‚

      I’ve got a few other ideas rattling around my head.  If only there were more time in a day to think through them all!

      I’m sure that your “writer’s block” will only be temporary.  πŸ™‚

      (0) 
  3. David Bargh

    It’s said that great characters make the book memorable, not the plot. I believe great visuals make the dashboard memorable and you’ve made a fine contribution here. Thank you!

    (0) 
    1. Mike Howles Post author

      Go direct to the SVG in Chrome:

      https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg

      Right-click – View Page Source.

      Find the <path> element in the source.

      Copy the contents of the d attribute (leave off the quotes).  Paste into the shape property in the Pictorgram.

      Example ‘d’ attribute:

      m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308

      (0) 
      1. arpan gupta

        Hi Mike,

        I am facing problems while converting any image to respective svg code. Tried a couple of online converters but they are not converting as they should do.. πŸ™‚

        Tried Vectormagic.com but it didn’t worked the way I want. Do you have any reference, How to convert an image / icon to svg attributes.

        Also, what can we do in case we have multiple <path> elements in source.

        Regards,

        Arpan

        (0) 
  4. Maria Daniela Petersen Marichal

    Hi Mike,

    I was trying to follow your example of single icon, but when using {percent} variable on title (as in your example) it doesn’t work,

    I checked your source code and i didn’t find it either, I guess that this is the root of the issue πŸ™ .

    It will very helpful to have this feature as currently there is no method available to set the title via scripting.

    Is there anything i can do to make it work?

    Thanks!!

    (0) 
          1. Maria Daniela Petersen Marichal

            Sure! if you can make this property work on this variables will be awesome πŸ™‚ because some times you are working with figures that doesn’t have sense to have decimals and in other cases with two decimals is enough.

            Another question for the percentage, will it be scale? I mean will multiplied by 100?

            Thanks

            (0) 
            1. Mike Howles Post author

              Would this work?  See different treatment for whole numbers (20) and your percentage questions.  Screenshot with properties shown for reference.

              /wp-content/uploads/2015/12/rounding_842908.png

              (0) 
  5. arpan gupta

    Hi Mike,

    I am facing problems while converting any image to respective svg code. Tried a couple of online converters but they are not converting as they should do.. πŸ™‚

    Tried Vectormagic.com but it didn’t worked the way I want. Do you have any reference, How to convert an image / icon to svg attributes.

    Also, what can we do in case we have multiple <path> elements in source.

    Regards,

    Arpan

    (0) 
  6. Guillaume B

    Great extension ! The rendering is really nice πŸ™‚

    For more flexibility, it could be interesting to have a little bit more scripting functions, such as :

    • PICTOGRAM.setKpi()
    • PICTOGRAM.setMaxKpi()
    (0) 
    1. Mike Howles Post author

      Agreed, it could do for some script API improvements. Β My time has been limited lately otherwise I’d jump on it! Β However remember it’s all open source if you’d like to take a crack at it! Β πŸ˜€

      (0) 

Leave a Reply