Data is not getting rendered, Angular JS

Question

I am trying to create multiple charts using angular-chart.js and ng-repeat.

The problem is although the chart is being created but don't know why the data is not being rendered.

HTML:

<div class="graph-display" ng-controller="jsonServerBox">
<div class="bar-chart-box" ng-repeat="module in ocw.modules"> 
<canvas class="chart chart-bar" data="module.data" labels="module.labels" series="module.series"></canvas>
</div>
</div>

JS:

(function () {
  var app = angular.module("Bar_Chart", ["chart.js", "ui.bootstrap"]);
    app.controller('jsonServerBox', function($scope) {
    var json = {"modules":[
                {
                   "series":"SeriesA",
                   "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
                   "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"],
                   "colours":[{ // default
                                  "fillColor" : "rgba(224, 108, 112, 1)",
                                  "strokeColor" : "rgba(207,100,103,1)",
                                  "pointColor" : "rgba(220,220,220,1)",
                                  "pointStrokeColor" : "#fff",
                                  "pointHighlightFill": "#fff",
                                  "pointHighlightStroke": "rgba(151,187,205,0.8)"
                                }]
                },

                {
                   "series":"SeriesB",
                   "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
                   "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"],
                   "colours":[{ // default
                                  "fillColor" : "rgba(224, 108, 112, 1)",
                                  "strokeColor" : "rgba(207,100,103,1)",
                                  "pointColor" : "rgba(220,220,220,1)",
                                  "pointStrokeColor" : "#fff",
                                  "pointHighlightFill": "#fff",
                                  "pointHighlightStroke": "rgba(151,187,205,0.8)"
                                }]
                }

        ]}; 
    $scope.ocw = json;
    });
})();

Any help is much appreciated.

dfsq · Accepted Answer · 2015-02-03 12:34:37Z

3

Looks like the data structure is the issue here. data parameter is supposed to be array of series arrays:

"data": [["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"]],

Then it should render charts.

Demo: http://plnkr.co/edit/epgPgdM9I66eoP70n7Iy?p=preview

answered Feb 3, 2015 at 12:34

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

dfsq Over a year ago

No problem, it's just fresh eye.

Rinrub · Accepted Answer · 2015-02-03 12:32:17Z

Looks like there is some issues with the json itself. ran it through a json validator and got som errors.

Fixed them and this is the output:

{"modules":[
            {
               "series":"SeriesA",
               "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
               "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"],
               "colours":[{
                              "fillColor" : "rgba(224, 108, 112, 1)",
                              "strokeColor" : "rgba(207,100,103,1)",
                              "pointColor" : "rgba(220,220,220,1)",
                              "pointStrokeColor" : "#fff",
                              "pointHighlightFill": "#fff",
                              "pointHighlightStroke": "rgba(151,187,205,0.8)"
                            }]
            },

            {
               "series":"SeriesB",
               "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
               "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"],
               "colours":[{
                              "fillColor" : "rgba(224, 108, 112, 1)",
                              "strokeColor" : "rgba(207,100,103,1)",
                              "pointColor" : "rgba(220,220,220,1)",
                              "pointStrokeColor" : "#fff",
                              "pointHighlightFill": "#fff",
                              "pointHighlightStroke": "rgba(151,187,205,0.8)"
                            }]
            }

    ]}

Collectives™ on Stack Overflow

Data is not getting rendered, Angular JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related