How to create grouped bars in amCharts?
You will need to do several things to reach the goal:
1) Group data points in the same category into the same data point, so that your end data becomes something like this:
[ {
date: '10-dec-2015',
USA: 4025,
India: 1182,
Spain: 1000
}, {
date: '11-dec-2015',
USA: 1322,
India: 1122,
Spain: 1114
}, {
date: '12-dec-2015',
India: 984
}, {
date: '13-dec-2015',
Poland: 711
} ]
2) Create a graph for each country:
"graphs": [ {
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "USA",
"type": "column",
"valueField": "USA"
}, {
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "India",
"type": "column",
"valueField": "India"
}, {
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Spain",
"type": "column",
"valueField": "Spain"
}, {
"balloonText": "[[title]]:[[value]]",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Poland",
"type": "column",
"valueField": "Poland"
} ]
3) Enable stacking on value axis, using stackType
:
"valueAxes": [ {
"id": "ValueAxis-1",
"position": "left",
"axisAlpha": 0,
"stackType": "regular"
} ]
For the data, since you already have a function that processes your source data, you can modify it create grouped data points, as described above.
function generateChartData() {
var chartData = [],
categories = {};
for ( var i = 0; i < $scope.datalength; i++ ) {
var newdate = $scope.data[ i ].Date;
var visits = $scope.data[ i ].visits;
var country = $scope.data[ i ].country;
// add new data point
if ( categories[ newdate ] === undefined ) {
categories[ newdate ] = {
date: newdate
};
chartData.push( categories[ newdate ] );
}
// add value to existing data point
categories[ newdate ][ country ] = visits;
}
return chartData;
}