Skip to Content
Author's profile photo Michael Howles

Design Studio SDK (1.3) – D3 fun making a Progress Bar Set/Bar Chart

New version here:

Design Studio SDK – Progress Bar Set Makeover



Now available to install – Details on how here: Design Studio 1.2/1.3 SDK – Design Studio Utility Pack


Finish Bar Select click handling (unfinished)

Original Post:

An interesting question by Sara G Iyer was asked here related to Conditional Formatting a chart (Dynamic threshold setting-Conditional Formatting in Charts).

In short, I think the end-result was micro-chart type of visualization like this, so this is my reference point of where this component I am talking about started.


The end-result isn’t 100% a match (sorry, Sara G Iyer!) but it gets you kinda close (end product screen shot below for comparison — But keep reading!)

One version:


Similar with ‘inline labels’:


So rewinding a moment, this was the thought process for this one.  In the thread mentions, Tammy Powlas and Sara G Iyer started to talk about SDK options and my recent LaunchPad component was mentioned as possibly a good start ( Design Studio SDK (1.3) – Databound and Colored KPI Tile Set using SDK Launchpad ).  I thought about it and agreed that probably most of the properties available in the Additional Properties Sheet and in the BIAL methods is enough to reuse in a similar fashion but instead of a SAPUI5 TileContainer component, it would give me a chance to try another visualization component from scratch.  I chose D3 again, as I need the practice.

So let’s see what options I ended up with at design-time in a blank dashboard after dragging over a fresh component:


You’ll notice that the ‘Additional Properties’ panel looks similar to the one in the Launch Pad component, with maybe a little bit of a facelift in the buttons and a few different properties, etc… Same concept, however, which is a list of KPIs and some per-KPI formatting options.  The real difference is in the rendering (see canvas).  So let’s talk about the properties a little more and then see the changes in action (the fun D3 part).

  • In-Line Labels: Shown in original illustrations, toggles whether the labels are overlaid as part of the bar or outside of the bar.
  • Gradient is Full Width: This controls whether the gradient overlay should stop at the end of the value of each bar, or extend to the entire domain of the set (for a progress bar effect, as an example)
  • Gradient Start/Stop (0.00 – 1.00): The beginning/end of the gradient overlay
  • Gradient Start/Stop Color: Beginning and ending gradient color
  • Gradient Start/Stop Opacity (0.00 – 1.00): Controls transparency of beginning and end of gradient (set both to 0 if you don’t want gradients)
  • Bar Fill Opacity (0.00 – 1.00): If you’d like the bars to appear translucent
  • Bar Roundness: Radius of rounded corners of bars.  Set to 0 if you don’t want round corners
  • Bar Height: Static Height of the bars in pixels.  If you set to -1, the height will be distributed proportionately based on component height.  Depending on your usage, static and auto heights have their place.
  • Label Width: Width of labels, meaningless if you turn on in-line labels.

As you can see, I had a little fun with the number of properties for simple cosmetics sake but it was just because it was so cool using D3’s transition effects and should serve as a pretty nice example of how to make some slick visual component if you can understand D3’s power.  I’m still learning so if you look at my code there’s probably a much better way to do a lot of this.  Let’s now look at the runtime BIAL methods and then a few more screen shots:

  • removeAllBars() – Removes all bars
  • addBar(title, number?, numberUnit?, fillColor?) – Adds/Updates a bar based on title
  • removeBar(title) – Removes a bar based on title
  • getBarClicked() – Gets last bar clicked
  • getBarProperty(title) – Gets a bar’s properties (by title) back in a JSON structure:
    Name Type Description
    title String
    fillColor String
    number String
    numberUnit String
  • setBarThickness(thickness) – Sets bar thickness (aka height), -1 will set as auto
  • getBarThickness() – Gets bar thickness
  • setInlineLabels(true/false) – Set inline labels on/off
  • getInlineLabels() – Returns whether labels are inline or not.

And below is a sample snippet of BIAL used in a following animation at the bottom of this post:


Below is the set up at design time.  Note the design-time transitions as the properties are changed (20MB animated GIF, sorry low-bandwidth users):

Click if not animating

And one more, for a BIAL + SDK D3 visualization + runtime example in a quick animation to give you an idea of the possibilities, end-to-end:

Click if not animating


EDIT: Added an orientation property for horizontal or vertical transitions:

I will update this post with source code links and information however it will be in the usual place and packaged for usage after I clean up a few thing.  It will probably be available late this week or early next week after the US holidays.

Any feedback/suggestions/questions ahead of time are welcomed!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sara G Ayer
      Sara G Ayer

      Hi Mike,

      Thank you so much for the Update. That was real quick!
      Hoping it does it all. *fingers crossed*


      Mike you are doing really great job for the design studio dashboard developers making their job quite easy !

      P.S. I would like to learn to develop such components, so that next time I post a blog instead of the discussion. 😛



      Author's profile photo Leo Xie
      Leo Xie


      I follow your example to create the progress bar, and then create a button to refresh it. It works really great!

      I have a question: Is there a way to update the progress bar every time when the report is opened? Now although i have a data source, I still need to hit the refresh button to update the number field.


      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      You could write the Script during the Load Event that is available in the main Application. Would this work for you?

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Also I have plans soon to enhance this one (or create a similar yet separate one) that is Databound so that  you do not have to stitch it together with BIAL scripting.  There are benefits of both approaches so I may keep them separate if I cannot introduce databinding without impacting this BIAL version.  Will update post as I get to it.

      Author's profile photo Former Member
      Former Member

      Hi Mike,

      Is this component available in github?



      Author's profile photo Leo Xie
      Leo Xie

      Thank you! I got it now. I am new to this so I did not know start up event can be set.

      Author's profile photo Former Member
      Former Member

      Hi Mike I am using a data source in which i want that when i click on a chart having a dimension project, the Project Status Value corresponding to that Project which would be there in the Data Source for all projects should reach the Bar & the Bar should display its progress.



      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Hey Rahul, please look at this newer version blogged about here:

      Design Studio SDK - Progress Bar Set Makeover

      If you still have questions, please let me know there.  I'll update this blog to direct people to the new blog post, too.

      Author's profile photo Chandra Ralla
      Chandra Ralla

      Hi Mike,

      Is it possible to add axis line for the progress bar??