JS Gantt Chart JQuery. gantt, Gantt Chart jquery. gantt

Source: Internet
Author: User

JS Gantt Chart JQuery. gantt, Gantt Chart jquery. gantt

JQuery. Gantt is an open-source JS Component Library Based on the JQuery library for implementing the Scalable functions of Gantt charts. It allows you to view the itinerary and data distribution in a graphical manner.

On the basis of the original code, I modified some code. The main improvements are as follows:

1. Fixed the "error reported by the original code js when a piece of data is empty ".

2. fixed the problem that the progress bar will flash when ie is displayed ".

3. json data is no longer in the new Date (timestamp) format and is directly a timestamp.

For: http://download.csdn.net/detail/wangshaner1/8314349

The page is displayed as follows:


Box 1 is a page flip, box 2 is the current time, box 3 is the scroll bar and scroll button, and box 4 is the display granularity switch.

Code introduction:

<link rel="stylesheet" href="css/style.css" />
<! -- The package does not contain jquery, You need to download the latest version --> <script src = "js/jquery-1.7.min.js"> </script> <script src = "js/jquery. fn. gantt. js "> </script> <! -- If jquery1.9 or above, you also need to introduce --> <script src = "js/jquery-migrate-1.2.1.min.js"> </script>
Note: If you introduce jquery 1.9 +, You need to introduce js/jquery-migrate-1.2.1.min.js, because jquery1.9 + canceled the support for $. browser, if not introduce the upgrade package, js running error

The js Code for generating a chart is as follows:

$ ('Selector '). gantt ({source: source, // For the displayed data, see the following analysis navigate: "scroll", // It is displayed as scroll or buttonsmonths: ["January", "February ", "March", "April", "May", "June", "July", "August", "September", "October", "November ", "December"], // The language dow: ["S", "M", "T", "W", "T", "F ", "S"], // The language scale displayed in the week: "weeks", // The default display granularity maxScale: "months", // The maximum display granularity minScale: "days", // minimum granularity itemsPerPage: 18, // Number of onItemClick: function (data) displayed on each page {// Click Event displayed on the progress bar, for data, see source definition // alert ("Item clicked-show some details" + data);}, onAddClick: function (dt, rowId) {// click event in the blank area of the chart }, onRender: function () {// events during rendering }});

The above source indicates the data source in the following format:

Source: [{name: "Example", // the title of a row desc: "Something", // values: [{from: "1333411200000 ", // start time, 13-bit timestamp, which is different from the original version "/Date (1333411200000)/" to: "1328832000000", // End Time, 13-bit timestamp, this is different from the original "/Date (1333411200000)/" desc: "Something", // description label: "Example Value", // The label customClass displayed on the progress bar: "ganttRed", // display color, basically gantt + "Color Term" dataObj: Data Object imported by dataObj // onclick and other events}]

For other parameters, refer to [1].


Refer:

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


Related Article

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.