Giter Club home page Giter Club logo

jsganttchart's Introduction

JS Gantt Chart

Simply put, this is a JavaScript Gantt Chart generator. It generates a gantt chart from JSON.

ScreenShot

Editor

There is also a limited UI for creating and editing Gantt Chart.

Requirements

  • jQuery
  • Backbone.js
  • Underscore.js

Example

To produce the gantt chart as shown in the image above:

var gantt = JSGanttChart.create({
	resources: {
		programmer: "Peter West",
		supervisor: "mc",
		cosupervisor: "max"
	},
	types: {
		analysis: {
			name: "Analysis",
			color: "#C79810"  // yellow
		},
		critical: {
			name: "Critical",
			color: "#CC0000" // red
		},
		programming: {
			name: "Programming",
			color: "#356AA0" // blue
		},
		documentation: {
			name: "Documentation",
			color: "#FF7400" // orange
		}
	},
	elements: [
		{
			id: "meeting1",
			name: "Supervisor meeting",
			startDate: "1 October 2011 11:00",
			percentageDone: 100,
			resources: [ "programmer", "supervisor", "cosupervisor" ]
		},
		{
			id: "brief",
			name: "Project Brief",
			predecessors: ["meeting1"],
			startDate: "3 October 2011",
			endDate: "14 October 2011 16:00",
			type: "critical",
			slackEndDate: "21 October 2011 16:00",//slackDuration: 4, // or slackEndDate: date
			elements: [
				{
					id: "briefdraft1",
					name: "Draft 1",
					startDate: "3 October 2011",
					endDate: "14 October 2011 16:00",
					type: "analysis",
					percentageDone: 100,
					estimatedHours: 5
				},
				{
					id: "briefdraft2",
					predecessors: ["briefdraft1"],
					name: "Draft 2",
					startDate: "15 October 2011",
					endDate: "17 October 2011",
					percentageDone: 90,
					estimatedHours: 5
				},
			],
			percentageDone: 95,
			estimatedHours: 10
		},
		{
			id: "planning",
			name: "Project Planning",
			predecessors: ["brief"],
			startDate: "17 October 2011",
			endDate: "30 October 2011 14:00",
			percentageDone: 50,
			elements: [
				{
					id: "gantt1",
					name: "Time planning",
					startDate: "17 October 2011",
					endDate: "21 October 2011 14:00",
					estimatedHours: 6,
					percentageDone: 60
				},
				{
					id: "design1",
					name: "Initial mockups",
					startDate: "20 October 2011", 
					endDate: "21 October 2011 14:00",
					estimatedHours: 6,
					percentageDone: 10
				},
				{
					id: "prestudy",
					name: "Prestudy",
					startDate: "18 October 2011",
					endDate: "29 October 2011",
					type: "analysis",
					percentageDone: 2,
				}
			]
		},
		{
			id: "dev",
			name: "Software development",
			startDate: "1 November 2011",
			endDate: "1 March 2012",
			predecessors: ["planning"],
			elements: [
				{
					id: "software1",
					name: "Software development P1",
					startDate: "1 November 2011",
					endDate: "17 December 2011"
				},
				{
					id: "software2",
					name: "Software development P2",
					startDate: "12 January 2012",
					endDate: "14 February 2012"
				}
			]
		},
		{
			id: "study",
			name: "Study",
			startDate: "18 December 2011",
			endDate: "12 April 2012",
			type: "analysis",
			elements: [
				{
					id: "study1",
					name: "First study",
					startDate: "18 December 2011",
					endDate: "11 January 2012",
					type: "analysis",
					predecessors: ["software1"]
				},
				{
					id: "study2",
					name: "Second study",
					startDate: "15 February 2012",
					endDate: "12 April 2012",
					type: "analysis",
					predecessors: ["software2"]
				}
			]
		},
		{
			id: "reviewmeeting1",
			name: "Review meeting",
			startDate: "13 November 2011"
		},
		{
			id: "progreport",
			name: "Progress Report",
			startDate: "7 December 2011",
			endDate: "14 December 2011 16:00",
			type: "documentation"
		},
		{
			id: "finalreport",
			name: "Final Project Report",
			startDate: "2 April 2012",
			endDate: "2 May 2012",
			type: "documentation"
		}
	]
});

jQuery("#container").append(gantt.render().el);

jsganttchart's People

Contributors

flamingtempura avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.