html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // set input dateTime format

  anychart.format.inputDateTimeFormat('yyyy-MM-dd HH:mm');

​

  // create data sets

  var activeDataSet = anychart.data.set(activeData());

​

  var idleDataSet = anychart.data.set(idleData());

​

  var errorDataSet = anychart.data.set(errorData());

​

  // map the data

  var activeMapping = activeDataSet.mapAs({

    x: 0,

    low: 1,

    high: 2

  });

  var idleMapping = idleDataSet.mapAs({

    x: 0,

    low: 1,

    high: 2

  });

  var errorMapping = errorDataSet.mapAs({

    x: 0,

    low: 1,

    high: 2

  });

​

  // get colors from theme

  // !!! When you change chart theme, colors may not match the color coding of the chart

  // For Monochrome theme idle and error colors have fallback, because theme contains only 5 colors

  var themeColors = anychart.theme().length

    ? anychart.theme()[0].palette.items

    : anychart.palettes.defaultPalette;

  var activeColor = themeColors[0];

  var idleColor = themeColors[5] || '#a5a5a5';

  var errorColor = themeColors[6] || '#ff3e29';

​

  // create a chart

  var chart = anychart.bar();

​

  // set formatter for the chart tooltip's title

  chart.tooltip().titleFormat(function () {

    return this.x + ' - ' + this.seriesName;

  });

​

  // set formatter for the chart tooltip's content

  chart.tooltip().format(function () {

    return 'From: ' + this.low + '\nTo: ' + this.high;

  });

​

  // create series with mapped data and set the series settings

  chart

    .rangeBar(activeMapping)

    .xMode('scatter')

    .name('Active')

    .fill(activeColor)

    .stroke(null);

​

  chart

    .rangeBar(idleMapping)

    .xMode('scatter')

    .name('Idle')

    .fill(idleColor)

    .stroke(null);

​

  chart

    .rangeBar(errorMapping)

    .xMode('scatter')

    .name('Error')

    .fill(errorColor)

    .stroke(null);

​

  // set the padding between bars

  chart.barsPadding(-1);

​

  // create and adjust dateTime Y scale

  var yScale = anychart.scales.dateTime();

  chart.yScale(yScale);

  chart.yScale().ticks().interval('h', 3);

​

  // disable xAxis labels

  chart.xAxis().labels(false);

​

  // adjust Yaxis albels formatting

  chart.yAxis().labels().format('{%tickValue}{dateTimeFormat:HH:mm}');

​

  // enable Y grids

  chart.yGrid().enabled(true);

​

  // adjust grids appearance

  chart.yGrid().stroke({

    color: '#cecece',

    dash: '10 5'

  });

​

  // enable chart legend

  var legend = chart.legend();

  legend.enabled(true);

​

  // place the legend at the bottom of the chart

  legend.position('bottom');

​

  // disable legend item click

  legend.listen('legendItemClick', function (event) {

    event.preventDefault();

  });

​

  // set container and render the chart

  chart.container('container').draw();

});

​

// functions, that return data for the chart's series

function activeData() {

  return [

    ['Process 1', '2018-02-01 00:00', '2018-02-01 00:30'],

    ['Process 1', '2018-02-01 00:40', '2018-02-01 01:25'],

    ['Process 1', '2018-02-01 01:45', '2018-02-01 02:30'],

    ['Process 1', '2018-02-01 02:40', '2018-02-01 03:15'],

    ['Process 1', '2018-02-01 04:05', '2018-02-01 04:55'],

    ['Process 1', '2018-02-01 05:05', '2018-02-01 07:30'],

    ['Process 1', '2018-02-01 08:00', '2018-02-01 09:30'],

    ['Process 1', '2018-02-01 10:00', '2018-02-01 12:30'],

    ['Process 2', '2018-02-01 00:00', '2018-02-01 01:30'],

    ['Process 2', '2018-02-01 02:00', '2018-02-01 04:30'],

    ['Process 2', '2018-02-01 05:05', '2018-02-01 05:15'],

    ['Process 2', '2018-02-01 07:15', '2018-02-01 09:50'],

    ['Process 2', '2018-02-01 10:25', '2018-02-01 10:30'],

    ['Process 2', '2018-02-01 10:55', '2018-02-01 12:05']

  ];

}

​

function idleData() {

  return [

    ['Process 1', '2018-02-01 00:30', '2018-02-01 00:35'],

    ['Process 1', '2018-02-01 01:25', '2018-02-01 01:45'],

    ['Process 1', '2018-02-01 03:15', '2018-02-01 04:05'],

    ['Process 1', '2018-02-01 07:30', '2018-02-01 08:00'],

    ['Process 1', '2018-02-01 09:45', '2018-02-01 10:00'],

    ['Process 2', '2018-02-01 01:30', '2018-02-01 01:55'],

    ['Process 2', '2018-02-01 04:30', '2018-02-01 05:05'],

    ['Process 2', '2018-02-01 05:25', '2018-02-01 07:15'],

    ['Process 2', '2018-02-01 10:05', '2018-02-01 10:25'],

    ['Process 2', '2018-02-01 10:35', '2018-02-01 10:55'],

    ['Process 2', '2018-02-01 12:10', '2018-02-01 12:30']

  ];

}

​

function errorData() {

  return [

    ['Process 1', '2018-02-01 00:35', '2018-02-01 00:40'],

    ['Process 1', '2018-02-01 02:30', '2018-02-01 02:40'],

    ['Process 1', '2018-02-01 04:55', '2018-02-01 05:05'],

    ['Process 1', '2018-02-01 09:30', '2018-02-01 09:45'],

    ['Process 2', '2018-02-01 01:55', '2018-02-01 02:00'],

    ['Process 2', '2018-02-01 05:15', '2018-02-01 05:25'],

    ['Process 2', '2018-02-01 09:50', '2018-02-01 10:05'],

    ['Process 2', '2018-02-01 10:30', '2018-02-01 10:35'],

    ['Process 2', '2018-02-01 12:05', '2018-02-01 12:10']

  ];

}