Integrating Highcharts into an Ember Application

Question

I found this recent article which details how to integrate Highcharts using default Ember. I understand there is another SO post about this same topic, however that is done in default Ember as well.

I am trying to modify this code to work in Ember App Kit and/or Ember-CLI

Based on the post I have used the following code:

A Reusable View

HighChartsView = Ember.View.extend
  tagName: 'div'
  classNames: [ 'highcharts' ]
  chartConfig = {}

  setConfig: (type)->
    config = {
      chart:
        type: type
      title:
        text: @title || 'Highcharts'
      xAxis:
        categories: @dataset.categories || []
      yAxis:
        title:
          text: @yAxisTitle
      series: @series()
    }
    # Merge highcharts config if it is present
    Ember.merge(config, @highChartConfig) if @highChartConfig
    @set('chartConfig', config)

  series: ->
    @dataset.data

  prepareConfig: ->
    # if custom config is present then directly set it to chartConfig
    if @customHighChartConfig
      @set('chartConfig', @customHighChartConfig)
    else
      type = @type || 'line'
      @setConfig(type)

  didInsertElement: ->
    @prepareConfig()
    @renderHighchart()

  renderHighchart: ->
    @$().highcharts(@chartConfig)

`export default HighChartsView`

(this file is saved in my root views folder as high-charts-view.coffee)

The Chart Data:

dashData = Ember.ArrayController.extend
  dataset: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    data: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
  }

`export default dashData`

(this code is an index controller, but I do not know where to place... but I assume it needs to be relative to the actual page the chart will appear on? i.e controller/accounts/index)

The example also defines a separate Index Controller

App.IndexController = Ember.ArrayController.extend
    highChartConfig: {
      yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
      },
      tooltip: {
          valueSuffix: '°C'
        }
      }

(which I also assume should be part of the same index controller shown above?)

To call the view in a template:

{{ view HighChartsView dataset=dataset highChartConfig=highChartConfig title="Sample Analytics" type="line" }}

(This is placed in my /accounts/index template)

I have run into Assertion Failed errors because it cannot find the path HighChartsView.

I am guessing that I have not named my files correctly, or not placed the files in the correct directory and the resolver is not compiling them correctly? There is also the problem that the blog post I found is also not very verbose, so there is not much context to try to figure out what should/should not be happening...

Answer 1

k, so in this case, I'd say there are a few things you might want to change, first, views need to be in quotes,

  {{view 'HighCharts' dataset=dataset highChartConfig=highChartConfig title="Sample Analytics" type="line" }}

second both of those data sets look like they should be part of the model being returned from the route.

Let's just do it all from the application route/controller/template for starters.

Routes, they are used for managing state, http://emberjs.com/guides/routing/

var ApplicationRoute = Ember.Route.extend({
  model: function(){
    return {
      dataSet: this.dataSet,
      highChartConfig: this.highChartConfig
    }
  },
  dataSet:{},
  highChartConfig:{}
});

Controllers, used for decorating the model and/or logic for the template. Ember Handlebars not automatically putting model in scope

var ApplicationController = Ember.ObjectController.extend();