JS Gantt Chart Jquery.ganttyy

Jquery.gantt is an open source JS library based on the jquery library's extensible functionality for Gantt Chart effects. It can either be graphically arranged or show the distribution of data.

I on the original basis, modified some of the code, more than the original function, the main improvement is:

1, fixed "a certain piece of data is empty when the original code JS will error problem".

2. Fixed "The problem that the progress bar will blink when IE is displayed".

3. JSON data is no longer in the form of a new date (timestamp) and is directly timestamp

To be: TBD

The page is displayed as:

Where box 1 is page up and down, box 2 means scroll to the current time, Box 3 is scroll bar and scroll button, box 4 is the display granularity toggle.

Code Introduction:

<link rel= "stylesheet" href= "Css/style.css"/>

<!--package does not contain jquery, you need to download the latest version of--><script src= "Js/jquery-1.7.min.js" ></script><script src= "js/ Jquery.fn.gantt.js "></script><!--if it is jquery1.9 or above, you need to introduce--><script src=" js/ Jquery-migrate-1.2.1.min.js "></script>

Note that if you introduce a jquery of 1.9 +, you need to introduce js/jquery-migrate-1.2.1.min.js, because jquery1.9+ cancels the support for $.browser, if the upgrade package is not introduced, JS run error

The JS code that generates the chart is as follows:

$ (' selector '). Gantt ({<span style= "white-space:pre" ></span>source:source,<span style= "White-space:pre" ></span>//displays the data, see below Analysis <span style= "White-space:pre" ></span>navigate: "scroll",// Show as scroll or Buttons<span style= "White-space:pre" ></span>months: ["January", "February", "March", "April" , "may", "June", "July", "August", "September", "October", "November", "December"],<span style= "White-space:pre" > </span>//Month display language <span style= "White-space:pre" ></span>dow: ["S", "M", "T", "W", "T", "F", "s"],< Span style= "White-space:pre" ></span>//Week display language <span style= "White-space:pre" ></span>scale: " Weeks ", <span style=" White-space:pre "></span>//default display granularity <span style=" White-space:pre "></span >maxscale: "Months", <span style= "White-space:pre" ></span>//maximum display granularity <span style= "White-space:pre" ></span>minscale: "Days", <span style= "white-space:pre" ></span>//minimum display granularity <span styLe= "White-space:pre" ></span>itemsperpage:18,<span style= "White-space:pre" ></span>//the number displayed per page <span style= "White-space:pre" ></span>onitemclick:function (data) {<span style= "White-space:pre" > </span>//The Click event shown in the progress bar, data see source Definition <span style= "white-space:pre" ></span>//alert ("Item clicked- Show some details "+ data", <span style= "White-space:pre" ></span>},<span style= "White-space:pre" > </span>onaddclick:function (DT, rowId) {<span style= "White-space:pre" ></span>//click events at the blank of the chart < Span style= "White-space:pre" ></span>},<span style= "White-space:pre" ></span>onrender: function () {<span style= "White-space:pre" ></span>//event when rendering <span style= "White-space:pre" ></ Span>}});

The above source represents the data source, in the following format:

source:[{        Name: "Example",//row of the title        desc: "Something",//Description of a line        values:[{from: "1333411200000",//Start time, 13-bit timestamp, this is different from the original "/date (1333411200000)/" To: "1328832000000",//termination time, 13-bit timestamp, here is different from the original "/date (1333411200000)/" desc: " Something ",//Description Label:" Example Value ",//The label displayed on the progress bar Customclass:" ganttred ",//display the color, basically gantt+" color noun "dataobj: Dataobj//onclick data Object}]}]

Other parameters refer to [1]

Reference:

[1] Http://www.cnblogs.com/liusuqi/archive/2013/06/09/3129293.html,JQuery.Gantt (Gantt Chart) Development Guide

JS Gantt Chart Jquery.ganttyy