title: Chart.js - Toggle visibility of charts
body: <p>I really need help for this thing i'm working on.
  Basically I have 4 charts rendered by chartjs. I've made 4 buttons, that simply show or hide the desired DIV. I'm pretty sure it's works on jQuery side, but I'm not so skilled to understand what's happening here on Chart.js side. </p>
  
  <p>This is a demo <a href="https://jsfiddle.net/ttum6ppu/" rel="nofollow">https://jsfiddle.net/ttum6ppu/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
     &lt;p&gt;
      &lt;button type="button" class="btn btn-default btn-xs stanza_button" id="stanza" style="display:none;"&gt;Per stanza&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary btn-xs stanza_selected" id="stanza"&gt;&lt;i class="fa fa-eye"&gt;&lt;/i&gt; Per stanza&lt;/button&gt;
      &lt;button type="button" class="btn btn-default btn-xs settimanale_button" id="settimanale"&gt;Andamento settimanale&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary btn-xs settimanale_selected" id="settimanale" style="display:none;"&gt;&lt;i class="fa fa-eye"&gt;&lt;/i&gt; Andamento settimanale&lt;/button&gt;
      &lt;button type="button" class="btn btn-default btn-xs mensile_button" id="mensile"&gt;Andamento mensile&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary btn-xs mensile_selected" id="mensile" style="display:none;"&gt;&lt;i class="fa fa-eye"&gt;&lt;/i&gt; Andamento mensile&lt;/button&gt;
      &lt;button type="button" class="btn btn-default btn-xs annuo_button" id="annuo"&gt;Andamento annuo&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary btn-xs annuo_selected" id="annuo" style="display:none;"&gt;&lt;i class="fa fa-eye"&gt;&lt;/i&gt; Andamento annuo&lt;/button&gt;
     &lt;/p&gt; 
  
  &lt;script&gt;
  $(document).ready(function(){
      $("#stanza").click(function(){
          $(".stanza, .stanza_selected, .settimanale_button, .mensile_button, .annuo_button").show();
      $(".settimanale, .mensile, .annuo, .stanza_button, .settimanale_selected, .mensile_selected, .annuo_selected").hide();
      });
  
     $("#settimanale").click(function(){
          $(".settimanale, .settimanale_selected, .stanza_button, .mensile_button, .annuo_button").show();
      $(".stanza, .mensile, .annuo, .stanza_selected, .settimanale_button, .mensile_selected, .annuo_selected").hide();
      });
  
     $("#mensile").click(function(){
          $(".mensile, .mensile_selected, .stanza_button, .settimanale_button, .annuo_button").show();
      $(".stanza, .settimanale, .annuo, .stanza_selected, .settimanale_selected, .mensile_button, .annuo_selected").hide();
      });
  
     $("#annuo").click(function(){
          $(".annuo, .annuo_selected, .stanza_button, .settimanale_button, .mensile_button").show();
      $(".stanza, .settimanale, .mensile, .stanza_selected, .settimanale_selected, .mensile_selected, .annuo_button").hide();  
      });
  });
  &lt;/script&gt;
    &lt;div style="width: 50%"&gt;
       &lt;div style="height:70%;" class="stanza"&gt;
      &lt;canvas id="canvas" height="100px;"&gt;&lt;/canvas&gt;
     &lt;/div&gt;
     &lt;div style="height:70%; display: none;" class="settimanale"&gt;
      &lt;canvas id="canvas2" height="100px;"&gt;&lt;/canvas&gt;
     &lt;/div&gt;
     &lt;div style="height:70%; display: none;" class="mensile"&gt;
      &lt;canvas id="canvas3" height="100px;"&gt;&lt;/canvas&gt;
     &lt;/div&gt;
     &lt;div style="height:70%; display: none;" class="annuo"&gt;
      &lt;canvas id="canvas4" height="100px;"&gt;&lt;/canvas&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  
   &lt;script&gt;
   var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  
   var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
     },
     {
      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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
     }
    ]
  
   }
   window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
     responsive : true
    });
  
  var ctx = document.getElementById("canvas2").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
     responsive : true
    });
    var ctx = document.getElementById("canvas3").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
     responsive : true
    });
  
  var ctx = document.getElementById("canvas4").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
     responsive : true
    });
   }
  
   &lt;/script&gt;
   &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first chart is displayed correctly, but when You press the second button it shows nothing.
  Thank You in advance</p>