dhtmlxgantt - basic - 2

by bizamajig

HTML

<script src="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="http://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css">
<h1>Graph plotting does not match with data</h1>

<div id="gantt_here" style="width: 100%; height: 100%;">
    </div>

CSS

html, body
        {
            height: 100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

JavaScript

//// Task id#1 - Start Date: 17-02-2014 and End Date: 28-02-2014
//// Task id#2 - Start Date: 17-02-2014 and End Date: 02-04-2014
//// Task id#3 - Start Date: 01-01-2014 and End Date: 28-02-2014

var users_data = {
	"data":[
		{"id":1, "text":"Project #1", "start_date":"17-02-2014", "duration":"12", "open": true},
        
		{"id":2, "text":"Task #1", "start_date":"17-02-2014", "duration":"45", "parent":"1", "progress": 1, "open": true, "users": ["John", "Mike"], "priority": "1"},
        {"id":3, "text":"Project #2", "start_date":"01-01-2014", "duration":"59", "open": true}
	]
};

gantt.config.columns = [{ name: "text", label: "Task name", tree: true, width: '*' }, ];
         gantt.config.scale_height = 60;
         gantt.config.scale_unit = "month";
         gantt.config.round_dnd_dates = false;
         gantt.config.date_scale = " %M";
         gantt.config.subscales = [{ unit: "year", step: 1, date: "%Y" }];
         gantt.templates.task_class = function (start, end, task) { return task.color + " cursorPointer"; };
 var date = new Date();
             gantt.config.start_date = new Date(date.getFullYear(), 00, 01);
             gantt.config.end_date = new Date(date.getFullYear() + 1, 00, 01);
        gantt.init("gantt_here");
        gantt.parse(users_data);