Topic: Simple example of update bar chart
lucio free asked 6 years ago
lucio free answered 6 years ago
Jakub Strebeyko staff answered 6 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