CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
3gwebtrain
3gwebtrain

Reputation: 15301

Trying to make a chart using `directive` not working

I am trying to create a chart using angularjs - directive but i am not getting the result. I am on learning position with angular any one can help me to sort my issue?

index page : (default)

<!doctype html>
<html lang="en" ng-app="tempApp">
<head>
    <meta charset="utf-8">
    <base href="/">
    <title>My AngularJS App</title>
</head>
<body>
    <ul class="menu">
        <li><a href="#/current">Current</a></li>
        <li><a href="#/history">History</a></li>
    </ul>
    <div ng-view></div>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/raphael/raphael.js"></script>
    <script src="bower_components/morris.js/morris.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</body>
</html>

on click history html : (partial)

Minimum temperature: <input ng-model='tempMin' type='number'/> Celcius

<chart  "historyData | minimum:tempMin"></chart> //i am trying to load chart here.

my controller for load chart :

tempApp
.directive('chart', function () {
    return {
        template: '<div id="container"></div>',

        link : function (scope, element, atrr) {
            var chart = new Morris.Line({
                        // ID of the element in which to draw the chart.
                        element: 'container',
                        // The name of the data record attribute that contains x-values.
                        xkey: 'date',
                        // A list of names of data record attributes that contain y-values.
                        ykeys: ['temp'],
                        // Labels for the ykeys -- will be displayed when you hoverover the // chart.
                        labels: ['Temperature']
                    });

            scope.$watch(function() {
                chart.setData(angular.copy(JSON.parse(attrs.data)));
            });
        }
    }
});

error i am getting :

ReferenceError: attrs is not defined

what is wrong and how to fix this?

Upvotes: 0

Views: 116

Answers (2)

rfornal
rfornal

Reputation: 5122

Change ...

link : function (scope, element, atrr) {

... to ...

link : function (scope, element, attrs) {

In the scope.$watch, you used

chart.setData(angular.copy(JSON.parse(attrs.data)));

attrs, but in the link function, you defined it as atrr; probably a simple typing error.

UPDATE from CHAT:

There is no data element on the chart tag; it should be something like:

<chart data="{{data from scope}}">

Anything beyond this is another question; we are getting into how Morris.js works which is beyond the scope of this question and should be opened as another new question.

Upvotes: 1

Andr&#233; Werlang
Andr&#233; Werlang

Reputation: 5954

There must be an data attribute on your directive:

<chart  data="historyData | minimum:tempMin"></chart> //i am trying to load chart here.

Currently, the error you get could be because data is undefined. But still it wouldn't parse because it is not JSON

Upvotes: 0

Related Questions