Hi everyone I'm working on Angular fusion chart. I would like to set the data according to the product(json data) i have. But here i face an issue while using indexof method in my fusion chart.
Let me share my 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
}
]
Let me explain you clearly , i need to set the data according to the product, which you can see in the json . Each product has its own bucket, allocatedAccount and collectedAccount. But my chart is showing a jumbled data. I need to set according to the product.
Let me show you the script :
$scope.generate = function() {
$scope.searchResults = false
$scope.showLoader = true
var data = reportService.allocationCollection($scope.query).success(function(data) {
console.log(data.bucket)
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++) {
//console.log(data[i].bucket)
if (data[i].allocatedAccount > maxYaxisVal) {
maxYaxisVal = data[i].allocatedAccount;
}
if (data[i].collectedAccount > maxYaxisVal) {
maxYaxisVal = data[i].collectedAccount;
}
console.log(products);
if ((products.indexOf(data[i].product) == -1) || (i == (data.length -1))) {
item = {};
item["label"] = "Allocated\t\tCollected(" + data[i].product +")";
item["font"] = "Arial";
item["fontsize"] = "15";
catObject.push(item);
products.push(data[i].product);
}
//console.log(data[i].bucket);
if ((i == (data.length - 1))) {
valHolder = {};
valHolder["value"] = data[i].allocatedAccount;
allocatedCollection.push(valHolder);console.log()
valHolder = {};
valHolder["value"] = data[i].collectedAccount;
collectedCollection.push(valHolder);
}
if ((buckets.indexOf(data[i].bucket)== -1) || (i == (data.length -1))) {
// console.log(data[i].bucket)
if (buckets.length > 0) {
seriesItem = {};
seriesItem["seriesname"] = data[i].bucket + "allocated";
seriesItem["data"] = allocatedCollection;
allocatedDataSet.push(seriesItem);
console.log(JSON.stringify(seriesItem));
seriesItem = {};
seriesItem["seriesname"] = data[i].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;
console.log($scope.attrs.yaxismaxvalue)
$scope.showLoader = false;
setTimeout(function() {
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
}, 200);
$scope.results = data;
console.log($scope.query.product);
if ($scope.results.length > 0) {
$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);
})
}
And my Html for fusion chart:
<div fusioncharts width="700" height="450" type="msstackedcolumn2d" chart=" {{attrs}}" categories="{{categories}}" dataset="{{dataset}}">
</div>
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/Akash008/u7ju71oo/39/
Please check the modified script