How to display AmCharts' funnel chart bars in sorted order? - angularjs

Question

I'm using AmCharts and angularjs to build a defect priority funnel chart. Everything is working fine, but it's displaying values in out of order like High, Low, No Status, Medium along with my count data.
HTML:
<div id="funnelChart" class="admin-chart" ng-controller="DefectCtrl" ng-init="defectPrioirtyFunnelChart()"></div>
Controller:
$scope.defectPrioirtyFunnelChart= function(data){
$scope.data =data;
$scope.graphData=[];
for( var i=0;i<$scope.data.length;i++){
if($scope.data[i].priority == ""){
$scope.data[i].priority = "No Priority";
}
$scope.graphData.push({priority:$scope.data[i].priority,
count:$scope.data[i].priorityCnt })
}
var layoutColors = baConfig.colors;
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart("funnelChart", {
type: 'funnel',
theme: 'blur',
colors: ["#209e91", "#FF6600", "#FFFF4D", "#e85656", "#FF9E01", "#0D8ECF"],
labelTickColor: layoutColors.borderDark,
dataProvider:$scope.graphData ,
titleField: 'priority',
marginRight: 160,
marginLeft: 15,
labelPosition: 'right',
funnelAlpha: 0.9,
valueField: 'count',
startX: 0,
alpha: 0.8,
neckWidth: '0%',
startAlpha: 0,
outlineThickness: 1,
neckHeight: '0%',
balloonText: '[[priority]]:<b>[[count]]</b>',
export: {
enabled: true
},
creditsPosition: 'bottom-left',
pathToImages: layoutPaths
});
chart.dataProvider = $scope.graphData;
chart.validateData();
}
I want to display the bars in my defect priority chart in this order (High, Medium, Low, No Status). How can I do this?

Answer 1

AmCharts displays the data in the order that it is received, with the first data element being at the base of the funnel and the last element being at the tip. You'll need to sort your data manually in the order you want, i.e. first element = High, second = Med, etc.
If you also want the "No Status" slice to show, you need to set showZeroSlices to true.
Here's a simplified version of your code to illustrate this:
var chart = AmCharts.makeChart("funnelChart", {
type: 'funnel',
theme: 'blur',
colors: ["#209e91", "#FF6600", "#FFFF4D", "#e85656", "#FF9E01", "#0D8ECF"],
dataProvider:[{
"count": 60,
"priority": "High"
},{
"count": 50,
"priority": "Med"
},{
"count": 30,
"priority": "Low"
}, {
"count": "",
"priority": "No status"
}],
showZeroSlices: true,
titleField: 'priority',
marginRight: 160,
marginLeft: 15,
labelPosition: 'right',
funnelAlpha: 0.9,
valueField: 'count',
startX: 0,
alpha: 0.8,
neckWidth: '0%',
startAlpha: 0,
outlineThickness: 1,
neckHeight: '0%',
balloonText: '[[priority]]:<b>[[count]]</b>',
export: {
enabled: true
},
creditsPosition: 'bottom-left'
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/funnel.js"></script>
<div id="funnelChart" style="width: 100%; height: 300px;"></div>