JS Gantt Chart Jquery.ganttyy

Source: Internet
Author: User
Tags jquery library

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.