Gantt example

by sikuda

HTML

<div id='paper'></div>

JavaScript

-/*!
 * g.Raphael 0.60 - Charting library, based on Raphaël
 * 
 * Copyright (c) 2015 Sergey Kudashkin 
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
 */

/*\
 * Paper.ganttchart
 [ method ]
 **
 * Creates a gantt chart
 **
 > Parameters
 **
 - jobs (array of string)
 - values (array of objects like this)
 o{
 o job (number) number of job
 o begin (string) begin date ("2015-05-01")
 o end (string) end date ("2015-05-01")
 o links (array) of number of rect from links [0,1] 
 o}
 - opts (object) options for the chart - 
 o {
 o colour 
 o fontsizeLabel - fontsize fo labels(tasks)
 o fontsizeHeader - font's size  for headers  
 o }
 **
 = (object) path element of the popup
 > Usage
 | var gantt = r.ganttchart(["Посадить дерево","Построить дом", "Вырастить сына"],[{begin:"2015-05-01", end: "2015-06-01", job: 0},{begin:"2014-05-01",end:"2014-06-01", job: 0}], {});
 \*/

(function (){

   var mounth_titles = []; 
   mounth_titles['ru'] = ['янв.','фев.','март', 'апр.','май','июнь','июль','авг.','сен.','окт.','нояб.','дек.','-'];
   mounth_titles['en'] = ['jan.','feb.','mar.', 'apr.','may','jun.','jul.','aug.','sep.','oct.','nov.','dec.'];
    
   //convert input date to date format
   function inputToDate( date ){
         if(typeof date == 'string') date = parseISO8601(date);
         else if(!date1.getTime) date = new Date(NaN);
         return date;
   }

   function parseISO8601(dateStringInRange) {
    var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
        date = new Date(NaN), month,
        parts = isoExp.exec(dateStringInRange);

    if(parts) {
      month = +parts[2];
      date.setFullYear(parts[1], month - 1 , parts[3]);
      if(month != date.getMonth() + 1) {
        date.setTime(NaN);
      }
    }
    return date;
  }


    function GanttChart(paper, jobs, values, opts) {

        jobs = jobs || [];
        values = values || [];
        width = paper.canvas.clientWidth || 0,
        height =...