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()">
Source: stackoverflow.com
Related Query
- How to show Nested charts Radar chart within Doughnut Chart?
- Chart.js - Multiple bar Charts - Only Show Last Chart
- chart.js charts wouldn't show or hide with Angular directives ng-show and ng-hide
- how to not repeat code while creating multiple charts in chart js
- how to only show zero grid axes at center and hide all other gridlines in chart js
- Chart.js Show labels on Pie chart
- Chart Js Change Label orientation on x-Axis for Line Charts
- chart.js: Show labels outside pie chart
- Chart.js how to show cursor pointer for labels & legends in line chart
- How do you hide the title of a chart tooltip?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- Chart JS Show HTML in Tooltip
- chart js tooltip how to control the data that show
- Chart.js bar chart : Grid color and hide label
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- How to show percentage (%) in chart js
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Chart JS show multiple data points for the same label
- Show data dynamically in line chart - ChartJS
- Chartjs - show elements in all datasets on hover using bar chart
- How to hide section in a Chart.js Pie Chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- Chart Js Show the old data on mouse hover
- In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
- ChartJS: Show all labels of a mixed chart in the tooltip
- Show all values in Chart js y axis
More Query from same tag
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- How to customize the tooltip of a Chart.js Line Chart?
- Why tooltip position absolute does not apply using js?
- Re-write chart.js functionality in ng2-charts
- How to set 2 y-axis title (and/or label) on chartjs?
- How to always show line chart tooltip in ionic-angular.?
- How to Render Chart Datasets in Vue?
- Chart js error in angular: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. Fix?
- How to reduce the gap between bars on bar chart
- Want only line not area under it in chart js
- Chart.js V3 Fill Below 0
- Chart.js - Multiple generateLegend() functions on same page
- Specific grid line in X axis in ChartJs
- How to show different product name for every bar in chart js
- Chart.js remove border from x/y Axis
- "Type of import (".../charjs/types/indexsm" has no construct signatures issue on Vue3 and ChartJS?
- chartjs - how do I add border radius on bottom corners
- Responsive legend font size in react-chartjs 2
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- React-Redux and Chart.js props Do not rerender
- How to change the z order of a chartjs polar chart
- Calculate value in tooltip in ChartJS
- Chart.js 2.2.x - How to access the pixel coordinate of a point in my dataset
- How to access or get value of specific graph on chart plot by click event?
- chart.js dynamically set values of suggestedMin and suggestedMax based on values of array
- what is the correct way to destructure a nested json object with fetch?
- real time scrolling based chart with chart.js
- chart.js Line chart with different background colors for each section
- How do I implement the 'autoskip' feature in chartjs?
- Chart.js dataset controller 'null' when chart drawn