doytsujin / ganttr

A pure Javascript Gantt chart generator, drop in, point, render.

Ganttr

A pure Javascript Gantt chart generator, drop in, point, render.

What it does

Generates a Gantt Chart using the Raphael JS framework and a lil’ jQuery.

Requirements

• Raphael
• jQuery
• DateJS

How to Install

Clone this sample app and copy everything in /public into your into your webroot (or /public/javascripts if you’re in Rails).
Add references to the files in your layout template.

How to Use

Ganttr uses data from a simple JSON request to design the chart. The JSON should be in the format of:

  {:boxes => [
      {:start_date => "Nov 3, 2009", :end_date => "Nov 12, 2009", :label => "ASDF", :resource => "MD"},
      {:start_date => "Nov 5, 2009", :end_date => "Nov 17, 2009", :label => "Working?", :resource => "GM"},
      {:start_date => "Nov 15, 2009", :end_date => "Nov 23, 2009", :label => "Whoa...", :resource => "TM"}
    ],
    :arrows => [
      {:from => 0, :to => [1,2]},
      {:from => 1, :to => 2}
    ]}.to_json

A handful of configuration options can be changed at the top of ganttr.js to suit your needs.

To load the chart just call loadChart(); from a click event, page load, whatever.

Sample App

A live version of this sample app is available here

About the Author

My name is Matt Darby. I’m an IT Manager and Lead Dev at for Dynamix Engineering and hold a Master’s Degree in Computer Science from Franklin University in sunny Columbus, OH.

Feel free to check out my site or recommend me