Updating data from charts already instantiated

Question

I’m using the Google Charts and I am needing to update a map that is already instantiated as a valid map, I actually want to update the data from inside a map.

Today I’m doing it this way:

var dataGraf = google.visualization.arrayToDataTable(parsVal);
var chart = document.getElementById('curve_chart');
chart.draw(dataGraf);

But nothing happens. To instantiate my map I used the following commands:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable(parsVal);
  var options = {
    title: 'Membros x Visitantes',
    curveType: 'function',
    legend: { position: 'bottom' }
  };
 var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 chart.draw(data, options);
}

How can I update, just when I click on the button. Remembering that mine dataGraf has my array with the new values.

I made a Jsfiddle to exemplify my problem.

Answer 1

When you click the button you redesign the entire chart.

$("#botaoAtualizar").click(function(){
    redrawChart();
});

Use the function you have already done passing the new data.

function drawChart() {

  var dataGraf = google.visualization.arrayToDataTable(parsVal);

  var options = {
    title: 'Membros x Visitantes',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

 var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 chart.draw(dataGraf, options);

}