ng-morris-js

Super Easy AngularJS Chart Directives for MorrisJS Charts. ng-morris-js doesn't limit chart options - use ANY or ALL of Morris Chart's native Area, Line, Bar and Donut options.

Demo Site

Our Demo Site has many useful examples and usage tips.

Features

• Super Easy to Use
• Use Any/All MorrisJS Options
• Inverse Axes Tips
• Demos & Tutorials
• Angular Best Practices

Installation

From terminal/command prompt, install the ng-morris-js package with bower or npm.

bower install ng-morris-js
// or
npm install ng-morris-js</div>

Include Script and CSS References

If npm install was used, substitute bower_components with node_modules in paths below.

<link rel="stylesheet" href="bower_components/morris.js/morris.css">
<!-- Include these .js references below angular scripts -->
<script src="bower_components/morris.js/morris.js"></script>
<script src="bower_components/ng-morris-js/dist/ng-morris-js.min.js"></script></div>

Add Module Reference

Add the ng-morris-js module reference along with others required by your app.

(function () {
  angular
    .module('app', [
      'ng-morris-js'
    ]);
}());

Usage HTML

Declare the directive and the two attributes, chart-options & chart-data.

<ng-morris-bar-chart
  chart-options="myCtrl.barChart.options"
  chart-data="homeCtrl.barChart.data">
</ng-morris-bar-chart></div>

Usage JS

Create an object in your Controller to store the chart options & data.

myCtrl.myBarChart = {
  data: [
    {year: '2015 Q1', sales: 3, net: 2, profit: 1},
    {year: '2015 Q2', sales: 2, net: 0.9, profit: 0.45},
    {year: '2015 Q3', sales: 1, net: 0.4, profit: 0.2},
    {year: '2015 Q4', sales: 2, net: 1, profit: 0.5}
  ],
  options: {
    xkey: 'year',
    ykeys: ['sales', 'net', 'profit'],
    labels: ['Sales', 'Net', 'Profit'],
    barColors: ['#777777', '#e74c3c', 'rgb(11, 98, 164)']
  }
};

Change Log

Please see CHANGELOG.

Authors

Jeff Boothe (@dezeloper)

reurgency.com

Contributing

1. Create an issue to discuss your idea
2. Fork it
3. Create your local feature branch (git checkout -b my-new-feature)
4. Commit your changes (git commit -am 'Adding my new feature')
5. Push to the branch (git push origin my-new-feature)
6. Create a new Pull Request

Credits

Inspired by Connor Leech's ngMorris

License

Please see LICENSE