Skip to Content

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!

You must be Logged on to comment or reply to a post.
  • 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. 😛



  • Mike,

    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.


      • 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.

      • 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.