Ember-charts resulting in Could not find property 'pie-chart' on object

Question

I'm using Ember.js and my bower.json file is:

{
  "name": "stats-front-end",
  "dependencies": {
    "handlebars": "~1.3.0",
    "jquery": "~2.1.1",
    "ember": "1.8.1",
    "ember-data": "1.0.0-beta.12",
    "ember-resolver": "~0.1.10",
    "loader.js": "stefanpenner/loader.js#1.0.1",
    "ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "rwjblue/ember-cli-test-loader#0.0.4",
    "ember-load-initializers": "stefanpenner/ember-load-initializers#0.0.2",
    "ember-qunit": "0.1.8",
    "ember-qunit-notifications": "0.0.4",
    "qunit": "~1.15.0",
    "ember-charts": "~0.3.0"
  }
}

I'm trying to display a pie chart in my app/templates/languages/index.hbs view as shown here. The app/templates/languages/index.hbs is currently this:

<ul>
  {{#each}}
    <li> {{name}} {{occurences}}</li>
  {{else}}
    <li>No language found.</li>
  {{/each}}
</ul>

<div class="chart-container">
  {{pie-chart data=content}}
</div>

If I remove the chart my #each block renders fine (pulling from ember-data). However, when I use the controller found at: app/controllers/languages/index.js to decorate the view, I get nothing, even without pulling from ember data.

app/controllers/languages/index.js

import Ember from 'ember';

export default Ember.ArrayController.extend({
  content: [
    {
      "label": "Equity",
      "value": 12935781.176999997
    },
    {
      "label": "Real Assets",
      "value": 10475849.276172025
    },
    {
      "label": "Fixed Income",
      "value": 8231078.16438347
    },
    {
      "label": "Cash & Cash Equivalent",
      "value": 5403418.115000006
    },
    {
      "label": "Hedge Fund",
      "value": 1621341.246006786
    },
    {
      "label": "Private Equity",
      "value": 1574677.59
    }
    ]
});

Console reads:

Uncaught Error: <stats-front-end@view:default::ember426> Handlebars error: Could not find property 'pie-chart' on object <stats-front-end@controller:languages/index::ember418>.

I've tried variations of syntax to get the pie-chart into the view without success. Ideally I'd like to build the pie-chart from what I have in ember-data but at this point just getting something to render would be nice.

The project is open source and found here

score 1 · Answer 1 · answered Dec 06 '14 at 21:29

The content of a controller is usually set in a route, in the #setupController method. Since you're returning this.store.find('language') from your languages/index route, Ember is going to try to set that on the content of your controller. So don't set it manually.

So first, try to set that array on some other property, say data, and see if you can even display it in your template (without using the {{pie-chart}} component). Then try to get it to work with the component.

One last point, you should start using the explicit form of the each helper (e.g. each x in controller instead of each), as the implicit one will be deprecated soon.

Finally try to use components instead of controllers. For example, you could make your ArrayController a LanguageListComponent (and then you could move the pie chart data there).

Thanks Sam! If I remove `{{pie-chart data=content}}` the page loads fine with the data stored in my model (not the manual one I referenced above). Ramy's answer has helped a bit but still stuck on the same issue, even though I see `Ember.Handlebars.helper('pie-chart', Ember.Charts.PieComponent);` in my `vendor.js` — Anthony, Dec 06 '14 at 21:55

score 1 · Accepted Answer · answered Dec 06 '14 at 21:42

Right now Ember-Charts code is not included in your built dist\assets\vendor.js file. Installing bower packages in ember-cli doesn't mean that the installed package's code will be included in your app. Ember simply could not find the pie-chart component so it's looking up pie-chart as a property on your controller. You should add to your Brocfile.js the following code:

app.import('bower_components/ember-charts/dist/ember-charts.js');
app.import('bower_components/ember-charts/dist/ember-charts.css');

Ember-charts resulting in Could not find property 'pie-chart' on object

2 Answers2