<div id="container"></div>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
anychart.onDocumentReady(function () {
// create data set
var data = anychart.data.set([
[2012, 707, 157, 286],
[2013, 669, 145, 367],
[2014, 632, 389, 404],
[2015, 655, 193, 389],
[2016, 574, 164, 354],
[2017, 931, 114, 411]
]);
// create cartesian chart
var chart = anychart.cartesian();
// set chart title
chart.title('Orders to Vacate: 2012-2017');
// create first series with mapped data and set it's name
chart
.column(
data.mapAs({
x: 0,
value: 1
})
)
.name('Fire Damage');
// create second series with mapped data and set it's name
value: 2
.name('Habitability');
// create third series with mapped data and set it's name
value: 3
.name('Illegal Occupancy');
// enable categorizedBySeries mode
chart.categorizedBySeries(true);
// enable chart legend
chart.legend(true);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});