Angular Js Loading data for Chart

Question

I am trying to create charts( Using Chart.js Lib ) using ng-repeat.

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:

app.controller('jsonServerBox', function($scope, $http) {
  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"]
                },

                {
                   "series":"SeriesB",
                   "data":["90", "99", "80", "91", "76", "75", "60", "67", "59", "55"],
                   "labels":["01", "02", "03", "04", "05", "06", "07","08","09","10"]
                }

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

And I'm getting following error:

Syntax Error: Token 'module.data' is unexpected, expecting [:] at column 3 of the expression [{{module.data}}] starting at [module.data}}].

Please help.

data="{{module.data}}" this will evaluate as data="{"modules": [ {...}]}" double quote inside double quote wont work on html, you should use isolated scope inside your directive by doing scope: { data: '='} — Pankaj Parkar
– Pankaj Parkar, Commented Feb 2, 2015 at 12:54

Pankaj Parkar · Accepted Answer · 2015-02-03 18:02:29Z

2

Assign scope variables directly from View like data="module.data" labels="module.labels" series="module.series".

Don't use interpolution directive while providing data & lables to directive. Because the chart.js implementation is based on isolated scope

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>

This could help you. Thanks.

Update 1:

Actually you were missed couple of thing.

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

Changes in your code are

Wrap Series inside array changed "series": "SeriesA", to "series": ["SeriesA"]
Wrap data array inside array because it takes dimensional array as an input.

Check Working Plunkr for more info.

Thanks.

edited Feb 3, 2015 at 18:02

answered Feb 2, 2015 at 13:07

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Amit Singh Over a year ago

Hi I have updated my question with a plunker. Please have a look.

Collectives™ on Stack Overflow

Angular Js Loading data for Chart

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related