DHTMLX Gantt is a full-featured Gantt chart for cross-browser and cross-platform applications. It can meet most of the development needs of project management applications. It has a complete Gantt chart library, powerful functions, and low prices. It provides rich and flexible JavaScript API interfaces and is easily integrated with various server-side technologies (PHP, ASP.NET, Java, etc.) to meet various custom development needs.
The JavaScript components developed by DHTMLX JavaScript UI library are easy-to-use and feature-rich, which are very suitable for solutions of any field and any complexity, saving time in creating and maintaining business applications, and improving productivity .
DHTMLX Gantt latest download (qun: 764148812) 
https://www.evget.com/product/4213/download
This tutorial shows how to add dhtmlx Gantt to a Laravel application.
Step 1: Initialize the project
create project
Create a new application using Composer:
composer create-project laravel/laravel gantt-laravel-app
It should take a minute to download and create all the necessary files. Once everything is done, you can check that everything is correct so far:
cd gantt-laravel-app php artisan serve
At this step, you should get a default Laravel page:
Step 2: Add the Gantt chart to the page
add view
First, we'll add a new page with dhtmlxGantt to our application. Go to the resources/views folder and create a new view called gantt.blade.php:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">
<style type="text/css">
html, body{
height:100%;
padding:0px;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
</script>
</body>
Here we define a simple HTML layout, add the source code of dhtmlxGantt from the CDN, and initialize gantt using the init method.
Note that we also specified a 100% height for the document body and the Gantt chart container. The Gantt chart will use the size of its container, so some initial size is needed.
change default route
After adding the new page, we need to make it accessible from the browser. In this tutorial, we set the Gantt chart as the default page of the application.
Go to routes/network.php and change the default route:
<?php
Route::get('/', function () {
return view('gantt');
});
Run the app again to make sure it fixes the problem:
Step 3: Create Models and Migrations
So, we have an empty Gantt chart. Let's connect it to a database and populate it with data.
create database
Be sure to update the database configuration in .env, for example:
.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gantt-test DB_USERNAME=root DB_PASSWORD=
The next step is to create model classes and migrations. You can generate class and migration files using the Artisan command:
php artisan make:model Task --migration
and
php artisan make:model Link --migration
After that, find the migrations in the folder and define the database schema. You can find the required database schema for Gantt charts here. database/migrations
The code for the Tasks table looks like this:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTasksTable extends Migration
{
public function up()
{
Schema::create('tasks', function (Blueprint $table){
$table->increments('id');
$table->string('text');
$table->integer('duration');
$table->float('progress');
$table->dateTime('start_date');
$table->integer('parent');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('tasks');
}
}
Below you will find the code for the linked table:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateLinksTable extends Migration
{
public function up()
{
Schema::create('links', function (Blueprint $table) {
$table->increments('id');
$table->string('type');
$table->integer('source');
$table->integer('target');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('links');
}
}
and run migrations:
php artisan migrate
When we use it, we can generate some test data for our application. Use the artisan command to generate the seeder class:
php artisan make:seeder TasksTableSeeder php artisan make:seeder LinksTableSeeder
Now, create the database/seed folder, open it and add some data to TasksTableSeeder:
<?php
use Illuminate\Database\Seeder;
class TasksTableSeeder extends Seeder
{
public function run()
{
DB::table('tasks')->insert([
['id'=>1, 'text'=>'Project #1', 'start_date'=>'2017-04-01 00:00:00',
'duration'=>5, 'progress'=>0.8, 'parent'=>0],
['id'=>2, 'text'=>'Task #1', 'start_date'=>'2017-04-06 00:00:00',
'duration'=>4, 'progress'=>0.5, 'parent'=>1],
['id'=>3, 'text'=>'Task #2', 'start_date'=>'2017-04-05 00:00:00',
'duration'=>6, 'progress'=>0.7, 'parent'=>1],
['id'=>4, 'text'=>'Task #3', 'start_date'=>'2017-04-07 00:00:00',
'duration'=>2, 'progress'=>0, 'parent'=>1],
['id'=>5, 'text'=>'Task #1.1', 'start_date'=>'2017-04-05 00:00:00',
'duration'=>5, 'progress'=>0.34, 'parent'=>2],
['id'=>6, 'text'=>'Task #1.2', 'start_date'=>'2017-04-11 00:00:00',
'duration'=>4, 'progress'=>0.5, 'parent'=>2],
['id'=>7, 'text'=>'Task #2.1', 'start_date'=>'2017-04-07 00:00:00',
'duration'=>5, 'progress'=>0.2, 'parent'=>3],
['id'=>8, 'text'=>'Task #2.2', 'start_date'=>'2017-04-06 00:00:00',
'duration'=>4, 'progress'=>0.9, 'parent'=>3]
]);
}
}
And call table seeder.php from DatabaseSeeder:
<?php
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
public function run()
{
$this->call(TasksTableSeeder::class);
$this->call(LinksTableSeeder::class);
}
}
Afterwards, we can seed the database from the command line:
php artisan db:seed
Define the model class
Data is managed through Eloquent model classes. We already generated classes for tasks and links in the previous step. They are ready to use Gantt charts without any changes.
However, what we can do is add the open property of the Task class to the JSON response. It will expand the project tree when loading tasks into the client. Otherwise, all branches are initially closed:
The task model will look like this:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Task extends Model
{
protected $appends = ["open"];
public function getOpenAttribute(){
return true;
}
}
Linked models don't require any changes:
/app/Link.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Link extends Model
{
}
Step 4: Load data
After creating the database and defining the models, we can load the data into the Gantt chart. The client expects a date in the following format, so let's create a controller with an action to generate such JSON:
<?php
namespace App\Http\Controllers;
use App\Task;
use App\Link;
class GanttController extends Controller
{
public function get(){
$tasks = new Task();
$links = new Link();
return response()->json([
"data" => $tasks->all(),
"links" => $links->all()
]);
}
}
And register a route so clients can call this action. Note that we will add the route to the api.php routes file:
<?php
use Illuminate\Http\Request;
use App\Http\Controllers\GanttController;
Route::get('/data', 'GanttController@get');
Finally, call this action from the view:
resources/views/gantt.blade.php
gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.init("gantt_here");
gantt.load("/api/data");
gantt.load sends an AJAX request to the specified URL and expects the JSON response we defined earlier.
Also note that we have specified a date_format value. This is how we tell the Gantt chart data source which date format will be used so the client can parse them.
If you check the application now, you should see that we now have tasks in our Gantt chart:
Step 5: Save Changes
Currently, our Gantt chart can read data from the backend. Let's make it write changes back to the database.
The client will work in REST mode, which means it will send POST/PUT/DELETE requests for tasks and link operations. Here you can find the format of the request and all the routes the Gantt chart will use.
All we need now is to define controllers that handle actions on both models, create routes for them and enable data saving on the client side.
add controller
Let's start with the controller. We will create a RESTful resource controller for each model. It will contain methods for adding/removing and updating models.
task controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Task;
class TaskController extends Controller
{
public function store(Request $request){
$task = new Task();
$task->text = $request->text;
$task->start_date = $request->start_date;
$task->duration = $request->duration;
$task->progress = $request->has("progress") ? $request->progress : 0;
$task->parent = $request->parent;
$task->save();
return response()->json([
"action"=> "inserted",
"tid" => $task->id
]);
}
public function update($id, Request $request){
$task = Task::find($id);
$task->text = $request->text;
$task->start_date = $request->start_date;
$task->duration = $request->duration;
$task->progress = $request->has("progress") ? $request->progress : 0;
$task->parent = $request->parent;
$task->save();
return response()->json([
"action"=> "updated"
]);
}
public function destroy($id){
$task = Task::find($id);
$task->delete();
return response()->json([
"action"=> "deleted"
]);
}
}
There is also a route:
<?php
use Illuminate\Http\Request;
Route::get('/data', 'GanttController@get');
Route::resource('task', 'TaskController');
Some notes about this code:
- When inserting a new task, we return its id to the client in the tid property of the response object
- We assign a default value to the progress parameter. Many request parameters are optional, which means that if the client task does not assign them, they will not be sent to the server operation.
- The response JSON can have any number of additional properties, all of which are accessible from the client handler
Now let's implement the same method for LinkController.
link controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Link;
class LinkController extends Controller
{
public function store(Request $request){
$link = new Link();
$link->type = $request->type;
$link->source = $request->source;
$link->target = $request->target;
$link->save();
return response()->json([
"action"=> "inserted",
"tid" => $link->id
]);
}
public function update($id, Request $request){
$link = Link::find($id);
$link->type = $request->type;
$link->source = $request->source;
$link->target = $request->target;
$link->save();
return response()->json([
"action"=> "updated"
]);
}
public function destroy($id){
$link = Link::find($id);
$link->delete();
return response()->json([
"action"=> "deleted"
]);
}
}
and its route:
<?php
use Illuminate\Http\Request;
Route::get('/data', 'GanttController@get');
Route::resource('task', 'TaskController');
Route::resource('link', 'LinkController');
Enable data saving on the client side
Finally, we'll configure the client to use the API we just implemented:
resources/views/gantt.blade.php
gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.init("gantt_here");
gantt.load("/api/data");
var dp = new gantt.dataProcessor("/api");
dp.init(gantt);
dp.setTransactionMode("REST");
You now have a fully interactive Gantt chart with the ability to view, add, update and delete tasks and links.
Check out our more guides for more features of dhtmlx Gantt.
DHTMLX Gantt has enjoyed a reputation of more than ten years, supports cross-browser and cross-platform, is cost-effective, and can meet all the needs of project management control applications. It is a relatively complete Gantt chart library