Jquery Gantt Chart Plugin Jquery.gantt

http://taitems.github.io/jQuery.Gantt/

Parameters	Default Value	type	Description
Source	Null	Array, String (URL)	Data source: JSON array or return JSON URL address
ItemsPerPage	7	Number	Number of items displayed per page
Months	["January", "February", "March", "April", "may", "June", "July", "August", "September", "October", "November", "December" ]	Array	Display characters for the month
Dow	["S", "M", "T", "W", "T", "F", "s"]	Array	Display characters from Sunday to Monday
Navigate	"Buttons"	String ("buttons", "scroll")	Navigation type: Buttons and scroll bars
Scale	"Days"	String	Display unit
Maxscale	"Months"	String	View scale Max Cells
Minscale	"Hours"	String	View scale Minimum cell
Waittext	"Please Wait ..."	String	Prompt text when loading
Onitemclick:	function (data) {return;}		When clicked, the parameter is the data object associated with the item being clicked.
Onaddclick	function (dt, rowId) {return;}		Functions that are executed when a blank grid is clicked The first parameter is the number of milliseconds of the point-in-time of the click, and the ID of the second parameter object
OnRender	function () {return;}		What to do when the Gantt Chart has finished rendering
Usecookie	False		Declares whether a cookie is used to record the state of a chart (zoom unit, scroll bar position) You need to use Jquery.cookie.js to use this option
Scrolltotoday	True	Boolean	Whether to scroll to the day

Source configuration Data Sources config format

Source: [{
	Name: "caption",
	desc: "description.",
	values: [...]
}]

Parameters	Default Value	type	Description
Name	Null	String	Title of each row that appears on the left side of the Gantt Chart--Body text section
Desc	Null	String	Description section on left side description
Values	Null	Array	Information such as the time period corresponding to the Gantt Chart cell is displayed in the cell on the right

value of the JSON value of the Configuration data source

Values: [{
	to: '/date (1328832000000)/",
	from:"/date (1333411200000)/",
	desc:" Descriptive text on hover ",
	Label: Gantt Chart item title,
	customclass: "ganttred",
	Dataobj:foo.bar[i]
}]

Parameters	type	Description
To	String (Date)	End time (number of milliseconds, PHP can be added after timestamp 3 0)
From	String (Date)	Start time
Desc	String	Hover over the item's tip text text that appears on hover, I think?
Label	String	Title text for Gantt chart items
Customclass	String	A custom class added to a Gantt chart item that can be used to mark the color of a chart item
Dataobj	All	The data object to apply to the Gantt Chart item when clicked

$(function() {

			"use strict";

			$(".gantt").gantt({
				source: [{
					name: "Sprint 0",
					desc: "Analysis",
					values: [{
						from: "/Date(1320192000000)/",
						to: "/Date(1322401600000)/",
						label: "Requirement Gathering",
						customClass: "ganttRed"
					}]
				},{
					name: " ",
					desc: "Scoping",
					values: [{
						from: "/Date(1322611200000)/",
						to: "/Date(1323302400000)/",
						label: "Scoping",
						customClass: "ganttRed"
					}]
				},{
					name: "Sprint 1",
					desc: "Development",
					values: [{
						from: "/Date(1323802400000)/",
						to: "/Date(1325685200000)/",
						label: "Development",
						customClass: "ganttGreen"
					}]
				},{
					name: " ",
					desc: "Showcasing",
					values: [{
						from: "/Date(1325685200000)/",
						to: "/Date(1325695200000)/",
						label: "Showcasing",
						customClass: "ganttBlue"
					}]
				},{
					name: "Sprint 2",
					desc: "Development",
					values: [{
						from: "/Date(1326785200000)/",
						to: "/Date(1325785200000)/",
						label: "Development",
						customClass: "ganttGreen"
					}]
				},{
					name: " ",
					desc: "Showcasing",
					values: [{
						from: "/Date(1328785200000)/",
						to: "/Date(1328905200000)/",
						label: "Showcasing",
						customClass: "ganttBlue"
					}]
				},{
					name: "Release Stage",
					desc: "Training",
					values: [{
						from: "/Date(1330011200000)/",
						to: "/Date(1336611200000)/",
						label: "Training",
						customClass: "ganttOrange"
					}]
				},{
					name: " ",
					desc: "Deployment",
					values: [{
						from: "/Date(1336611200000)/",
						to: "/Date(1338711200000)/",
						label: "Deployment",
						customClass: "ganttOrange"
					}]
				},{
					name: " ",
					desc: "Warranty Period",
					values: [{
						from: "/Date(1336611200000)/",
						to: "/Date(1349711200000)/",
						label: "Warranty Period",
						customClass: "ganttOrange"
					}]
				}],
				navigate: "scroll",
				maxScale: "hours",
				itemsPerPage: 10,
				onItemClick: function(data) {
					alert("Item clicked - show some details");
				},
				onAddClick: function(dt, rowId) {
					alert("Empty space clicked - add an item!");
				},
				onRender: function() {
					if (window.console && typeof console.log === "function") {
						console.log("chart rendered");
					}
				}
			});

			$(".gantt").popover({
				selector: ".bar",
				title: "I'm a popover",
				content: "And I'm the content of said popover.",
				trigger: "hover"
			});

			prettyPrint();

		});