Simple example of update bar chart

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