score:0

Accepted answer

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>

score: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()">

Related Query

More Query from same tag