js-gantt: Data Configuration

Example on how to configure the data section.

by Philipp

HTML

<script src="https://rawgit.com/pmeisen/js-gantt/master/dist/js-gantt.min.js"></script>
<div id="chart" style="margin: 20px auto"></div>

JavaScript

// the element used to visualize the chart in
var el = document.getElementById('chart');

// visualize the create sample data
var chart =  new GanttChart();
chart.init(el, {
	data: {
    loader: function(success, error) {
        success({
            names: [ 
                'birthday',
                'dayOfDeath',
                'type',
                'alias',
                'name'
            ],
            records: [
                [ 
                   GanttChart.DateUtil.createUTC(1929, 10, 31),
                   GanttChart.DateUtil.createUTC(2016, 6, 27),
                   'actor',
                   'Bud Spencer',
                   'Carlo Pedersoli'
                ],
                [ 
                   GanttChart.DateUtil.createUTC(1939, 3, 29),
                   null,
                   'actor',
                   'Terence Hill',
                   'Mario Girotti'
                ]
            ]
        })
    },
    mapper: {
        startname: 'birthday',
        endname: 'dayOfDeath',
        group: ['type'],
        label: ['alias'],
        tooltip: ['name', 'alias']
    },
    timeaxis: {
      start: GanttChart.DateUtil.createUTC(1920, 1, 1),
      end: GanttChart.DateUtil.createUTC(),
      granularity: 'd'
    }
  },
  illustrator: {
    config: {
      axis: {
        viewSize: 20000,
        tickInterval: 5000
      },
      view: {
        showBorder: false,
        tooltip: '{1} alias {2}',
        coloring: {
          groupMapping: {
            '["actor"]': '#7cb5ec'
          }
        },
        theme: {
          intervalColor: '#444444',
          intervalHeight: 20,
          intervalBorderSize: 0
        }
      }
    }
  }
});
chart.resize(600, 200);