Chartjs-Hide/show chart.js charts

by

0👍

✅

I’ve modified your code as follows:

  • Set the canvas with the inline style display:none;.
  • Create individual functions for each chart.
  • Set only 1 .ready function – which will call the created functions mentioned in the previous step.
  • Create a function for handle the selected value in the select HTML element; with the selected value, set which chart to show.

This is the modified code:

// Load charts: 
$(document).ready(function() {
  load_radar_chart();
  load_bar_chart();
  load_line_chart();
});

/*
   Load line-type chart: 
*/
function load_line_chart() {
  var ctx = document.getElementById('turn_over_line');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
      datasets: [{
        data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, {
        data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, {
        data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, {
        data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, {
        data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }]
    },
    options: {
      animation: {
        duration: 700,
        easing: 'easeInOutSine',
      },
      title: {
        display: true,
        text: 'Turn over per site'
      },
      responsive: false,
    }
  });
}

/*
   Load radar-type chart: 
*/
function load_radar_chart() {
  var ctx = document.getElementById('turn_over_radar');
  var myChart = new Chart(ctx, {
    "type": "radar",
    "data": {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [{
        label: "1950",
        fill: true,
        backgroundColor: "rgba(179,181,198,0.2)",
        borderColor: "rgba(179,181,198,1)",
        pointBorderColor: "#fff",
        pointBackgroundColor: "rgba(179,181,198,1)",
        data: [8.77, 55.61, 21.69, 6.62, 6.82]
      }, {
        label: "2050",
        fill: true,
        backgroundColor: "rgba(255,99,132,0.2)",
        borderColor: "rgba(255,99,132,1)",
        pointBorderColor: "#fff",
        pointBackgroundColor: "rgba(255,99,132,1)",
        pointBorderColor: "#fff",
        data: [25.48, 54.16, 7.61, 8.06, 4.45]
      }]
    },
    "options": {
      title: {
        display: true,
        text: 'Turn over per site'
      },
      responsive: false,

    }
  });
}


/*
   Load bar-type chart: 
*/
function load_bar_chart() {
  var ctx = document.getElementById('turn_over_bar');
  var myChart = new Chart(ctx, {
    "type": "bar",
    "data": {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
        data: [2478, 5267, 734, 784, 433]
      }]
    },
    "options": {
      title: {
        display: true,
        text: 'Turn over per site'
      },
      responsive: false,
      "scales": {
        "yAxes": [{
          "id": "stacked_testY",
          "type": 'linear',
          "position": "left",
          "stacked": true,
          "display": true
        }],
        "xAxes": [{
          "position": "bottom",
          "stacked": true,
          "display": true
        }]
      }
    }
  });
}

/*
   Hide or shown chart - see value of "selected_chart_id" parameter: 
*/
function updateChartType(selected_chart_id) {

  var all_types = ["turn_over_line", "turn_over_bar", "turn_over_radar"];

  for (var i = 0; i < all_types.length; i++) {
    if (all_types[i] == selected_chart_id) {
      document.getElementById(all_types[i]).style.display = "";
    } else {
      document.getElementById(all_types[i]).style.display = "none";
    }
  }

}
.cann {
  border: 3px solid darkgrey;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  width: 650px;
  height: 250px;
  margin-left: 3em;
}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div>
  <select class="chart_types" name="chartType" id="chartType" onchange="updateChartType(this.value)">
    <option value="turn_over_line">Line</option>
    <option value="turn_over_bar">Bar</option>
    <option value="turn_over_radar">Radar</option>
  </select>
  <br><br>
  <canvas id="turn_over_line" class="cann"></canvas>
  <canvas id="turn_over_bar" class="cann" style="display:none;">  </canvas>
  <canvas id="turn_over_radar" class="cann" style="display:none;">  </canvas>
</div>

0👍

For those wanting to do the same thing, of course, it wouldn’t work because I was confused between CSS’s style = none and HTML’s "hidden" attribute.
To accomplish what I am looking for I created this javascript function :

   function hide_charts() {
  document.getElementById("turn_over_bar").style.display="none";
    document.getElementById("turn_over_radar").style.display="none";

}

And called it on the load of my page by adding to my HTML template :

<body onload="hide_charts()">

Leave a comment