jquery Gantt Chart Development Guide

Jquery.gantt is an open source JS library based on the jquery library's extensible functionality for Gantt Chart effects.

<link rel= "stylesheet" href= "Css/style.css"/>
<script src= "Js/jquery-1.7.min.js" ></script>
<script src= "js/jquery.fn.gantt.js" charset = "GB2312" ></script>
<script src= "Js/jquery.cookie.js" ></script>
Add the following div where you want the Gantt chart to appear.
<div class= "Gantt" ></div>

Component Configuration
Gantt Configuration
$ (". Selector"). Gantt ({source: "Ajax/data.json", Scale: "Weeks", Minscale: "Weeks", Maxscale: "Months", Onitemclick: function (data) {alert ("Item clicked-show Some Details"), onaddclick:function (DT, rowId) {alert ("Empty Space clicked- Add an item! ");}, Onrender:function () {console.log (" chart rendered ");}});
Parameter default value receive type
Sourcenullarray, String (URL)
Itemsperpage7number
months["January", "February", "March", "April", "may", "June", "July", "August", "September", "October", "November", "Dec Ember "]array
Dow["S", "M", "T", "W", "T", "F", "s"]array
Navigate "Buttons" String ("buttons", "scroll")
Scale ' days ' String
Maxscale "Months" String
Minscale "Hours" String
Waittext "Please Wait ..." String
Onitemclick:function (data) {return;} Click events in the data range
Onaddclickfunction (DT, rowId) {return;} Countless click events within a range of data
Onrenderfunction () {return;} Rendering events
Usecookiefalse If you need to use cookies, you need to refer to the JS script file:
Jquery.cookie.js
Scrolltotodaytrueboolean
Source Configuration
source:[{Name: "Example", desc: "Lorem ipsum dolor sit amet.", values:[...]
Parameter default value receive type explanation
Namenullstring the leftmost column of each row is displayed in bold
Descnullstring the second column to the left of each row
Valuesnullarray Gantt Chart date range items
Value Configuration
values:[{to: "/date (1328832000000)/", From: "/date (1333411200000)/", desc: "Something", Label: "Example Value", Customclass: "ganttred", Dataobj:foo.bar[i]}]
Parameter Receive type interpretation
ToString (Date) end time, in milliseconds as the conversion unit
FromString (Date) Start time, in milliseconds as the conversion unit
descstring Mouse Hover display text
Labelstring Gantt Item display text
Customclassstring custom class for Gantt items
Dataobjall a data object that is applied directly to a specific item

Code description
Jquery.cookie.js
For cookie management, if you need to use cookies in the Gantt Chart, you need to refer to the JS file in the page, otherwise you do not need a reference.
Jquery.fn.gantt.js
The core script file of the Jquery.gantt component, all Gantt chart function codes are in this file.
Code structure parsing:
$.fn.gantt = function (options): Gantt Chart Part Object
Basic Setup Items
Keys for Cookiekey:cookie
Scales: The level of the time range
Settings: Part setup set
Source: Data Source
ItemsPerPage: Number of data rows per page of paging
Months: Month name at column header
Dow: Name of the week at the head of the column
Startpos: Default start location date
Navigate: Bottom navigation, buttons for button, scroll for slider type
Scale: The time range for each column of the Gantt chart
Usecookie: Whether to use cookies if you need to reference jquery.cookie.js
Maxscale: Maximum time range
Minscale: Minimum Time range
Waittext: Waiting for prompt text
Onitemclick: A data-scoped click event
Onaddclick: No data in-range click events
OnRender: Rendering Events
Scrolltotoday: Set whether to scroll to today
Selector method (A: element, I: Index, M: value): $.extend ($.expr[":"], {}); Findday: Matches a specified date in milliseconds for a time unit
Findweek: Matches a specified week in milliseconds for a time unit
Findmonth: Matches a specified month in milliseconds for a time unit
Date prototype Date.prototype.getWeekId: Gets the id attribute of the div weekid used to identify the week, returns the string in the format dh-yyyy-ww, where WW is the week ordinal of the year Date.prototype.genRepDate: Gets the time range, in seconds, by the value of the scale in the part settings Property Date.prototype.getDayOfYear: Gets the day ordinal of a year Date.prototype.getWeekOfYear: Gets the date of the week of the year Date.prototype.getDaysInMonth: Gets the number of days in the month in which the date Date.prototype.hasWeek: If the date resides on the boundary of a week, returns true Date.prototype.getDayForWeek: Returns the Date object for the week's start date
Grid Manager (for navigation and rendering): Core
elementFromPoint: Gets the element at the top of the specified point
Create: Creating a chart
Init: Initialize view, count rows, pages, visible start time and end time
Render: Render Grid
Leftpanel: Create left panel
Datapanel: Create right data panel
Rightpanel: Create right head panel
Navigation: Navigation
Createprogressbar: Creating a progress bar
Marknow: Remove "WD" class to add "Today" class to the current scale mode
Filldata: Populate the chart, parse the data, and populate the panel
NavigateTo: Navigate to
Navigatepage: Navigating to the specified page
Zoominout: Change the spatial axis rank (zoom)
Mousescroll: Moving a chart with the mouse
Wheelscroll: Moving a chart with the mouse wheel
Sliderscroll: Control the chart with the slider
Scrollpanel: Update the margin of the rolling panel
Synchronizescroller: Synchronous scrolling
Repositionlabel: Reposition Data labels
Waittoggle: Toggle Wait
Useful Features: Tools
Getmaxdate: Returns the maximum possible date under the standard of the scale value
Getmindate: Returns the minimum possible date under the standard of the scale value
Parsedaterange: Returns an array of date objects between from and to, with a time unit of days
Parsetimerange: Returns an array of date objects between from and to, with the time Unit hour
Parseweeksrange: Returns an array of date objects from and to, the time unit is week
Parsemonthsrange: Returns an array of date objects in from and to, the time unit is month
Datedeserialize: Deserializing from string to date
GenID: Create ID with date
Getcellsize: Gets the size of the current cell
Getrightpanelsize: Gets the size of the current right panel
Getpageheight: Gets the height of the current page
Getprogressbarmargin: Gets the margin size of the current progress bar

Option extension: This.each (function () {};);

Original from http://www.51diaodu.com/doc/1456

jquery Gantt Chart Development Kit Http://www.51diaodu.com/pdt/1442DEMO:http://www.51diaodu.com/demo/1442/SampleBrowser.htm

jquery Gantt Chart Development Guide