html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  table = anychart.data.table('x');

  table.addData([

{"x":'2015-12-24T12:00:00', value_as: 27, value_sydney: 23.6, value_broome: 30.5},

{"x":'2015-12-25T12:00:00', value_as: 25.5, value_sydney: 24.8, value_broome: 31.2},

{"x":'2015-12-26T12:00:00', value_as: 23.1, value_sydney: 28, value_broome: 28.4},

{"x":'2015-12-27T12:00:00', value_as: 26.9, value_sydney: 27.8, value_broome: 30.1},

{"x":'2015-12-28T12:00:00', value_as: 29.7, value_sydney: 27.8, value_broome: 29.9},

{"x":'2015-12-29T12:00:00', value_as: 30.3, value_sydney: 25.8, value_broome: 33.1},

{"x":'2015-12-30T12:00:00', value_as: 23.7, value_sydney: 25.4, value_broome: 33.9},

{"x":'2015-12-31T12:00:00', value_as: 20.4, value_sydney: 23.7, value_broome: 32.15},

{"x":'2016-01-01T12:00:00', value_as: 23, value_sydney: 22.4, value_broome: 27.3},

{"x":'2016-01-02T12:00:00', value_as: 27.5, value_sydney: 26.4, value_broome: 26.4},

{"x":'2016-01-03T12:00:00', value_as: 28.2, value_sydney: 24.2, value_broome: 30.5},

{"x":'2016-01-04T12:00:00', value_as: 23.3, value_sydney: 25.2, value_broome: 30.2},

{"x":'2016-01-05T12:00:00', value_as: 28.9, value_sydney: 24.3, value_broome: 28.8},

{"x":'2016-01-06T12:00:00', value_as: 29.3, value_sydney: 28.9, value_broome: 26.9},

{"x":'2016-01-07T12:00:00', value_as: 28.4, value_sydney: 25.7, value_broome: 31.3},

{"x":'2016-01-08T12:00:00', value_as: 22.8, value_sydney: 27.3, value_broome: 31.8},

{"x":'2016-01-09T12:00:00', value_as: 25, value_sydney: 28.1, value_broome: 30.9},

{"x":'2016-01-10T12:00:00', value_as: 26.5, value_sydney: 23, value_broome: 32.1},

{"x":'2016-01-11T12:00:00', value_as: 27, value_sydney: 23.5, value_broome: 32.5},

{"x":'2016-01-12T12:00:00', value_as: 27.8, value_sydney: 24.6, value_broome: 30.7},

{"x":'2016-01-13T12:00:00', value_as: 24.2, value_sydney: 21, value_broome: 28.8},

{"x":'2016-01-14T12:00:00', value_as: 29.3, value_sydney: 21.7, value_broome: 28.4},

{"x":'2016-01-15T12:00:00', value_as: 28.1, value_sydney: 25.7, value_broome: 30.7},

{"x":'2016-01-16T12:00:00', value_as: 30.4, value_sydney: 25.8, value_broome: 28.6},

{"x":'2016-01-17T12:00:00', value_as: 28.9, value_sydney: 28.4, value_broome: 29.8},

{"x":'2016-01-18T12:00:00', value_as: 24.8, value_sydney: 28.2, value_broome: 29.4},

{"x":'2016-01-19T12:00:00', value_as: 31.7, value_sydney: 28.1, value_broome: 30.3},

{"x":'2016-01-20T12:00:00', value_as: 29.9, value_sydney: 28.3, value_broome: 33.6},

{"x":'2016-01-21T12:00:00', value_as: 24.9, value_sydney: 25.9, value_broome: 30.5},

{"x":'2016-01-22T12:00:00', value_as: 29.9, value_sydney: 26.3, value_broome: 30.5},

{"x":'2016-01-23T12:00:00', value_as: 23.9, value_sydney: 26.2, value_broome: 30.5}

  ]);

​

  mapping_as = table.mapAs({'x':"x", 'value':"value_as"});

  mapping_sydney = table.mapAs({'x':"x", 'value':"value_sydney"});

  mapping_broome = table.mapAs({'x':"x", 'value':"value_broome"});

​

  var chart = anychart.stock();

  chart.padding(10, 10, 10, 50);

​

  // series of the first plot

  var series_as = chart.plot(0).column(mapping_as);

    series_as.name("Alice's Springs");

    series_as.fill("#CC9933");

    series_as.stroke("#663300");

​

  // series of the second plot

  var series_sydney = chart.plot(1).column(mapping_sydney);

    series_sydney.name("Sydney");

    series_sydney.fill("#fff");

    series_sydney.hatchFill("cross");

    series_sydney.stroke("#000");

​

  // series of the third plot

  var series_broome = chart.plot(2).column(mapping_broome);

    series_broome.name("Broome");

​

  // crosshair settings

  chart.plot(0).dateTimeHighlighter("#663300", 1.5, "6 2", "round");

  chart.plot(1).dateTimeHighlighter("#999", 1.5);

  chart.plot(2).dateTimeHighlighter("#000066", 1.5, "7 4");

​

  chart.plot(0).yAxis();

  chart.title('Column in Stocks: daily temperature \nColoring');

  chart.container('container');

​

  chart.draw();

});