Level 88
Your first route example should work fine!!
You only return a view in your route callback. So my only question would be: Did you create the view and fill it with something?
Jul 23, 2016
13
Level 4
Not Display Data?
I need routes this
Route::get('/projects/{id}/gantt', function () {
return view('projects.gantt');
});
Route::match(['get', 'post'], '/gantt_data', "GanttController@data");
My routes url is this
http://localhost:8000/projects/1/gantt
and routes link is this
<p><a href="/projects/{{ $project->id }}/gantt">Gantt</a></p>
but when I routes this gantt.php it is not display My gantt page only dispaly empty page. No erros
but when I routes this way
Route::get('/gantt', function () {
return view('projects.gantt');
});
Route::match(['get', 'post'], '/gantt_data', "GanttController@data");
with this link
<p><a href="/gantt">Gantt</a></p>
it is working!!! but I need first routes and link show My gantt relate to project id can you give me a solution My GanttControlle.php
<?php
namespace App\Http\Controllers;
use App\GanttTask;
use App\GanttLink;
use Dhtmlx\Connector\GanttConnector;
class GanttController extends Controller
{
public function data() {
$connector = new GanttConnector(null, "PHPLaravel");
$connector->render_links(new GanttLink(), "id", "source,target,type");
$connector->render_table(new GanttTask(),"id","start_date,duration,text,progress,parent,project_id");
}
}
ProjectController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
use App\Task;
use App\Project;
use App\File;
use App\Comment;
use App\Collaboration;
use App\GanttTask;
use App\GanttLink;
use App\Http\Requests;
class ProjectController extends Controller
{
public function index()
{
$projects = Project::personal()->get();
return view('projects.index')->withProject($projects);
}
public function create()
{
return view('projects.new');
}
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required|min:3',
'due-date' => 'required|date|after:today',
'notes' => 'required|min:10',
'status' => 'required'
]);
$project = new Project;
$project->project_name = $request->input('name');
$project->project_status = $request->input('status');
$project->due_date = $request->input('due-date');
$project->project_notes = $request->input('notes');
$project->user_id = Auth::user()->id;
$project->save();
return redirect()->route('projects.index')->with('info','Your Project has been created successfully');
}
public function show($id)
{
$project = Project::find($id);
$tasks = $this->getTasks($id);
$files = $this->getFiles($id);
$comments = $this->getComments($id);
$collaborators = $this->getCollaborators($id);
return view('projects.show')->withProject($project)->withTasks($tasks)->withFiles($files)->withComments($comments)->withCollaborators($collaborators);
}
public function edit($id)
{
$project = Project::find($id);
$tasks = $this->getTasks($id);
return view('projects.edit')->withProject($project)->withTasks($tasks);
}
/*
* Update the specified resource in storage.
*
* @param Request $request
* @param int $id
* @return Response
*/
public function update(Request $request, $id)
{
$project = Project::findOrFail($id);
$this->validate($request, [
'project_name' => 'required|min:3',
'due-date' => 'required|date|after:today',
'project_notes' => 'required|min:10',
'project_status' => 'required'
]);
$values = $request->all();
$project->fill($values)->save();
return redirect()->back()->with('info','Your Project has been updated successfully');
}
public function destroy($id)
{
$project = Project::findOrFail($id);
$project->delete();
return redirect()->route('projects.index')->with('info', 'Project deleted successfully');
}
/*
* Get all the tasks for a Project
* @param [type] $id [description]
* @return [type] [description]
*/
public function getTasks($id)
{
$tasks = Task::project($id)->get();
return $tasks;
}
public function getFiles($id)
{
$files = File::project($id)->get();
return $files;
}
/*
* Get all the comments that were made on a Project
* @param integer $id
* @return collection
*/
public function getComments($id)
{
$comments = Comment::project($id)->get();
return $comments;
}
/*
* Get all the collaborators on this project
* @param int $id
* @return collection
*/
public function getCollaborators($id)
{
$collaborators = Collaboration::project($id)->get();
return $collaborators;
}
//
}
Level 4
@bobbybouwmann yes My gantt.php is this
<script src="dhtmlxGantt/codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="dhtmlxGantt/codebase/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css">
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
</style>
<div id="gantt_here" style='width:100%; height:50%;'></div>
<script type="text/javascript">
gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
gantt.config.step = 1;
gantt.config.scale_unit= "day";
gantt.init("gantt_here", new Date(2010,7,1), new Date(2010,8,1));
gantt.load("./gantt_data", "xml");
var dp = new dataProcessor("./gantt_data");
dp.init(gantt);
</script>
Level 4
No any idea?
Level 51
Is gantt.php a blade file?
Level 88
I don't want to be rude but you don't display anything here if the javascript isn't working. Did you try to put a random paragraph in there to see it works?
Level 75
@Snapey has already answered most of this stuff on another post, plus I asked you to please read the full examples on that site. It is all explained. Remember, I said the laravel example was a very basic example, it asumes the user will read the other detailed examples as well. Why don't you try one of the other examples outside of laravel (just plain php) just to get a better understanding. Edit:
Honest, if I wasn't so busy I'd download that package and work up an example. And is there an easier charting package you could try?
Have you carefully went over http://docs.dhtmlx.com/gantt/desktop__how_to_start.html#step1downloadandextractthedhtmlxganttpackage
Level 13
Honest, if I wasn't so busy I'd download that package and work up an example. And is there an easier charting package >you could try?
Please Share!
Level 75
@jimmck perhaps you could whip him up a decent example.
Level 75
From the link I gave
Step 1. Download and extract the dhtmlxGantt package
Let's start the tutorial with getting the library package on your computer.
Do the following:
Download the dhtmlxGantt package , if you haven't already done it.
Extract the package to the root directory of your local web server. The extracted files will be stored in a folder with the same name as the package file - dhtmlxGantt.
Step 2. Include dhtmlxGantt code files in your HTML file
Then, we need to include dhtmlxGantt code files in your HTML file (to be able to use the functionality of the library). The dhtmlxGantt code files are:
dhtmlxgantt.js
dhtmlxgantt.css
Do the following:
Create an HTML file in the 'dhtmlxGantt' folder (the folder with the dhtmlxGantt files). Name it, for example, 'myGantt.html'.
Include dhtmlxGantt code files to myGantt.html (both files reside in the 'codebase' folder).
myGantt.html
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxGantt</title>
<script src="codebase/dhtmlxgantt.js"></script> <link href="codebase/dhtmlxgantt.css" rel="stylesheet"> </head>
<body>
//your code will be here
</body>
</html>
Step 3. Initialize dhtmlxGantt
Then, we need to create a DIV container and initialize dhtmlxGantt in it.
Beware, dhtmlxGantt is a static object and can be instantiated on the page once. To refer to the dhtmlxGantt's instance you can use dhtmlxGantt or simply gantt.
Do the following:
Define a DIV container in the myGantt.html file.
Initialize dhtmlxGantt with the gantt.init("gantt_here") command. As a parameter, the method takes an HTML container where a Gantt chart will be placed in.
myGantt.html
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxGantt</title>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
</script>
</body>
</html>
Note, if you use the full-screen mode, specify the current style to guarantee the correct work:
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
Step 4. Load data to the Gantt chart
Then, we need to populate the Gantt chart with the data from a sample data source. We will use the easiest of the ways and specify the data source as an inline object.
To load data, we will use the parse method that takes the name of the data source as a parameter.
The properties of the object are:
data - specifies the gantt tasks
id - (string, number) the event id.
start_date - (Date) the date when an event is scheduled to begin.
text - (string) the task description.
progress - (number) a number from 0 to 1 that shows what percent of the task is complete.
duration - (number) the task duration in the units of the current time scale.
parent - (number) the id of the parent task.
links - specifies the gantt dependency links
id-(string, number) the event id.
source-(number) the id of the source task.
target-(number) the id of the target task.
type-(string) the type of the dependency: 0 - 'finish to start', 1 - 'start to start', 2 - 'finish to finish'.
Do the following:
Declare the 'tasks' variable in the myGantt.html file:
myGantt.html
var tasks = {
data:[
{id:1, text:"Project #1",start_date:"01-04-2013", duration:11,
progress: 0.6, open: true},
{id:2, text:"Task #1", start_date:"03-04-2013", duration:5,
progress: 1, open: true, parent:1},
{id:3, text:"Task #2", start_date:"02-04-2013", duration:7,
progress: 0.5, open: true, parent:1},
{id:4, text:"Task #2.1", start_date:"03-04-2013", duration:2,
progress: 1, open: true, parent:3},
{id:5, text:"Task #2.2", start_date:"04-04-2013", duration:3,
progress: 0.8, open: true, parent:3},
{id:6, text:"Task #2.3", start_date:"05-04-2013", duration:4,
progress: 0.2, open: true, parent:3}
],
links:[
{id:1, source:1, target:2, type:"1"},
{id:2, source:1, target:3, type:"1"},
{id:3, source:3, target:4, type:"1"},
{id:4, source:4, target:5, type:"0"},
{id:5, source:5, target:6, type:"0"}
]
};
Call the gantt.parse(tasks) command after the gantt.init("gantt_here") line:
myGantt.html
gantt.init("gantt_here");
gantt.parse (tasks);
Related sample: Basic initialization
Step 5. Create a database
Read this and further steps if you want to load data from a database instead of from an inline object.
Then, we need to create a database with 2 tables to store tasks and dependencies. sortorder is a property used only while loading data from a database. The property sets the index of a task among siblings.
Do the following:
Create a new database with the name - gantt.
Execute the following code to create 2 tables in it: gantt_tasks and gantt_links.
CREATE TABLE `gantt_links` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`source` int(11) NOT NULL,
`target` int(11) NOT NULL,
`type` varchar(1) NOT NULL,
PRIMARY KEY (`id`)
);
CREATE TABLE `gantt_tasks` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`text` varchar(255) NOT NULL,
`start_date` datetime NOT NULL,
`duration` int(11) NOT NULL DEFAULT 0,
`progress` float NOT NULL DEFAULT 0,
`sortorder` int(11) NOT NULL DEFAULT 0,
`parent` int(11) NOT NULL,
PRIMARY KEY (`id`)
);
Step 6. Provide the ability to load data from the database
In the next 2 steps we will use the PHP platform to implement the server-client integration.
If you use another platform, please, read the article Loading Data to know how to implement the server script yourself.
Then, we need to provide the ability to display data from the database in the chart. We'll do it with the load method, that takes the URL to the data source as a parameter. In case of a database, it's a PHP file which realizes connection to the server side.
We will use the PHP platform and the dhtmlxConnector library, as this is the easiest way to implement the server-side logic for dhtmlxGantt.
Do the following:
Create a PHP file in the 'dhtmlxGantt' folder and name it, for example, data.php.
Open the data.php file and add the following server-side code to it:
data.php
<?php
include ('codebase/connector/gantt_connector.php');
$res=mysql_connect("localhost","root","");
mysql_select_db("gantt");
$gantt = new JSONGanttConnector($res);
$gantt->render_links("gantt_links","id","source,target,type");
$gantt->render_table(
"gantt_tasks",
"id",
"start_date,duration,text,progress,sortorder,parent"
);
?>
Switch to the myGantt.html file and set the gantt.config.xml_date property to "%Y-%m-%d %H:%i", to make the format of output data compatible with the format of dhtmlxGantt.
myGantt.html
gantt.config.xml_date = "%Y-%m-%d %H:%i"; gantt.init("gantt_here");
Call the gantt.load('data.php') command to load data from the database to the Gantt chart.
myGantt.html
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load('data.php');//loads data to Gantt from the database
Step 7. Provide the ability to update data in the database
Then, we need to provide the ability to save the changes made in the Gantt chart to the database. For this purpose, we'll use the dataProcessor helper library. All we need to do is to initialize DataProcessor and attach it to the dhtmlxGantt object.
Do the following:
Open the myGantt.html file and initialize dhtmlxDataProcessor with the dataProcessor("data.php") command.
Attach the dhtmlxDataProcessor object to the dhtmlxGantt object with the dp.init(gantt) command.
myGantt.html
gantt.init("gantt_here");
gantt.load('data.php');
var dp=new gantt.dataProcessor("data.php"); dp.init(gantt);
Related sample: Loading using connector and JSON
What's next?
That's all. A basic but functional Gantt chart that can load data from the database and save it back is ready. Now you may configure and customize it to meet all your needs.
We recommend you to read these articles as your next step:
Exploring Ways to Configure the Gantt Chart
Handling Events
Loading Data
Steps 5-7 pertain to database
Level 4
@Mo7sin it is not blade file it is gantt.php
Level 4
@bobbybouwmann yes I put random paragraph it is working.
Level 4
@jlrdw yes I did dhtmlxGantt tool using php and it is working. but I need it with laravel to attach my laravel App. laravel dhtmlxGantt also working in My side but My problem is it is not working with above mentioned url
Level 4
is this problem with this link {{ $project->id}} part?
<p><a href="/projects/{{ $project->id }}/gantt">Gantt</a></p>
Please or to participate in this conversation.