Morris chart not working (AngularJS)

Question

I am working on a little interface built around AngularJS. I have an index.html file and I built a route to a base.html file (using ng-view) which contains several elements including a Morris chart. However, when I launch my index.html everything from the base.html is displayed... except the chart. And I have the following error in the console : Error: Graph container element not found

So I tried, to move my scripts morris.js (and 2 others) to the base.html juste after my element (that will contain the chart) is created but it doesn't work neither.

index.html

<!DOCTYPE html>
<div ng-app="pistApp" ng-controller="MainController" id="wrapper">
    <div ng-view id="page-wrapper">

    </div>
</div>

base.html

<!-- other elements who works but I simplify -->
<div id="morris-area-chart"></div>

inspect element and look network tab. is morris.js getting 200 OK response or not? — hakki, Feb 20 '15 at 13:57
Yes, when morris.js is in index.html but when i put it in base.html, i don't see it in the network tab — rocketer, Feb 20 '15 at 14:02

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

Problem solved thanks to Angularjs does not load scripts within ng-view

I just had to include jQuery before angular script.

edited May 23 '17 at 11:50

Community

1
1

answered Feb 20 '15 at 17:11

rocketer

1,051
3
13
40

score 0 · Answer 2 · answered Jan 20 '16 at 05:07

Include in your project-'raphael/raphael.js','morris.js/morris.js', 'angular-morris-chart/src/angular-morris-chart.js','morris.js/morris.css'

These files will be in your bower_components after the bower install angular-morris-chart.

Try examples in https://angular-morris-chart.stpa.co/

it will work.

Morris chart not working (AngularJS)

2 Answers2