I'm facing an issue in Angularjs with fusion chart, I need to set the data as per one of the value in json data. My fusion chart is showing the jumbled data. but i need to filter it as per the requirement which as shown in the given image.
But the result i'm getting is :
Few data is coming under SBHL which is supposed to come under the SBML I need to filter the data as per the product i.e,(SBHL or SBML).
Let me show you the script and the html that I'm using for fusion chart.
index.html
<div class="container-fluid mid-content" ng-show='searchResults'>
<div class="col-lg-9 col-xs-1" id="outPopUp">
<div fusioncharts width="700" height="450" type="msstackedcolumn2d" chart="{{attrs}}"
categories="{{categories}}"
dataset="{{dataset}}">
</div>
</div>
</div>
json data
[
{
"product": "SBHL",
"bucket": ">90",
"allocatedAccount": 3005,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 3005
},
{
"product": "SBHL",
"bucket": "0-30",
"allocatedAccount": 4810,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 4810
},
{
"product": "SBHL",
"bucket": "31-60",
"allocatedAccount": 1610,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1610
},
{
"product": "SBHL",
"bucket": "61-90",
"allocatedAccount": 793,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 793
},
{
"product": "SBML",
"bucket": ">90",
"allocatedAccount": 1084,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1084
},
{
"product": "SBML",
"bucket": "0-30",
"allocatedAccount": 1583,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 1583
},
{
"product": "SBML",
"bucket": "31-60",
"allocatedAccount": 473,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 473
},
{
"product": "SBML",
"bucket": "61-90",
"allocatedAccount": 273,
"collectedAccount": 0,
"pendingCollectionOfAccounts": 273
}
]
script.js
$scope.categories = [{
"font": "Arial",
"fontsize": "15",
"fontcolor": "000000"
}];
$scope.attrs = {
"palette": "3",
"numdivlines": '3',
"numberprefix": "",
"useRoundEdges": "1",
"bgcolor": "FFFFFF,FFFFFF",
"showalternatehgridcolor": "1",
"showvalues": "0",
"yaxismaxvalue": "10000",
"showLegend": "1",
"showborder": "0",
"labelDisplay": "wrap",
"yAxisName": "Number Of Accounts",
"maxLabelHeight": "1500"
};
$scope.dataset = [];
$scope.generate = function() {
$scope.searchResults = false
$scope.showLoader = true
var data = reportService.allocationCollection($scope.query).success(function(data) {
var products = [];
var buckets = [];
var catObject = [];
var catCollection = [];
var item = {};
var seriesItem = {};
var catHolder = {};
var valHolder = {};
var valCollection = [];
var allocatedCollection = [];
var collectedCollection = [];
var allocatedDataSet = [];
var collectedDataSet = [];
var tempDataSet = {};
var maxYaxisVal = 0;
$scope.dataset2 = data
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].allocatedAccount > maxYaxisVal) {
maxYaxisVal = data[i].allocatedAccount;
}
if (data[i].collectedAccount > maxYaxisVal) {
maxYaxisVal = data[i].collectedAccount;
}
if (products.indexOf(data[i].product) == -1) {
item = {};
item["label"] = "Allocated\t\tCollected(" + data[i].product +")";
item["font"] = "Arial";
item["fontsize"] = "15";
catObject.push(item);
products.push(data[i].product);
}
if ((i == (data.length - 1))) {
valHolder = {};
valHolder["value"] = data[i].allocatedAccount;
allocatedCollection.push(valHolder);
valHolder = {};
valHolder["value"] = data[i].collectedAccount;
collectedCollection.push(valHolder);
}
if ((buckets.indexOf(data[i].bucket) == -1) || (i == (data.length - 1))) {
if (buckets.length > 0) {
seriesItem = {};
seriesItem["seriesname"] = data[i - 1].bucket + "allocated";
seriesItem["data"] = allocatedCollection;
allocatedDataSet.push(seriesItem);
seriesItem = {};
seriesItem["seriesname"] = data[i - 1].bucket + "collected";
seriesItem["data"] = collectedCollection;
collectedDataSet.push(seriesItem);
collectedCollection = [];
allocatedCollection = [];
console.log(allocatedDataSet)
}
buckets.push(data[i].bucket);
console.log(buckets.length);
}
valHolder = {};
valHolder["value"] = data[i].allocatedAccount;
allocatedCollection.push(valHolder);
valHolder = {};
valHolder["value"] = data[i].collectedAccount;
collectedCollection.push(valHolder);
}
catHolder["category"] = catObject;
catCollection.push(catHolder);
tempDataSet["dataset"] = allocatedDataSet;
dataSet = [];
dataSet.push(tempDataSet);
tempDataSet = {};
tempDataSet["dataset"] = collectedDataSet;
dataSet.push(tempDataSet);
$scope.categories = JSON.stringify(catCollection);
$scope.dataset = JSON.stringify(dataSet);
console.log(JSON.stringify(dataSet));
$scope.attrs.yaxismaxvalue = maxYaxisVal;
$scope.showLoader = false;
setTimeout(function() {
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
}, 200);
$scope.results = data;
if ($scope.results.length > 0) {
console.log($scope.query.product);
$scope.searchResults = true
//console.log("hi");
_.forEach($scope.results.entities, function(obj) {
console.log("hi");
obj.isChecked = false;
});
console.log("hi1");
$scope.view_data = $scope.results.slice($scope.skip, $scope.items + $scope.skip);
//console.log("hi2");
$scope.totalItems = $scope.results.length;
console.log(data);
$scope.results = data;
//$scope.results = $filter('orderByValue')(data);
// called on header click
} else {
$scope.searchResults = false
notificationFactory.warning('No results Found')
$scope.showLoader = false
}
}).error(function(data) {
notificationFactory.warning('Error Searching Reports')
console.log(data);
})
}
Those who answer will be appreciated.Thanks in advance.
The logic was not correctly implemented for Multi-series stacked column chart. The resultant JSON structure of the code does not comply to the supported format for the said chart hence data was getting wrongly visualized for both the categories. Please visit the fiddle link http://jsfiddle.net/Soumya_dutta/u7ju71oo/29/
Please check the modified html and script