article:
Plugin: Calendar
article:
Plugin: Percentage Loader

Plugin: jQuery Gantt Chart

Advertisement

Draw Gantt charts with the famous jQuery ease of development

jQuery Gantt Chart is a plugin that creates an interactive Gantt chart from a json data source.

The chart is used to illustrate a project schedule. The plugin has options to customise the date ranges and these can be zoomed in/out to display in more/less detail.

Plugin: jQuery Gantt Chart


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!");}});


Source Configuration
source:[{
  name:"Example",
  desc:"Lorem ipsum dolor sit amet.",
  values:[...]}]



Value Configuration
values:[{
  to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",
  desc:"Something",
  label:"Example Value",
  customClass:"ganttRed",
  dataObj: foo.bar[i]}]



source

Advertisement
Tags: plugin, image, chart, gantt, js, jquery, json, web, html, css

Leave a Comment

No Comment

© Creative3x Ltd.