Ember.js: rendering google chart in template (AKA target DOM element only when present)

Question

I am trying to integrate a working google chart example into my ember.js app. The problem is that I'm not sure where to put the `drawChart()` function so that it is only run when it's target DOM element is on the page. - Ember app example: http://jsbin.com/oqeSabI/4/edit - Working google chart example: http://jsfiddle.net/doub1ejack/h7mSQ/96/ I'm thinking that the proper location for the load function is in a view (I don't see any reason to put it in a model/controller/route). But I need to be sure that `drawChart()` is not called until after the template has finished rendering and the `

` element exists. Apparently `View.init()` is too early. Where should I call my build function? Does it even belong in a view (maybe I should use a control or handlebars helper?) ``` App.DashboardView = Ember.View.extend({ name: "", init: function(){ // this breaks the app... //google.load("visualization", "1", {packages:["corechart"]}); //google.setOnLoadCallback(drawBarGraph); this.se…

Accepted Answer

It is best to place logic related to ui and layout in `views`. So for this task i would suggest to use a `view` or a `component` . As you already realised the `didInsertElement` event is the appropriate place to call this kind of logic, since you need to make sure that the view has been inserted into the DOM and all required elements such as `div#chart` are available.

I'm providing a solution which is a bit rough but gives a starting point.

The idea is to create, a reusable view `GoogleChartView` with an associated template `google-chart` that can be included in any other view. I assumed that dashboard view will eventually include other charts as well that will be using its model to present data in charts, tables etc. This chart related view has been included with the assistance of view helper `{{view "googleChart"}}` . Another important point is that `google.load` needs to be called in head.

http://jsbin.com/oCIcexOB/1/edit

JS

```
App = Ember.Application.create();

/******** VIEWS ********/
App.DashboardView = Ember.View.extend({
  name: "",
  init: function(){
    //google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawBarGraph);
    this.set('name', 'ted');
    return this._super();
  }
});

App.GoogleChartView = Ember.View.extend({
  templateName:"google-chart",
  drawChart:function(){

drawChart();

}.on("didInsertElement")
});

/******** ROUTES ********/
App.Router.map(function() {
  this.resource('items');
  this.resource('dashboard');
});
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('items');
  }
});
App.ItemsRoute = Ember.Route.extend({
  model: function() {
    var a = Em.A();
    a.pushObject( App.Item.create({title: 'A', cost: '100', options: buildMockOptions('A')}));
    a.pushObject( App.Item.create({title: 'B', cost: '200', options: buildMockOptions('B')}));
    a.pushObject( App.Item.create({title: 'C', cost: '300', options: buildMockOptions('C')}));
    return a;
  }
});

buildMockOptions = function(someVar){
  var arr = [];
  for(var i = 0;i<3;i++){
    var opt = App.Option.create({someOption: 'Option for ' + someVar + ': ' + i});
    opt.cost = 5;
    arr.pushObject(opt);
  }
  return arr;
};

/******** MODELS ********/
App.Item = Ember.Object.extend({
  title: '',
  cost: '',
  quantity: '',
  options: null,

totalOptionsCost: function(){
    var j = this.get('options').reduce(
      function(prevValue, currentValue, index, array){ 
        return prevValue + parseInt(currentValue.get('cost'), 10); }, 0);
    return j;
  }.property('options.@each.cost')
});

App.Option = Ember.Object.extend({
  someOption: '',
  cost: ''
});

/******** CONTROLLERS ********/
App.ItemsController = Ember.ArrayController.extend({
  len: function(){
    return this.get('length');
  }.property('length'),

totalCost: function() {
    return this.reduce( function(prevCost, cost){
      return parseInt(cost.get('cost'),10) + prevCost;
    }, 0);
  }.property('@each.cost'),

totalOptions: function(){
    var opts = this.mapBy('options');
    return [].concat.apply([], opts).length;
  }.property(),

totalOptionCost: function(){
    var sum = this.reduce(function(prev, curr){ 
      return prev + curr.get('totalOptionsCost');},0);
    return sum;
  }.property('@each.totalOptionsCost')
});

App.DashboardController = Em.Controller.extend({
  needs: ['items'],
  itemsLength: Ember.computed.alias('controllers.items.len'),
  itemsTotalCost: Ember.computed.alias('controllers.items.totalCost'),
  optionsTotal: Ember.computed.alias('controllers.items.totalOptions'),
  optionsCost: Ember.computed.alias('controllers.items.totalOptionCost')
});

// GOOGLE CHART FUNCTION
function drawChart() {

// Create and populate the data table.
  var options = {
      title:"Yearly Coffee Consumption",
      width:600, 
      height:400,
      animation: {duration: 1000, easing: 'out'},
      vAxis: {title: "Cups", minValue:0, maxValue:500},
      hAxis: {title: "Year"}
  };

var data = new google.visualization.DataTable();    
  data.addColumn('string', 'N');
  data.addColumn('number', 'Value');
  data.addRow(['2003', 0]);
  data.addRow(['2004', 0]);
  data.addRow(['2005', 0]);

// Create and draw the visualization.
  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data, options);
  data.setValue(0, 1, 400);
  data.setValue(1, 1, 300);
  data.setValue(2, 1, 400);
  chart.draw(data, options);

var button = document.getElementById('b1');
    button.onclick = function() {

if (data.getNumberOfRows() > 5) {
        data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
      }
      // Generating a random x, y pair and inserting it so rows are sorted.
      var x = Math.floor(Math.random() * 10000);
      var y = Math.floor(Math.random() * 1000);
      var row = 0;
      while (row < data.getNumberOfRows() && parseInt(data.getValue(row, 0),10) < x) {
        row++…

Ember.js: rendering google chart in template (AKA target DOM element only when present)

Solution

Problem

Related problems