Create multiple chart by Chart.js

I am trying to create 2 Bars chart by Chart.js and can trigger between two of them but when I ran code only first chart can show normally but second one is not, its keep showing "document.getElementById(...).getContext is not a function"

what is wrong in my code or how to create 2 or more charts on one page.

this is my code

 <input type='button' id='a' value='hide/show'>
 <input type='button' id='b' value='hide/show'>

<section class="panel" id="a-chart">
  <div class="panel-body">

<div style="width: 100%">
    <canvas id="canvas1" height="100" width="300"></canvas> 
    </div>    
           </div>
               </section>

<section class="panel" id="b-chart">
                       <div class="panel-body">
                            <div style="width: 100%">
      <canvas id="canvas2" height="100" width="300"></canvas>
    </div>
  </div>  
 </section>

JS

var barChartData = {

        labels : [ month[0],month[1],month[2],month[3],month[4] ] ,

    datasets : [
      {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",

        data : [total[0],total[1],total[2],total[3],total[4]]
      },
      {
        fillColor : "rgba(38,143,59,0.2)",
        strokeColor : "rgba(38,143,59,0.5)",
        highlightFill : "rgba(38,143,59,0.75)",
        highlightStroke : "rgba(38,143,59,1)",

        data : [signup[0],signup[1],signup[2],signup[3],signup[4]]
      },
      {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,0.8)",
        highlightFill : "rgba(151,187,205,0.75)",
        highlightStroke : "rgba(151,187,205,1)",

        data : [nonsignup[0],nonsignup[1],nonsignup[2],nonsignup[3],nonsignup[4]]
      },
      {
        fillColor : "rgba(250,109,80,0.2)",
        strokeColor : "rgba(250,109,80,0.5)",
        highlightFill : "rgba(250,109,80,0.75)",
        highlightStroke : "rgba(250,109,80,1)",

        data : [terminate[0 ],terminate[1 ],terminate[2 ],terminate[3 ],terminate[4 ]]
      }
    ]
  }
 var barChartlimit  = {

        labels : [ "100 Users","200 Users" ] ,

    datasets : [
      {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",


        data : [limit100,limit200]
      }

    ]

  }


  function abar(){ 
   var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
      responsive : true
    });
  }

  function bbar(){
    var ctx = document.getElementById("storage").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartLimit, {
      responsive : true
    });
  }

function BarLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
BarLoadEvent(abar);
BarLoadEvent(bbar);


     $("#a-chart").show();
     $("#b-chart").hide();

   $("#a").click(function() {
     $("#a-chart").show();
     $("#b-chart").hide();
   });

   $("#b").click(function() {
     $("#a-chart").hide();
     $("#b-chart").show();
   });