glavin001/ember-nvd3

A reusable chart library for d3.js as Ember components.

Ember-NVD3

A reusable chart library for D3.js as Ember components.

Live demo: http://glavin001.github.io/ember-nvd3/dist/

Alternatively take a look at Ember-C3 for your charting needs.

---

Usage

bower install --save ember-nvd3

Include D3 and NVD3 styles and scripts

<!-- NVD3 Styles -->
<link rel="stylesheet" href="bower_components/nvd3/nv.d3.min.css">
<!-- D3 Script -->
<script src="bower_components/d3/d3.min.js"></script>
<!-- NVD3 Script -->
<script src="bower_components/nvd3/nv.d3.min.js"></script>

Include Ember NVD3 styles and scripts

<!-- Ember NVD3 Script -->
<script src="bower_components/ember-nvd3/build/ember-nvd3.js"></script>

Usage Examples

• Live demos: http://glavin001.github.io/ember-nvd3/dist/
• Basic example, line-with-focus-chart component: http://jsbin.com/kawur/1/edit
• Advanced Customization by overriding customizeChart method: http://jsbin.com/rareh/4/edit

Developing

After cloning repository, install library dependencies.

npm install
bower install

Then build with grunt.

grunt serve

Contributing

See CONTRIBUTING.md for more information.
Clone this JS Bin from http://jsbin.com/kawur/1/edit and submit it with your bug reports.

Documentation

Uses grunt-jsdoc to create documentation. To create simple run

grunt docs

ember-nvd3's Issues

JSDoc for documentation generation

@Frozenfire92 could you set this up, pretty please? :)

Add more documentation in the readme

Command fails when docs/ not previously created

grunt serve

Running "open:docs" (open) task
Warning: Command failed: The file /Users/glavin/Development/ember-nvd3/docs/index.html does not exist.
 Use --force to continue.

Aborted due to warnings.

Customizable Attributes

Type of value for axis:

• Date, see http://stackoverflow.com/a/14060684/2578205

Can't generate docs using 'grunt docs'

Error msg:

Warning: Task "docs" not found. Use --force to continue.

Aborted due to warnings.

Assertion failed: You must use Ember.set() to access this property (of <Ember.NVD3.LineWithFocusChart:ember438>)

Hello everyone, i'm building my first emberjs application and i'm working with this plugin, basically this is my view

<div>
    <h4>{{name}}</h4>
    {{nvd3-line-with-focus-chart data=chartInfo}}
</div>

and this is my controller

AcornsTest.StockController = Ember.ObjectController.extend({
  init: function() {
    "use strict";
    this._super();

    this.send('generateChartInfo');
  },

  actions: {
    generateChartInfo: function() {
      "use strict";

      this.set('chartInfo', ['rommel']);
    }
  }
});

but i get this error: Assertion failed: You must use Ember.set() to access this property (of Ember.NVD3.LineWithFocusChart:ember438)

the weird thing is that if i have a view like this:

<div>
    <h4>{{name}}</h4>
    {{chartInfo}}
</div>

... it works perfectly!