js-gantt: Loading External Data-Sources for Time-Intervals (loader)

Example on how to load data from, e.g., a server utilizing the loader functionality.

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>
<div style='font-size: 14px; font-family: Tahoma, Verdana, Segoe, sans-serif;'>
When showing data in a chart, it is common that the data is loaded from an external source. How to do that with the js-gantt library (see <a href="https://github.com/pmeisen/js-gantt">js-gantt@github</a>) is shown in the following example.
</div>

JavaScript

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

// visualize the create sample data
var chart =  new GanttChart();
var url = 'https://rawgit.com/pmeisen/js-gantt/master/resources/sample-data.csv';
chart.init(el, {
	data: {
  	url: url,
    loader: function(success, error) {
    	$.get(url).done(function(txt) {
      	var f = 'dd.MM.yyyy HH:mm:ss';
        var lines = txt.split('\n');
        var records = [];
        
        // skip the header and empty lines
        for (var i = 1, lenLines = lines.length; i < lenLines; i++) {
          var values = lines[i].split(';');
          
          // remove empty lines
          if (values.length != 13) {
          	continue;
          }
          
          values[1] = GanttChart.DateUtil.parseString(values[1], f);
          values[2] = GanttChart.DateUtil.parseString(values[2], f);
          records.push(values);
        }
        
       	// fire the success method
        success({
          names:['caller', 'start', 'end', 
                 'duration', 'recipient', 'origin', 
                 'destination', 'ratepermin', 'costs', 
                 'origincontinent', 'destinationcontinent',
                 'callergender','recipientgender'], 
          records: records
        });
      }).fail(error);
    },
    mapper: {
      startname: 'start',
      endname: 'end',
      group: ['callergender', 'recipientgender'],
      label: ['callergender', 'start', 'caller'],
      tooltip: ['caller', 'recipient', 'start', 'end']
    },
    timeaxis: {
      start: GanttChart.DateUtil.createUTC(2013, 9, 27),
      end: GanttChart.DateUtil.createUTC(2013, 9, 27, 23, 59, 0),
      granularity: 'mi'
    }
  },
  illustrator: {
    config: {
      axis: {
        viewSize: 1440,
        tickInterval: 360
      },
      view: {
        showBorder: false,
        tooltip: '{1} called {2}\nbetween {3|date|HH:mm} - {4|date|HH:mm})',
        coloring: {
          groupMapping: {
          ...