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.

@RemoL. - myResults are coming back from my service call MyService.getChartData(..) .I check the results, everything is fine, only issue is while looping something i'm missing to draw the graph which is the reason its only drawing last data bar on the UI instead of showing 3 bars.Please see my edited code above, included the html code. — DIM
– DIM, Commented Mar 29, 2017 at 15:55
@dan - Can you help how to proceed to push each of myJson value. Thanks. — DIM
– DIM, Commented Mar 29, 2017 at 15:56
@DIM, did you already solve it? Otherwise, can you post the value of response, which you store in $scope.myJson? — Konstantin A. Magg
– Konstantin A. Magg, Commented Mar 29, 2017 at 19:04

dan · Accepted Answer · 2017-03-30 15:48:14Z

3

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

edited Mar 30, 2017 at 15:48

answered Mar 29, 2017 at 16:07

dan

1,9941 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

dan Over a year ago

@DIM hmmm, can you confirm $scope.charts is outside angular.forEach(...). If so, what happens if you console.log($scope.charts) after $scope.charts.push(chart)? It should log 3 times, each time with an extra chart.

DIM Over a year ago

thanks for the support, but the output is same as before. I can only see one bar instead of 3 bars on UI. Any suggestions would be helpful.thanks.

dan Over a year ago

@DIM also, can you try changing id="chart-2" to id="chart-{{$index}}"

DIM Over a year ago

I can see 3 different bars graphs separately on the UI , and each one however displaying only one bar information instead of 3bars. Console.log statement is as follows: After push :[object Object] chartController.js:78 After push :[object Object],[object Object] chartController.js:78 After push :[object Object],[object Object],[object Object]

dan Over a year ago

@DIM we got there in the end! :)

|

Konstantin A. Magg · Accepted Answer · 2017-03-29 19:16:46Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

11 Comments

1. Zingchart Syntax

2. Overwriting myJson

3. ng-repeat

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1. Zingchart Syntax

2. Overwriting myJson

3. ng-repeat

Comments

Your Answer

Sign up or log in

Post as a guest

Related