Ember JS: Highcharts.js into a component

Question

Updated 03/17/2016 to better reflect current best practices for EmberJS v1.13.0 and up.

---

Problem

I am rendering Highcharts into a component and i almost have it working, but the binding of a property into the component is getting lost somewhere.

This is how I call the component:

//templates/index.hbs
{{pie-chart data=pieData}}

This is what the data property looks like (currently set in a controller):

//controllers/index.js
import Ember from 'ember';

export default Ember.Controller.extend({
  init() {
    this._super(...arguments);
    this.pieData = [
      ['0 - 30', 2.5],
      ['31 - 60', 7.5],
      ['61 - 90', 12.5],
      ['91 - 120', 77.5]
    ];
   }
});

And here is the component logic:

//components/pie-chart.js
import Ember from 'ember';

export default Ember.Component.extend({

  classNames: ['chart'],

  renderChart() {
    return this.$().highcharts({
      chart: {
        height: 275
      },
      title: null,
      plotOptions: {
        pie: {
          dataLabels: {
            enabled: false
          }
        }
      },
      series: {
        type: 'pie',
        data: this.get('data')
      },
      colors: ['#777777', '#888888', '#999999', '#aaaaaa', '#bbbbbb', '#cccccc', '#dddddd', '#eeeeee'],
      credits: {
        enabled: true
      }
    });
  },

  didUpdateAttrs() {
    let chart = this.$().highcharts();
    let series = this.get('data');
    chart.series[0].setData(series);
  },

  didInsertElement() {
    this._super(...arguments);
    this.renderChart();
  },

  willDestroyElement() {
    this.$().highcharts().destroy();
  }
});

i got the idea from this blog and i am trying to adapt it to make more charts.

the chart renders onto the screen, but it is blank... there are no errors to report... the only thing i can think is the data property is not being handled correctly in order to plot the graph?

I am not sure if this is my wrong use of Ember code, or wrong use of Highcharts code?

Answer 1

Solution

the series property inside the highchart was supposed to be an array of objects.. but I mistakenly defined just an object:

the fix:

series: [{
    type: 'pie',
    data: this.get('data')
}],

---

So, that is how you render a Highchart.js into a component :)