html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create a chart

  var chart = anychart.bar();

​

  // setting chart title

  chart.title("X113 Destroyer Development Plan");

​

  // setting y scale type as dateTime and adjusting minimum and maximum values

  var dateScale = anychart.scales.dateTime();

  var dateTicks = dateScale.ticks();

  dateTicks.interval(1);

  var dateMinorTicks = dateScale.minorTicks();

  dateMinorTicks.interval(0, 2);

  chart.yScale(dateScale);

​

  // enable minor ticks

  var minorTicks = chart.yAxis().minorTicks();

  minorTicks.enabled(true);

​

  // setting data

  var series = chart.rangeBar([

    {x: "Development", low: Date.UTC(2000, 01, 01), high: Date.UTC(2002, 02, 15)},

    {x: "Internal Testing", low: Date.UTC(2001, 06, 01), high: Date.UTC(2003, 07, 01), fill: "#1976D2"},

    {x: "Field Tests", low: Date.UTC(2002, 02, 25), high: Date.UTC(2003, 07, 01), fill: "#EF6C00"},

    {x: "Licensing", low: Date.UTC(2003, 07, 01), high: Date.UTC(2004, 07, 01), fill: "#FFD54F"}

  ]);

  series.tooltip(false);

  series.stroke(null);

​

  // adjusting labels for dateTime scale. Otherwise it would be the number of milliseconds between the date and midnight January 1 1970

  var xLabels = chart.yAxis().labels();

  xLabels.format(function(value) {

    var date = new Date(value["tickValue"]);

    var options = {year: "numeric"};

    return date.toLocaleDateString("en-US", options);

  });

​

  // setting axes titles and position

  var yAxis = chart.yAxis();

  yAxis.orientation("top");

  yAxis.title("Time Plan");

  var xAxis = chart.xAxis();

  xAxis.title("Tasks");

​

  // set container and draw chart

  chart.container("container");

  chart.draw();

});