Create my own "Gantt chart"
Question
Application Type
Reactive

Hi everyone.


So I am currently trying to create a type of chart where I can add bars within a time frame. It's supposed to be a light weight gantt chart.


I've attached a photo displaying what I would like to achieve. You can ignore the comments and just focus on the timeline + the bars in colour.


Can anyone point me in the right direction here please? I know there are a few components in the forge but it's just not what I'm looking for.


Best regards, Steven

278004857_1064107130806837_508035492807233907_n.jpg

mvp_badge
MVP
Solution

Got it 10 minutes later.

This should work as expected. You'll still need to convert the dates to the UNIX format before passing the JSON Gantt data to the Highcharts javascript block, but there are components in the Forge to help with this.

GanttChartJS_Dynamic_Working.oml

mvp_badge
MVP

Hello Steven,

I don't think there's anything available out of the box that you could use to build this. OutSystems does resort to the FusionCharts library, and you could check out the generic Chart webblock here:

But I don't think it can be used to build something as rich as your example - this is a preview available in the documentation:

Looking at the available Forge components, I assume you ruled them out because of similar reasons.  The example you shared is visually complex and would be hard to build from scratch in Javascript. 

I did some research and I can't find anything that does exactly what you're looking for. The closest I could find was this JSCharting example, but it's commercial software - these sorts of tools take a considerable effort to build and maintain.

Hi! 

Thank you for your input.

I've found a solution that would kinda work. I've implemented a type of gantt chart from highcharts.com

It's not exactly what I was looking for, but it will work for the time being. 


Now, next up is I want to be able to give the end user a way to manipulate the chart without having to mess around in the js-code.


mvp_badge
MVP

Glad to hear you found a working alternative. When you say you want the user to interact with the Gantt chart, I assume you want them to be able to fill the data and not have it static.

Dragging and more advanced user interactions could be accomplished if Highcharts exposes those sorts of events, but you could construct a simpler version with a form that allows the user to change the underlying data. Once you have an OutSystems structure filled with these datapoints, it should be simple enough to convert it to JSON with the inbuilt actions:

And then injecting the result into the Highcharts series input.

Exactly, you are on point with what I want to achieve! I will give this a try. Thank you!

Good morning Afonso. 


Yesterday I tried to get this to work. But I believe this is just a bit too difficult for me right now.

Do you mind guiding me a bit more? I think I'm really close to the solution.

I've made a form with inputs that get saved to an entity. That was the easy part. I'm struggling to grasp how I can fill the gantt chart with this data. Do you mean I should have a json serialize before the server action here (CreateOrUpdateNewGanttActivity)? 

if yes, in which stage do I deserialize it?


Many questions. I apologize in advance but I spent all day yesterday trying to solve this. Hope it's ok. Thank you!!

mvp_badge
MVP

No problem Steven. Looking at your flow, you're creating the record in the database and refreshing a helper query, but the important part should be in the screen (sending the JSON into your chart). You'll also need to serialize the data at some point after the user submits the form, so you can send the JSON.

Do you think you could share your module file for everyone to take a look?

Of course. It took some time because I had to rebuild this specific feature in a new application/module. On the main application I have separate modules for core services and so on but in this oml it's all in the same. 


Thank you.



Clarification:


I want to be able to change the static information inside of the javascript with the data I send into the entities "GanttChart" + "GanttActivity". You can find the JS inside of the OnReady-action inside the Dashboard Screen.


GanttChartJS.oml

mvp_badge
MVP

Steven, I've done some changes to the module and now it should generate JSON data according to what's on the GanttActivity Entity. I had to cheat around the start and end date because Highcharts is a little picky and expects dates in UTC and numeric (no strings). Right now it's not loading data onto the chart, but this is how the solution should look like.

I've attached the module so you can take a look at it and start tinkering, I'll keep trying on my end as well.

GanttChartJS_Dynamic.oml

mvp_badge
MVP
Solution

Got it 10 minutes later.

This should work as expected. You'll still need to convert the dates to the UNIX format before passing the JSON Gantt data to the Highcharts javascript block, but there are components in the Forge to help with this.

GanttChartJS_Dynamic_Working.oml

Wow, you're a champ Afonso. Thank you so much! :) 

mvp_badge
MVP

No problem Steven. Let us know if you have any other questions.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.