javascript - Not able to render two canvas elements on same page - Backbone -

<div class="col-lg-5" id="id-sales-pie">   </div>  <div class="col-lg-7" id="id-sales-line">    </div> 

mainchartview

    this.line.setelement(this.$('#id-sales-line')).delegateevents().render();     this.pie.setelement(this.$('#id-sales-pie')).delegateevents().render(); 

i have main chart view contains 2 id's , main chart view contains 2 views piechartview , linechartview.

both views have templates when rendering 1 renders , other canvas element gives error

uncaught typeerror: cannot read property 'getcontext' of null 

complete code:

 var $ = require('jquery'),     handlebars = require('handlebars'),     backbone = require('backbone'),     maincharttemplate = require('../../templates/dashboard/chartscontainer.html'),     piechartview = require('../../views/dashboard/piechartview'),     linechartview = require('../../views/dashboard/linechartview'),     moment = require('moment');  var mainchartview = backbone.view.extend({     el: $('#id-charts-stats'),      initialize: function() {          this.pie = new piechartview();         this.line = new linechartview();        },     events: {         'click a.agraphtype': "changegraphdata"     },      changegraphdata: function(ev) {          ev.preventdefault();          var type = $(ev.target).attr('type');          sessionstorage.setitem("typeofgraph", type);           this.render();      },      render: function() {         this.$el.html(maincharttemplate);          if (this.line) {             this.line.remove();         }          this.line.setelement(this.$('#id-sales-line')).delegateevents().render();          if (this.pie) {             this.pie.remove();         }          this.pie.setelement(this.$('#id-sales-pie')).delegateevents().render();        } });  module.exports = mainchartview; 

it doesn't render second setelement code me when page renders first time.