1👍
You can add a global variable to instance the chart object and work on it with your javascript, here you have an example here with 3 buttons, one per type
<button onclick="draw_line()">Line</button>
<button onclick="draw_bar()">Bar</button>
<button onclick="draw_pie()">Pie</button>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var chart;
var types = ['line', 'bar', 'pie'];
var current_type = 0;
draw_initial();
function switch_type(){
if(current_type++ == types.length-1) current_type = 0;
switch(current_type){
case 0: draw_line(); break;
case 1: draw_bar(); break;
case 2: draw_pie(); break;
}
}
function draw_pie() {
if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
/* Generating random data and colors */
var data_colors = [
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
];
var data_values = [
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
];
/* Creating the new chart */
var ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: data_colors,
borderColor: data_colors,
data: data_values
}]
},
// Configuration options go here
options: {}
});
}
function draw_bar() {
if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
/* Generating random data and colors */
var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
var data_values = [
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
];
/* Creating the new chart */
var ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: data_colors,
borderColor: data_colors,
data: data_values
}]
},
// Configuration options go here
options: {}
});
}
function draw_line() {
if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
/* Generating random data and colors */
var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
var data_values = [
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
];
/* Creating the new chart */
var ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: data_colors,
borderColor: data_colors,
data: data_values
}]
},
// Configuration options go here
options: {}
});
}
function draw_initial() {
draw_line();
}
</script>You have to remember to instance the destroy function of the chart object before reload it to change its tipe.
Update
If you want to use only one button you can use the same logic, but with the type of the chart, in this example I added a global variable containing an array with all available types, but you can do it as you need.
<button onclick="switch_type()"> Change type </button>
<span style="margin-left:10px">Hi, I'm a
<span id="chart-type"></span> chart :)
</span>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var chart;
var types = ['line', 'bar', 'pie'];
var current_type = 0;
draw_initial();
function switch_type(){
if(current_type++ == types.length-1) current_type = 0;
switch(current_type){
case 0: draw_line(); break;
case 1: draw_bar(); break;
case 2: draw_pie(); break;
}
}
function draw_pie() {
if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
/* Generating random data and colors */
var data_colors = [
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
];
var data_values = [
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
];
$("#chart-type").html("pie"); // Adding some info
/* Creating the new chart */
var ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: data_colors,
borderColor: data_colors,
data: data_values
}]
},
// Configuration options go here
options: {}
});
}
function draw_bar() {
if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
/* Generating random data and colors */
var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
var data_values = [
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
];
$("#chart-type").html("bar"); // Adding some info
/* Creating the new chart */
var ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: data_colors,
borderColor: data_colors,
data: data_values
}]
},
// Configuration options go here
options: {}
});
}
function draw_line() {
if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
/* Generating random data and colors */
var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
var data_values = [
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
Math.floor(Math.random() *100),
];
$("#chart-type").html("line"); // Adding some info
/* Creating the new chart */
var ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: data_colors,
borderColor: data_colors,
data: data_values
}]
},
// Configuration options go here
options: {}
});
}
function draw_initial() {
draw_line();
}
</script>- Chartjs-How to show label for second y-axis in charts.js?
- Chartjs-Special characters in title of charts of Charts Js
Source:stackexchange.com