angular2-gantt
angular2-gantt copied to clipboard
dalestone
error
Follow This Implementation of Gantt chart. Github link : https://github.com/dalestone/angular2-gantt Getting Started Step 1 :Clone the Project into your workspace https://github.com/dalestone/angular2-gantt Step 2: First make a component named ganttchart ng g component ganttchart Step 3: Install Angular 2 Gantt (Webpack only) npm install ng2-gantt --save Step 4: Goto github link https://github.com/dalestone/angular2-gantt/tree/master/src Step 5: Copy lib folder and paste it inside app folder. Step 6: Import the ng2-gantt NgModule into your app module import { GanttModule } from './lib'; // other imports @NgModule({ imports: [ GanttModule ] }) export class AppModule { } Step 7: Go to src folder of the cloned project and copy the contents of demo-app.component.html and paste it inside ganttchart.component.html Step 8:Go to src folder of the cloned project and copy the contents of demo-app.component.ts and paste it inside ganttchart.component.ts Step 9: Start the local server by writing npm start in your console A Gantt chart, commonly used in project management, is one of the most popular and useful ways of showing activities (tasks or events) displayed against time. On the left of the chart is a list of the activities and along the top is a suitable time scale. Each activity is represented by a bar; the position and length of the bar reflects the start date, duration and end date of the activity. This allows you to see at a glance: Angular2 Gantt PROJECT contains a tabular form which contains Id, Name,TreePath,Percent complete,Start Date and End Date. Input Texts are Two Way Binded where you can change the text and it will be reflected in Gantt Chart Table Angular 2 Gantt Playground contains Task status containing error,warning, information and completed in dropdown option. It contains 3 buttons
- Create Task
When you click on create task button a new task will be created with a id generated,name generated,tree path generated and percentage complete generated as 0% by default also start date and end date is also generated . We can change the fields as it is two way binded.
createTask(element: any) {
const selectedStatus = element.options[element.selectedIndex].value;
const parentTask = {
'id': 'parent_task_' + Math.random(),
'parentId': 'parent_task',
'treePath': 'parent_task',
'name': 'parent_task',
'percentComplete': 0,
'start': new Date('2017-01-01T03:30:00.0Z'),
'end': new Date('2017-01-01T12:45:00.0Z'),
'status': selectedStatus
}
this.project.tasks.push(parentTask);
const childTask = {
'id': 'child_task_' + Math.random(),
'parentId': 'ea2a8d86-1d4b-4807-844d-d5417fcf618d',
'treePath': 'parent 1/child3',
'name': 'child3',
'percentComplete': 0,
'start': new Date('2017-01-01T03:30:00.0Z'),
'end': new Date('2017-01-01T12:45:00.0Z'),
'status': selectedStatus
}
this.project.tasks.push(childTask);
}
2.Update Tasks Percent Complete
When you click this button the task will be updated till 100%.
updateTasks() {
for (let i = 0; i < this.project.tasks.length; i++) {
let task = this.project.tasks[i];
let progress = setInterval(function () {
if (task.percentComplete === 100) {
task.status = 'Completed';
clearInterval(progress);
} else {
if (task.percentComplete === 25) {
task.status = 'Warning';
} else if (task.percentComplete === 50) {
task.status = 'Error';
} else if (task.percentComplete === 75) {
task.status = 'Information';
}
task.percentComplete += 1;
}
}, 200);
}
}
3.Load big dataset
When you click this button large number of big dataset will be loaded based on the limits set on it.Here it is set upto 1000
loadBigDataSet() {
var tasks = [];
for (var i = 11; i < 1000; i++) {
var task = {
id:
parent${i}, name: 'task testing', percentComplete: 0, start: new Date(), end: new Date(), status: '' } tasks.push(task); }
If you have installed the package with npm (npm install ng2-gantt --save) you don't have to download the library separately. But then you do have to change the imports in the demo demo-app.component.ts : change "import ... from './lib';" to "import ... from 'ng2-gantt';" . (BTW this is the first Github Angular-2 project that i installed and got working within 15 minutes, chapeau!)
