Skip to Content
Author's profile photo Karol Kalisz

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?

av1.PNG

How you can use it?

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

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.

Categories

with categories you can define the Y-axis

Activities

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

SDK_ACTIVITY_VIEWER

Documentation

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

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Preetham Kumar Boda Vittal
      Preetham Kumar Boda Vittal

      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 

      Regards

      Preetham

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      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.

      Karol

      Author's profile photo Antonio de Jesús Flores Olivares
      Antonio de Jesús Flores Olivares

      Hi Karol,

      Do you have an example in Design Studio that can shared me? do not works with DS yet?

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Antonio,

      you can use the application "SDK_ACTIVITY_VIEWER" org-scn-design-studio-community/applications · GitHub as an example in Design Studio.

      I have not found any time to follow up on the Lumira integration yet. I cannot promise anything on this in the future. The infrastructure is a bit different, so the components must be rewritten - and this is effort.

      Karol

      Author's profile photo Jyoti Jain
      Jyoti Jain

       

      Karol,

       

      We are looking for using GANTT chart in SAP Design studio, using SAP BW as data source.

      Can we use this component as is ? Or do we have to do any changes .

      Author's profile photo arunnesh thanapalan
      arunnesh thanapalan

      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.

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi,

      could you please open this topic (make as databound) as issue under Issues · org-scn-design-studio-community/sdkpackage · GitHub and attach exported data source as CSV (you an reduce number of lines and modify the data if you cannot share the origials).

      Basically, it is possible to make it data bound, but for this I would need to see your data structure.

      when you open it as issue, we will continue conversation there.

      Karol

      Author's profile photo Aljaz Strucelj
      Aljaz Strucelj

      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 🙂

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi Aljaz,

      on first code view, this is not supported yet. I think it is feasible to add this function with acceptable effort. Will you place an issue in github?

      https://github.com/org-scn-design-studio-community/sdkpackage/issues

      Karol

      Author's profile photo Aljaz Strucelj
      Aljaz Strucelj

      Placed.

      Thanks and kind regards 🙂

      Author's profile photo Former Member
      Former Member

      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?

      /wp-content/uploads/2016/06/1487523394_968363.png

      Best regards!

      Daisy

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Hi,

      it would be possible, but requires change in the code. may you please open issue on this topic, we will check what is possible.

      Issues · org-scn-design-studio-community/sdkpackage · GitHub

      Karol

      Author's profile photo Former Member
      Former Member

      Placed. Thank you.

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jyoti Jain
      Jyoti Jain

      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 ?