CODEWITHSUNDEEP
angularjsmorris.js
rocketer
rocketer

Reputation: 1071

Morris chart not working (AngularJS)

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>

Upvotes: 0

Views: 2333

Answers (2)

Akshaya Moorthy
Akshaya Moorthy

Reputation: 307

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.

Upvotes: 0

rocketer
rocketer

Reputation: 1071

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

I just had to include jQuery before angular script.

Upvotes: 1

Related Questions