Integrating Highcharts.js into Ember

highcharts-component.js

App.HighChartsComponent = Ember.Component.extend(App.HighchartsThemeMixin, {
  classNames:   [ 'highcharts-wrapper' ],
  content:      undefined,
  chartOptions: undefined,
  chart:        null,
  
  buildOptions: Em.computed('chartOptions', 'content.@each.isLoaded', function() {
    var chartContent, chartOptions, defaults;
    chartOptions = this.getWithDefault('chartOptions', {});
    chartContent = this.get('content.length') ? this.get('content') : [
      {
        id: 'noData',
        data: 0,
        color: '#aaaaaa'
      }
    ];
    defaults = {
      series: chartContent
    };
    return Em.merge(defaults, chartOptions);
  }),
  
  _renderChart: (function() {
    this.drawLater();
    this.buildTheme();
  }).on('didInsertElement'),
  
  contentDidChange: Em.observer('content.@each.isLoaded', function() {
    var chart;
    if (!(this.get('content') && this.get('chart'))) {
      return;
    }
    chart = this.get('chart');
    return this.get('content').forEach(function(series, idx) {
      var _ref;
      if ((_ref = chart.get('noData')) != null) {
        _ref.remove();
      }
      if (chart.series[idx]) {
        return chart.series[idx].setData(series.data);
      } else {
        return chart.addSeries(series);
      }
    });
  }),
  
  drawLater: function() {
    Ember.run.scheduleOnce('afterRender', this, 'draw');
  },
  
  draw: function() {
    var options;
    options = this.get('buildOptions');
    this.set('chart', this.$().highcharts(options).highcharts());
  },
  
  _destroyChart: (function() {
    this._super();
    this.get('chart').destroy();
  }).on('willDestroyElement')
});

highcharts-theme-mixin.js

App.HighchartsThemeMixin = Ember.Mixin.create({
  buildTheme: function() {
    Highcharts.theme = {
      colors: [
        '#258be2', 
        '#666666', 
        '#f45b5b', 
        '#8085e9', 
        '#8d4654', 
        '#7798bf', 
        '#aaeeee', 
        '#ff0066', 
        '#eeaaee', 
        '#55bf3b', 
        '#df5353', 
        '#7798bf', 
        '#aaeeee'
      ],
      chart: {
        backgroundColor: null,
        style: {
          fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
        }
      },
      title: {
        style: {
          color: 'black',
          fontSize: '18px',
          fontWeight: 'bold'
        }
      },
      subtitle: {
        style: {
          color: 'black'
        }
      },
      tooltip: {
        borderWidth: 0,
        style: {
          fontSize: '16px'
        }
      },
      legend: {
        itemStyle: {
          fontWeight: 'bold',
          fontSize: '14px'
        }
      },
      xAxis: {
        labels: {
          style: {
            color: '#6e6e70',
            fontSize: '16px'
          }
        },
        title: {
          style: {
            fontSize: '14px'
          }
        }
      },
      yAxis: {
        labels: {
          style: {
            color: '#6e6e70',
            fontSize: '16px'
          }
        },
        title: {
          style: {
            fontSize: '14px'
          }
        }
      },
      plotOptions: {
        series: {
          shadow: true
        },
        candlestick: {
          lineColor: '#404048'
        }
      },
      navigator: {
        xAxis: {
          gridLineColor: '#D0D0D8'
        }
      },
      rangeSelector: {
        buttonTheme: {
          fill: 'white',
          stroke: '#C0C0C8',
          'stroke-width': 1,
          states: {
            select: {
              fill: '#D0D0D8'
            }
          }
        }
      },
      scrollbar: {
        trackBorderColor: '#C0C0C8'
      },
      background2: '#E0E0E8',
      global: {
        timezoneOffset: new Date().getTimezoneOffset()
      }
    };
    return Highcharts.setOptions(Highcharts.theme);
  }
});

Hi,

Can you please give any sample demo through jsbin?

^Seconded

Lauren, what is the best way to format Ember-Data into an array of objects that fit Highcharts requirements?

Working jsbin: http://jsbin.com/fibajezuma/1/

For some reason I wasn't getting notifications from Github about these comments. Sorry!

@20v100 There is no real "easy" way, you'll have to massage your data into a POJO that Highcharts expects, probably using #map or #mapBy