unable to see output as expected when using forEach logic in js file

Question

My requirement is to display the bar graph.I'm using angularjs and Zingchart to display the bar. Belowis the javascript code which gets invoked to generate the bar. I'm facing issue in iterating the logic(angular.forEach..) in the below mentioned code.

My alert statement inside angular.forEach is displayed 3 times, but on the UI i can only see one bar displayed(i.e.,bar with final data is displayed, first two bars are not getting displayed). I know i'm missing something which draws each and every bar instead of the last displayed bar. Do i need to use any push statemetns. Please advice.

app.controller('myController',['$rootScope','$scope','$uibModal','myService',function($rootScope,$scope,$uibModal,myService)  {
    $scope.chart = {};
    $scope.chart.options = {
        "isStacked": "true",
         axisFontSize : 10,
        chartArea: {left:0, width: 400,}
    };
    $scope.chart.type = "bar";
    $scope.chart.cssStyle = "height:300px; width:650px;";

    $scope.loadChartData = function(){
        alert("Chart data loading");
        MyService.getChartData($rootScope.myID).then(
            function(response) {
                $scope.myJson=response;
                  angular.forEach($scope.myJson,function(value,key){
                      alert("in foreach"); //displaying 3 times
                      sub =  value.myResults.sub;
                      spread = value.myResults.spread;
                      active  =value.myResults.active;
                    $scope.data = {};
                    $scope.data.valuesOne = [sub];
                    $scope.data.valuesTwo = [spread];
                    $scope.data.valuesThree = [active];
                    $scope.aValues = [$scope.data.valuesOne,$scope.data.valuesTwo,$scope.data.valuesThree];
                    $scope.myJson = {
                        type : "bar",
                        "background-color": "white",
                        "plot": {
                            "stacked": true,
                            "stack-type":"normal"
                        },
                        title:{
                            backgroundColor : "transparent",
                            fontColor :"black",
                            text : "Hello world"
                        },
                        backgroundColor : "white",
                        series : [
                            {
                                backgroundColor : '#00baf2'
                            },
                            {
                                backgroundColor : '#4caf4f'
                            }
                        ]
                    };
             });
            },
            function(errResponse){
                console.error('Error while data retrieval');
            });
    }

}]);

html code:

  <div ng-controller="myController">
            <div zingchart id="chart-2" zc-json="myJson" zc-width="700px" zc-height="568px" zc-values="aValues"></div>
  </div>

With the above mentioned js code i should see 3 bars on the UI, i could able to view only one bar.Please suggest.

Answer 1

You need to call foreach on the data, rather than the whole chart. Like this:

...
function(response) {

    $scope.myJson = {
        type: "bar",
        "background-color": "white",
        "plot": {
            "stacked": true,
            "stack-type": "normal"
        },
        title: {
            backgroundColor: "transparent",
            fontColor: "black",
            text: "Hello world"
        },
        backgroundColor: "white",
        series: [
            {
                backgroundColor: '#00baf2'
            },
            {
                backgroundColor: '#4caf4f'
            }
        ]
    };

    var subs = []
    var spreads = []
    var actives = []

    $scope.aValues = [subs, spreads, actives]

    angular.forEach(response, function (value, key) {
        subs.push(value.myResults.sub)
        spreads.push(value.myResults.spreads)
        actives.push(value.myResults.active)
    });
},
function(errResponse) {
    console.error('Error while data retrieval');
});
...

Answer 2

There are a few things I have to add:

1. Zingchart Syntax

Did you already have a look at these docs: https://www.zingchart.com/docs/chart-types/bar-charts/

It says, the bar chart needs a series object as input with the following structure:

  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    {"values":[5,30,21,18,59,50,28,33]},
    {"values":[30,5,18,21,33,41,29,15]}
   ]

Is it a must to feed the chart from HTML? Otherwise you just could copy the JS example from the link above. IMHO this is much cleaner, as you do not push that much data in the scope.

2. Overwriting myJson

Something looks a little wrong with the forEach loop.

There is a angular.forEach that should iterate over the array $scope.myJson. But inside the iterator function, $scope.myJson gets overwrtitten by an object.

3. ng-repeat

ng-repeat will only repeat the chart tag. You need to pass several series to the directive.