Gantt Chart

Coffee Lounge
1

Hello Everyone,

Any of you implemented Gantt Chart on Wappler?
Best!

2

Yes! I used this library to create a gantt library in Wappler:

If you need help with some example code I could provide you with some…

1 Like
3

Hey @jellederijke! Would be great to have these examples! Thanks a lot!

Best

4

Sorry for the delayed response, @otavionestares. So you need to:

  1. Install a gantt lib in your such as the frappe/gantt listed in my previous post. I think the folder should be accesible in your public folder. I have it in public/folder/assets.

  2. Refer to the gantt js and css files in your page like so:

<link rel="stylesheet" href="css/frappe-gantt.css" />
<link rel="stylesheet" href="css/frappe-charts.min.css" />
<script src="js/frappe-gantt.js"></script>
  1. Define a target where the gantt chart will be displayed
<div class="container-fluid mb-n5" id="ganttenchart">
    <div class="row">
        <div class="col">
            <h2 class="text-center">Gantt chart</h2>
            <div class="chart-target" id="chart"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="gantt-target" id="gantt"></div>
        </div>
    </div>
</div>

  1. create a server action (and include it on your page) that queries the data from your database that you want to display in your gantt

  2. create a function that calls the gantt-chart and sends your query data to the chart. For me this looks like so:

<script>
    function RunGanttChart() {

var tasks = dmx.parse('content.sc_get_diensten.data.get_diensten');
var gantt_chart = new Gantt(".gantt-target", tasks, {
on_click: function (task) {
console.log(task);
},
bar_corner_radius: 15,
bar_height: 30,
custom_popup_html: null,
});
console.log(gantt_chart);

}
</script>

This should run when your server connect with your data is loaded:

 onsuccess="RunGanttChart()"

Does this make any sense for you? Happy to guide you a little more if needed.

1 Like