html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

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

  table.addData([

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{x:'2016-01-23', 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");

​

  chart.plot(0).yAxis();

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

​

  chart.container('container');

  chart.draw();

});