Skip to Content

Design Studio SDK: Activity Viewer (manual Gantt Chart)

this component is already longer in the repository, but I could not find time to describe. For me it was an opportunity to learn a bit work with d3 code… this component is based on the d3 plugin dk8996/Gantt-Chart · GitHub.

How does it look?


How you can use it?

There are 3 arrays for definition. Activities, Categories and States.


states allow you to assign a style class to the block. some pre-defined styles are defined in the initial definition. but you can add new one – assure you have the corresponding class in your css.


with categories you can define the Y-axis


activities must be assigned to category and state, then you can get nice display.

Events & Interactions

There is selection event, the id of selected block will be given back.

APPLICATION.createErrorMessage(“Selection: ” + ACTIVITYVIEWER_1.getSelectedKey());

You can use a plenty of script functions to change the content.

Perhaps someone can make use of it.

Download & Use

This component is available on the community package, release 2.0 for Design Studio 1.5, as in SCN Design Studio SDK Development Community

Example as BIAPP:

org-scn-design-studio-community/applications · GitHub



Component List – SCN Design Studio Community -> look for the component in the list.

Any thoughts?

feel free to add as usual…

Enhancements Ideas?

if you have good ideas (to those who would like to contribute but cannot code…) – place an “issue” with tag “enhancement” under Issues · org-scn-design-studio-community/sdkpackage · GitHub

You must be Logged on to comment or reply to a post.
  • Dear Karol,

    This seems to be straight forward from the D3 library integreated very good is there a possiblity to also add Mile Stone or Dependent Tasks ?

    As this is integrated in DS, I guess this SDK can be installed also in Lumira right ?

    I Like it 



    • Hi Preetham,

      in general yes, it is possible to add it, but this would be a bit more work as the library do not have this function yet.

      for installation in Lumira, no - today it is plain DS SDK, but I am starting to think about moving some of the DS SDK components into Lumira framework.

      The Lumira SDK is more on visualization part - there is no option to act with events like in DS - this means such "manual" control are quite useless, it needs some data binding directly to the resultset. So also here more work is required.


  • Hi Karol,

    I am trying to use this Component with the Data bound and I do not find any option on that. Do you have plans of making it Data bound in the next release.

    The example you mentioned above when I tried to use in DS it does not show anything and comes as a blank page. Can you please have a look into it.

  • Hi all!

    I was playing around today with this component...great component, really useful for lots of stuff, i would like to display production plan with it, but i ran into "obstacle" 🙂

    I would like to display activities not only on day (date) level, but also on time level... According to picture on top of this post I see time is also taken into account when displaying tasks, but i cannot get it to work... I was reading technical information of the component and it says there startDate and endDate is in format YYYYMMDD (addActivity method)... I tried to set startDate and endDate in format YYYYMMDDHHMMSS, but without success...

    Thanks in advance for help 🙂

  • Hi Karol,

    I'm using this great component. And I found when I moved the mouse on a certain activity, some information including category name, activity name, start & end date will show up. I wonder whether I can change this information to use some other personal information or to change the format?


    Best regards!


  • Is it possible to fill gradient or two colors in the single activity. Example: for TESTPRO activity 25% fill in Blue color and 75% fill in light Blue color. This indicates that 25% of that activity is done.

  • Is it possible to fill gradient or two colors in the single activity. Example: for "Process" activity 25% fill in Blue color and 75% fill in light Blue color. This indicates that 25% of that activity is done.
    Also instead of showing dates in X-Axis can we show month and year in Mmm-YY format.

  • Karol,

    This component is really great, but can we bind SAP BW data source to this component . As I can see this component mappable only to excel data source. Pls let me know if this possible in this existing component ?