dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
164 lines (154 loc) • 4.7 kB
HTML
<html>
<head>
<title>Gantt Chart</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/claro/claro.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../resources/gantt.css";
</style>
<script src="../../../dojo/dojo.js"
data-dojo-config="async:true, transparentColor: [ 255, 255, 255 ]"></script>
<script src="../../../dijit/tests/_testCommon.js"></script>
<script >
require([
"dojo/_base/declare",
"dojo/parser",
"dojo/query",
"dojox/gantt/GanttChart",
"dojox/gantt/GanttProjectItem",
"dojox/gantt/GanttTaskItem",
"dojo/dom",
"dojo/domReady!"
], function(declare, parser, query, GanttChart, GanttProjectItem, GanttTaskItem, dom){
var projectDev = new GanttProjectItem({
id: 1,
name: "Development Project",
startDate: new Date(2012, 10, 11)
});
var taskRequirement = new GanttTaskItem({
id: 1,
name: "Requirement",
startTime: new Date(2012, 10, 11),
duration: 50,
percentage: 50,
taskOwner: "Jack"
});
var taskAnalysis = new GanttTaskItem({
id: 2,
name: "Analysis",
startTime: new Date(2012, 10, 18),
duration: 40,
percentage: 80,
previousTaskId: "1",
taskOwner: "Michael"
});
var taskDesign = new GanttTaskItem({
id: 3,
name: "Design",
startTime: new Date(2012, 10, 18),
duration: 60,
percentage: 80,
previousTaskId: "1",
taskOwner: "Jason"
});
var taskDetailDesign = new GanttTaskItem({
id: 4,
name: "Detail design",
startTime: new Date(2012, 10, 18),
duration: 30,
percentage: 50,
previousTaskId: "1",
taskOwner: "Michael"
});
var taskDevelopmentDoc = new GanttTaskItem({
id: 5,
name: "Development doc",
startTime: new Date(2012, 10, 20),
duration: 20,
percentage: 10,
previousTaskId: "1",
taskOwner: "Rock;Jack"
});
projectDev.addTask(taskRequirement);
projectDev.addTask(taskAnalysis);
projectDev.addTask(taskDesign);
projectDev.addTask(taskDetailDesign);
projectDev.addTask(taskDevelopmentDoc);
var taskSketch = new GanttTaskItem({
id: 6,
name: "Sketch",
startTime: new Date(2012, 11, 1),
duration: 20,
percentage: 50,
previousTaskId: "3",
taskOwner: "Rock"
});
var taskPrototype = new GanttTaskItem({
id: 7,
name: "Prototype",
startTime: new Date(2012, 11, 6),
duration: 60,
percentage: 80,
previousTaskId: "6",
taskOwner: "Rock"
});
var taskImplementation = new GanttTaskItem({
id: 8,
name: "Implementation",
startTime: new Date(2012, 11, 6),
duration: 30,
percentage: 80,
previousTaskId: "6",
taskOwner: "Jason"
});
var taskDetailImplement = new GanttTaskItem({
id: 9,
name: "Detail Implement",
startTime: new Date(2012, 11, 17),
duration: 120,
percentage: 50,
previousTaskId: "7",
taskOwner: "Jason"
});
var taskDeliver = new GanttTaskItem({
id: 10,
name: "Deliver",
startTime: new Date(2012, 11, 18),
duration: 100,
percentage: 30,
previousTaskId: "8",
taskOwner: "Michael;Jason"
});
projectDev.addTask(taskSketch);
projectDev.addTask(taskPrototype);
projectDev.addTask(taskImplementation);
projectDev.addTask(taskDetailImplement);
projectDev.addTask(taskDeliver);
// Create Gantt control
var ganttChart = new GanttChart({
//readOnly: true, //optional: gantt chart editable
//dataFilePath: "gnt.json", //optional: json data file path for load and save, default is "gantt_default.json"
//withTaskId: false, //optional: if true, task id will be on the right of task name, default value is !readOnly.
//animation: false, //optional: whether you need animation when changing granularity of time line
height: 400, //optional: chart height in pixel, default is 400px
width: 1200, //optional: chart width in pixel, default is 600px
withResource: true //optional: with the resource chart or not
}, "gantt"); //"gantt" is the node container id of gantt chart widget
// Add project data to gantt chart widget
ganttChart.addProject(projectDev);
// Initialize and Render
ganttChart.init();
});
</script>
</head>
<body class= "claro" >
<div class= "ganttContent" >
<div id = "gantt" >
</div>
</div>
</body>
</html>