CODEWITHSUNDEEP
javascriptember.js
Umair Ejaz
Umair Ejaz

Reputation: 273

Chartsjs.org and Ember Js

I want to render this linechart using Ember js on my screen The line chart requires an array of labels for each of the data points. This is show on the X axis.

My controller

lineChartData = {
    labels : ["09:00am","09:15am","09:30am","09:45am","10:00am","10:15am","10:30am"],
    datasets : [
      {fillColor: "rgba(151,187,205,0.5)",strokeColor : "rgba(151,187,205,1)",pointColor : "rgba(151,187,205,1)",pointStrokeColor : "#fff",data : [0.025,0.050,0.075,0.025,0.050,0.1,0.0]}
    ]
}

Handlebar

{{view Portal.LineView datasetsBinding="lineChartData"}}

View

Portal.LineView = Ember.View.extend
  classNames: ['canvas']

  didInsertElement: ->
    @renderChart()

  renderChart: ->
    view = @
    canvas = view.$()
    if (canvas)
      Chart(canvas.getContext("2d")).Line(lineChartData)

I am getting this error

Uncaught TypeError: Object [object Object] has no method 'getContext'

Upvotes: 2

Views: 123

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

In order for chart to work the element needs to be a canvas. I think you tried to do that, but really you're creating a div with the class canvas

<div class='canvas'></div>

You'll want to use tagName

Portal.LineView = Ember.View.extend
  tagName: 'canvas'

  didInsertElement: ->
    @renderChart()

  renderChart: ->
    view = @
    canvas = view.$()
    if (canvas)
      Chart(canvas.getContext("2d")).Line(lineChartData)

Additionally I'm going to assume lineChartData is a global variable somewhere.

Upvotes: 1

Related Questions