Topic: Simple example of update bar chart
lucio
free
asked 7 years ago
lucio
free
answered 7 years ago
Jakub Strebeyko
staff
answered 7 years ago
Hi there lucio,
Thanks for reaching out! Sure thing - here's an example from our docs, tweaked a bit.
1. Let's assume you already have the <canvas id="myChart" style="max-width: 500px;"></canvas> element in place and you initiate it.
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green"],
datasets: [{
label: 'Just some label',
data: [12, 19, 3, 5],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
2. The Update Form:
<form id="myForm">
<div class="md-form">
<input id="chico1" type="number" placeholder="Red"/>
<input id="chico2" type="number" placeholder="Blue"/>
<input id="chico3" type="number" placeholder="Yellow"/>
<input id="chico4" type="number" placeholder="Green"/>
</div>
<button>Let's GO!</button>
</form>
3. Time to tie the two together:
// Grasp the inputs
var form1 = $('#form1')
var form2 = $('#form2')
var form3 = $('#form3')
var form4 = $('#form4')
// Create a submit function and prevent it from reloading the page
$('#myForm').submit(function(e) {
e.preventDefault();
// Then input a new data object, with form values as data
myChart.data = {
labels: ["Red", "Blue", "Yellow", "Green"],
datasets: [{
label: '# of Votes',
data: [form1.val(), form2.val(), form3.val(), form4.val()],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1
}]
}
// Finally, update the chart with
myChart.update();
});
..and voilà! You can update your bar chart with new data from <input> elements. The example is rather basic and could use a little work - personally, I think I would add some intermediate variables storing the values and use them to check whether they have been update, so the user does not loose their dataset every time she/he updates the chart. Anyway, hope it helps!
With Best Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No