I am trying to create a graph using Morris JS by creating an Angular JS directive. My directive code is:
Reporting.directive('morrisLine', function(){
return {
restrict: 'EA',
template: '<div id="call-chart">test2</div>',
scope: {
data: '=',
xkey: '=',
ykey: '='
},
link: function(scope,element,attrs){
new Morris.Line({
element: element,
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
xkey: '{year}',
ykey: ['value'],
});
}
};
});
The error code that I get when checking the console in my browser is:
TypeError: Cannot call method 'match' of undefined
at Object.t.parseDate (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:9523)
at n.eval (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3297)
at n.t.Grid.r.setData (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3888)
at n.r (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:1680)
at new n (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:11953)
at link (http://127.0.0.1:8000/static/js/app/directives/directives.js:94:20)
at j (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:43:157)
at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:463)
at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480)
at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480) <div morris-line="" class="ng-isolate-scope ng-scope" style="position: relative;">
The part that the error code points to is the part that says
element : element,
I am new to Angular JS and directives, and I hope someone can point me in the right direction on how to deal with this problem. Thanks!