javascript - Meteor with Chart js cannot read property ‘getContext’ of null only AFTER new document in collection? -

i have 2 selects set session vars , after 2nd selected, chart loaded. works fine until add new document collection serves key “index” of sorts in compiling of dataset. new document has 1 common field document generates dataset won’t render – field “season”.

the charts not display collection directly, see there quite bit of data massaging going on (probably withstand improvements, that’s not issue).

my issue after inserting new document common “season” field, other docs used in dataset same “season” field throw getcontext null error. other charts different “season” fields display fine… until insert document “season” field. if remove newly/recently inserted document, chart renders again fine.

apologies data overload included below - dumbfounded here.

fyi, thisweek.js:72 “redrawchart” function below:

var ctx  = document.getelementbyid("twchart").getcontext("2d"); 

error:

thisweek.js:72 uncaught typeerror: cannot read property 'getcontext' of null @ redrawchart (thisweek.js:72) @ localcollection.cursor.change #slateselect (thisweek.js:213) @ blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3775 @ function.template._withtemplateinstancefunc (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3744) @ blaze.view.<anonymous> (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3774) @ blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2617 @ object.blaze._withcurrentview (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2271) @ blaze._domrange.<anonymous> (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2616) @ htmlselectelement.<anonymous> (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:863) @ htmldivelement.dispatch (jquery.js?hash=0c5fac3e4b18ec685e561deac3634fb49bc807e5:4722) 

html:

<form class="form-inline">         <div class="form-group">             <label for="slatessnselect">season/tournament</label>             <select name="sltssn" id="slatessnselect" class="form-control">                 {{#each slateseason in slateseasons}}                     <option value="{{slateseason.season}}">{{slateseason.season}}</option>                  {{/each}}             </select>         </div>          <div class="form-group">             <label for="slateselect">slate</label>             <select name="sltchrtslct" id="slateselect" class="form-control">                 <option>select slate...</option>                 {{#each slate in slates}}                     <option value="{{slate.slatename}}">{{slate.slatename}}</option>                  {{/each}}             </select>         </div>     </form> 

template events:

'change #slatessnselect': function(){     session.set('slateseason', $('#slatessnselect').val() ); },  'change #slateselect': function(){     $('#twchart').remove();     $('.chrtdiv').append('<canvas id="twchart" class="img-responsive"></canvas>');      session.set('selectedslate', $('#slateselect').val() );      var lg = meteor.user().profile.lgname     var ssn = session.get('slateseason');     var slt = session.get('selectedslate');      redrawchart(); } 

template helpers:

slateseasons: function(){     var ssnsqry = seasons.find({},{sort: {createdat:-1} }).fetch();     if(ssnsqry.length > 0){         session.set('slateseason', ssnsqry[0].season);         return ssnsqry;     }  },  slates: function(){     var sltssn = session.get('slateseason');     var sltsqry = slates.find({season: sltssn},{sort: {createdat:-1} }).fetch();     if(sltsqry.length > 0){         session.set('selectedslate', sltsqry[0].slatename);         return sltsqry;     } } 

chart function:

function redrawchart(){ $('#twchart').remove(); $('.chrtdiv').append('<canvas id="twchart" class="img-responsive"></canvas>');  var lg = meteor.user().profile.lgname; var lgtype = leagues.find({lgname: lg},{fields: {scoretype:1} }).fetch(); var players = _.uniq(results.find({"league": lg},                                  {sort: {"user":1}},                                  {fields: {"user":1, _id:0}}).fetch().map(function(x) { return x.user;}), true ); 

var ssn = session.get('slateseason'); var slt = session.get('selectedslate');

var dataset = results.find({"season":ssn, "slate":slt, "league": lg}, {fields: {"user":1, "pointswon":1 }}, {sort:{"user":1}}).fetch();

var plyrsarr = _(dataset).groupby('user');  var ptsarr = _(plyrsarr).map(function(g, key){                     return { user: key,                      pointswon: _(g).reduce(function(m,x) { return m + x.pointswon;}, 0) };                     });   var labels = [], data=[];      ptsarr.foreach(function(item) {         labels.push(item.user);         data.push(parsefloat(item.pointswon));     });   var totdata = {     labels: labels,     datasets: [{         fillcolor: "#e16b6b",                         data: data     }] };  var options = {     responsive: true,     scalebeginatzero:true,     maintainaspectratio: false,     barbeginatorigin:true };  var ctx  = document.getelementbyid("twchart").getcontext("2d");     ctx.canvas.width = 300;     ctx.canvas.height = 400;  new chart(ctx).bar(totdata, options); 

}

after many hours of banging head against brick wall, realized helper function in html creating chart div problem.

right below html shown above had:

{{#if chartexists}}         <div class="chrtdiv">             <canvas id="twchart" class="img-responsive"></canvas>         </div>         {{else}}             <div>                 <h2> <img src="dunno.png" class="img-responsive" alt=""> no data...</h2>             </div>         {{/if}} 

the “chartexists” helper checking see if there results documents available via find() filters “season” , “slate”. tried cute there showing gif in event there no data chart. not sure why exactly… tried setting session var resulting dataset used populate chart , have helper check that, didn’t work either.

i put canvas in “else” section of html failed. somehow helper won’t let canvas render…

wiki