Records getting jumbled in fusion chart using Angularjs

Question

I'm working on fusion chart using Angularjs. The records are getting jumbled, and few records are not showing in my fusion chart. I'm not able to find out out what mistake i have done.

Here is my html and script

<div>
  <div fusioncharts width="700" height="450" type="msstackedcolumn2d"  dataSource="{{dataSource}}" categories="{{categories}}" chart="{{attrs}}" dataFormat= 'json' dataset="{{dataset}}" events="events">
   </div>
  </div>

script.js

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.chartoptions = {
    "dataEmptyMessage": "No data to display <br> Do these steps..."
  };
  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
  }
]
$scope.attrs = {
                "palette":"3",
                "numdivlines":'3',
                "numberprefix": "",
                "useRoundEdges":"1",
                "bgcolor": "FFFFFF,FFFFFF",
                "showalternatehgridcolor": "1",
                "showvalues": "0",
                "yaxismaxvalue": "1000",
                "showLegend":"1",
                "showborder": "0",
                "labelDisplay": "wrap", 
                "yAxisName": "Number Of Accounts",
                "maxLabelHeight":"150"
             };
console.log($scope.records);
 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 dataSet = [];
    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\tCollected   " + data[i].product;
                    item["font"] = "Arial";
                    item["fontsize"] = "15";

                    catObject.push(item);
                    products.push(data[i].product);
                    console.log(products)
                }

                 console.log(data[i].collectedAccount);
                  //console.log(data[i].bucket);
                  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))  || (i == (data.length-1)))
                {


                    //console.log(data[i].product);
                    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 = [];

                        }
                    buckets.push(data[i].bucket);
                }
                valHolder = {};
                valHolder["value"] =  data[i].allocatedAccount;
                allocatedCollection.push(valHolder);
                valHolder = {};
                valHolder["value"] =  data[i].collectedAccount;
                collectedCollection.push(valHolder);

                  // valCollection.push(valHolder);
               //console.log(collectedCollection);

            }
            catHolder["category"] =  catObject ;
            catCollection.push(catHolder);


            tempDataSet["dataset"] = allocatedDataSet;


            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;
        });

As you might have observed there are 2 types of product in the json 1.SBHL and 2.SBML, and each product as differnt bucket in the json. 1. bucket :">90" 2.bucket:"0-30" 3.bucket:"31-60" and 4. bucket:"61-90". But, while running the fusion chart i'm getting the SBML records also in SBHL, and also few buckets are missing (bucket":"61-90"). Can you find a solution for this ?

My working fiddle : http://jsfiddle.net/u7ju71oo/10/

Answer 1

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 script

-

var app = angular.module('HelloApp', ["ng-fusioncharts"]) app.controller('MyController', function($scope) {
  $scope.chartoptions = {
    "dataEmptyMessage": "No data to display <br> Do these steps..."
  };
  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
  }] $scope.attrs = {
    "palette": "3",
    "numdivlines": '3',
    "numberprefix": "",
    "useRoundEdges": "1",
    "bgcolor": "FFFFFF,FFFFFF",
    "showalternatehgridcolor": "1",
    "showvalues": "0",
    "yaxismaxvalue": "1000",
    "showLegend": "1",
    "showborder": "0",
    "labelDisplay": "wrap",
    "yAxisName": "Number Of Accounts",
    "maxLabelHeight": "150"
  };
  var products = [];
  var catObject = [];
  var catCollection = [];
  var item = {};
  var catHolder = {};
  var buckets = [];
  var dataSet = [];
  var seriesItem = {};
  var productWiseAllocationarr = [];
  var productWiseCollectionarr = [];
  var allocatedDataSet = [];
  var collectedDataSet = [];
  var tempDataSet = {};
  var allseries = {};
  var collseries = {};
  var allocatedData = [];
  var collectedData = [];
  for (var i = 0, l = data.length; i < l; i++) {
    if (products.indexOf(data[i].product) == -1) {
      item = {};
      item["label"] = "Allocated\tCollected   " + data[i].product;
      item["font"] = "Arial";
      item["fontsize"] = "15";
      catObject.push(item);
      products.push(data[i].product);
      catHolder["category"] = catObject;
    }
    if (buckets.indexOf(data[i].bucket) == -1) {
      buckets.push(data[i].bucket);
    }
  }
  for (var j = 0; j < products.length; j++) {
    for (var p = 0; p < data.length; p++) {
      if (data[p].product == products[j]) {
        var productWiseAllocation = {};
        productWiseAllocation.name = data[p].product;
        productWiseAllocation.series = data[p].bucket;
        productWiseAllocation.amount = data[p].allocatedAccount;
        productWiseAllocationarr.push(productWiseAllocation);
        var productWiseCollection = {};
        productWiseCollection.name = data[p].product;
        productWiseCollection.series = data[p].bucket;
        productWiseCollection.amount = data[p].collectedAccount;
        productWiseCollectionarr.push(productWiseCollection);
      }
    }
  }
  for (var b = 0; b < buckets.length; b++) {
    allseries = {};
    allseries.name = buckets[b] + "allocated";
    allseries.data = [];
    collseries = {};
    collseries.name = buckets[b] + "collected";
    collseries.data = [];
    for (var pr = 0; pr < productWiseAllocationarr.length; pr++) {
      if (productWiseAllocationarr[pr].series == buckets[b]) {
        allseries.data.push(productWiseAllocationarr[pr].amount);
      }
      if (productWiseCollectionarr[pr].series == buckets[b]) {
        collseries.data.push(productWiseCollectionarr[pr].amount);
      }
    }
    allocatedData.push(allseries);
    collectedData.push(collseries);
  }
  for (var w = 0; w < allocatedData.length; w++) {
    seriesItem = {};
    seriesItem["seriesname"] = allocatedData[w].name;
    seriesItem["data"] = [];
    for (var g = 0; g < allocatedData[w].data.length; g++) {
      var datavalue = {};
      datavalue.value = allocatedData[w].data[g];
      seriesItem["data"].push(datavalue);
    }
    allocatedData[w].data;
    allocatedDataSet.push(seriesItem);
  }
  for (var w = 0; w < collectedData.length; w++) {
    seriesItem = {};
    seriesItem["seriesname"] = collectedData[w].name;
    seriesItem["data"] = [];
    for (var g = 0; g < collectedData[w].data.length; g++) {
      var datavalue = {};
      datavalue.value = collectedData[w].data[g];
      seriesItem["data"].push(datavalue);
    }
    collectedDataSet.push(seriesItem);
  }
  tempDataSet["dataset"] = allocatedDataSet;
  dataSet.push(tempDataSet);
  tempDataSet = {};
  tempDataSet["dataset"] = collectedDataSet;
  dataSet.push(tempDataSet);
  catCollection.push(catHolder);
  $scope.categories = JSON.stringify(catCollection);
  $scope.dataset = JSON.stringify(dataSet);
  console.log(JSON.stringify(dataSet));
});