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

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();
chart.init(el, {
	data: {
    url: 'https://rawgit.com/pmeisen/js-gantt/master/resources/sample-data-array.json',
    postProcessor: function (data) {
    	var f = 'dd.MM.yyyy HH:mm:ss';
      for (var i = 0; i < data.length; i++) {
        var record = data[i];
        record[1] = GanttChart.DateUtil.parseString(record[1], f);
        record[2] = GanttChart.DateUtil.parseString(record[2], f);
      }

      return {
      	names:['caller', 'start', 'end', 
        			 'duration', 'recipient', 'origin', 
               'destination', 'ratepermin', 'costs', 
               'origincontinent', 'destinationcontinent',
               'callergender','recipientgender'], 
       	records: data
      };
    },
    mapper: {
      startname: 'start',
      endname: 'end',
      group: ['callergender', 'recipientgender'],
      label: ['callergender', 'start', 'caller'],
      tooltip: ['caller', 'recipient', 'start', 'end']
    },
    timeaxis: {
      start: GanttChart.DateUtil.createUTC(2014, 6, 11),
      end: GanttChart.DateUtil.createUTC(2014, 6, 11, 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: {
            '["Female","Female"]': '#7cb5ec',
            '["Male","Female"]': '#434348',
            '["Female","Male"]': '#f7a35c',
            '["Male","Male"]': '#90ed7d'
          }
        },
        theme: {
          intervalColor: '#444444',
          intervalHeight: 10,
          intervalBorderSize: 0
        }
      }
    }
  }
});
chart.resize(600, 200);