In PHP

Your First Gantt

Let us start with creating a new project directory, for example MyFirstGantt.

1) Gantt Widget Source JS files

To begin with, you need the JS Source files that are required by the Gantt Widget. These files are in the <install path>/Src folder. Simply copy over the whole Src folder into the above sample directory. This folder also has other dependant css files. You can delete the "Src/bin" folder as that's not required for this PHP sample.

Then copy over the PHP library files which are inside the <install path>/PlatformSamples/PHPSamples/lib folder into the sample directory.

2) Sample Utility JS files

Some JS files with utility functions that enables inline-editing in the grid, etc. are in the <install path>/Samples/Scripts folder. Copy over that entire Scripts directory as well into MyFirstGantt.

3) Sample JSON Data

Create a SampleData.json file containing a list of sample tasks to be displayed in the gantt.

SampleData.json content:

[{

"TName" : "Team1",

"PStartTime" : "2012-04-02T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Resources" : [{

"RName" : "JohnH",

"PStartTime" : "2012-04-04T00:00:00Z",

"PEndTime" : "2012-04-15T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

"StartTime" : "2012-04-03T00:00:00Z",

"EndTime" : "2012-04-12T00:00:00Z",

"Progress" : 20

}]

{

"RName" : "VictorG",

"PStartTime" : "2012-04-06T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

"StartTime" : "2012-04-03T00:00:00Z",

"EndTime" : "2012-04-18T00:00:00Z",

"Progress" : 20

}]

{

"RName" : "JasonS",

"PStartTime" : "2012-04-06T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

"StartTime" : "2012-04-06T00:00:00Z",

"EndTime" : "2012-04-12T00:00:00Z",

"Progress" : 20

{

"TaskName" : "Task 2",

"StartTime" : "2012-04-12T00:00:00Z",

"EndTime" : "2012-04-18T00:00:00Z",

"Progress" : 70

}]

{

"TName" : "Team2",

"PStartTime" : "2012-04-10T00:00:00Z",

"PEndTime" : "2012-04-20T00:00:00Z",

"Resources" : [{

"RName" : "BalajiN",

"PStartTime" : "2012-04-08T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

"StartTime" : "2012-04-08T00:00:00Z",

"EndTime" : "2012-04-20T00:00:00Z",

"Progress" : 20

}]

{

"RName" : "LiM",

"PStartTime" : "2012-04-12T00:00:00Z",

"PEndTime" : "2012-04-18T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

"StartTime" : "2012-04-08T00:00:00Z",

"EndTime" : "2012-04-19T00:00:00Z",

"Progress" : 90

}]

{

"RName" : "StacyH",

"PStartTime" : "2012-04-05T00:00:00Z",

"PEndTime" : "2012-04-20T00:00:00Z",

"Tasks" : [{

"TaskName" : "Task 1",

"StartTime" : "2012-04-06T00:00:00Z",

"EndTime" : "2012-04-12T00:00:00Z",

"Progress" : 20

}]

4) PHP file including the Gantt Widget

Create a new PHP file inside the project directory (MyFirstGantt) and reference the following source files. Remember to link to the right version of the RadiantQ jQuery Gantt in the last reference below.

<!DOCTYPE html>

require_once "lib/AutoLoad.php

Creating Gantt And Gantt Table

Initialize the GanttControl widget and Gantt Table as follows

<?php

//Gantt Settings

$ganttSetttings = new RadiantQ\Gantt\GanttSettings();

//GanttControl Options.

$options= new RadiantQ\Gantt\FlexyGanttOptions();

$ganttSetttings->DataSourceUrl = "FlexyGanttSkeleton.json";

//column defintions

$NameColumn = new RadiantQ\Gantt\Column();

$NameColumn->field="Name";

$NameColumn->title= "Name";

$NameColumn->clientEditorTemplate= "flexyGantNameEditor";

$NameColumn->clientTemplate = "flexyGanttNameColumnTemplate";

$GanttTableOptions->columns = array($NameColumn);

$options->GanttTableOptions = $GanttTableOptions;

$options->HierarchyResolverFunction = "ResolverFunction";

$options->TaskTooltipTemplateID = "TaskTooltipTemplate";

$options->TaskStartTimeProperty = "StartTime";

$options->TasksListProperty = "Tasks";

$options->ParentTaskStartTimeProperty = "PStartTime";

$options->TaskItemTemplate = "<div class='rq-gc-taskbar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>";

$options->ParentTaskItemTemplate = "<div class='parentBar-style'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='rq-gc-parentBar-leftCue'></div><div class='rq-gc-parentBar-middle'></div><div class='rq-gc-parentBar-rightCue'></div></div>";

$options->TaskEndTimeProperty = "EndTime";

$options->ParentTaskEndTimeProperty = "PEndTime";

//GanttChart options.

$GanttChartOptions = new RadiantQ\Gantt\GanttChartOptions();

$GanttChartOptions->AnchorTime = new DateTime("2014-04-03");

$GanttChartOptions->TimeIndicatorLineOption = 1;

$options ->GanttChartOptions = $GanttChartOptions;

$ganttSetttings->Options =$options;

//Ganttcontrol initialization.

$gantt = new RadiantQ\UI\FlexyGantt($ganttSetttings);

//Setting attributes to Ganttcontrol elements.

$gantt->setStyleAttribute("width","100%")->setStyleAttribute("height","100%")->setAttribute("id","gantt_container");

//To render the FlexyGantt.

echo $gantt->Render();

//Name template and editor with expander cue.

</div>

<div class="rq-grid-expander-text">${nameConverter(data)}</div>

</script>

</div>

</script>

Script

// to get the name from the bounded list

function nameConverter(flexyNodeData, value) {

var data;

// The grid calls this converter with flexyNodeData as a arg.

if (flexyNodeData.Data)

data = flexyNodeData.Data();

// The grid calls this converter with flexyNodeData as a datacontext.

else

data = flexyNodeData;

if (value == undefined) {

if (data["TName"] != undefined)

return data["TName"];

else if (data["RName"] != undefined)

return data["RName"];

else if (data["TaskName"] != undefined)

return data["TaskName"];

}

else {

if (data["TName"] != undefined)

data["TName"] = value;

else if (data["RName"] != undefined)

data["RName"] = value;

else if (data["TaskName"] != undefined)

data["TaskName"] = value;

}

return;

};

//to resolve the hierarchical data source.

function ResolverFunction(data) {

// If data is wrapped by KO, then data itself could be a function and so we pick the object from the function.

if ($.isFunction(data)) {

data = data()[0];

}

if (data["Resources"] != undefined) {

if ($.isFunction(data["Resources"]))

return data["Resources"]();

else

return data["Resources"];

}

else if (data["RName"] != undefined) {

if (data["Tasks"] != undefined) {

return null;

}

else

// Return an empty array to keep this a collapsible parent with no children. Return null to make this a leaf node.

return new Array();

}

return null;

}

The content of your MyFirstGantt directory should look like this:

Src
Scripts
json file
PHP file

Open the FirstGanttSample.PHP in the browser and you should see this in the browser:

FirstGanttSample in browser

Finally, take a look at this topic that show how you can clean up the Src folder in your project to remove unnecessary files.