Integrating GanttChart into Laravel + VueJS project

Tram Ho

What is a Gantt Chart?

Gantt is a horizontal diagram, used to present tasks and events over time. The diagram will consist of two main parts: the vertical axis shows the names of the jobs and the horizontal axis shows the timelines for those jobs. Looking at a Gantt diagram, you can easily grasp the information of each work and the whole project.

Because the information layout is simple but clear and intuitive, it has become a useful tool to plan, schedule the implementation or manage project progress.

The simplest example of a Gantt Chart is Redmine. We are probably too familiar with redmine when working on projects on the company. On redmine there is support available Gantt diagram. You can try opening your project to see it. Here is an example of Gantt on Redmine.

To integrate the Gantt Chart into the project we have quite a lot of libraries, but within this article I will use the danttmlx Gantt library. This is an open source library with and also has a paid version that includes more advanced functions.

Building the database

The most basic database for storing and dropping Gantt diagram is the following tables:

  • Tasks: store information about the job’s start, start time, end time, progress in% …
  • Links: Store connections between jobs

We created the migration in the Laravel project

Building backend data storage API

Next, we will build an API to store data whenever operations are sent from the client. We added 2 controllers corresponding to the 2 models created above.

In this controller we have 3 basic functions to store and update data including: add, edit, delete. Add the corresponding route:

Continue adding controllers for the Link:


Integrate dHtmlx into Frontend VueJS

The project I use demo this time I have used VueJS so I will aim to write Gantt as a component for easy use whenever needed. First to install dhtmlx we install via npm:

Create Gantt component:

In the component above, I have written a number of functions to support the import and export from excel files, Microsoft Project files. Explain a bit of code: First we init gantt to create a div and get data from ajax via api /api/gantt/ , Then we create a data processor through REST API and so when we When editing on Gantt chart, the library will automatically call api to update the data into the DB:

The following results:

So I just introduced through how to integrate the Gantt Chart into Laravel + VueJS project. This is just the most basic lesson to learn about GanttChart. Also want to customize the details of the functionality, we need to stick to the library’s documentation to custom code to suit individual requirements. Thank you for following the article


Share the news now

Source : Viblo