Google Chart, aktualizacja wykresu z animacją

0

Witam!
Na codzień nie siedzę w javascripcie, więc jestem totalnym noobem z tego języka. Męczę się od kilku godzin i przeszukałem chyba całe internety, jednak rozwiązania nie znalazłem. Przechodząc do problemu: potrzebuję wykonać funkcję, która jest w innej funkcji.
Mam coś takiego:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Google Developers</title>
  </head>
  <body>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  
    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(drawExample3);

function drawExample3() {
  var options = {
    width: 400,
    height: 240,
    vAxis: {minValue:0, maxValue:100},
    animation: {
      duration: 400,
      easing: 'in'
    }
  };

  var chart = new google.visualization.LineChart(
      document.getElementById('example3-visualization'));
  
  var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales'],
          ['2004Z',  1000],
          ['2005Z',  1170],
          ['2006Z',  660],
          ['2007Z',  1030]
        ]);
		
  var button = document.getElementById('example3-b1');
  function drawChart() {
    // Disabling the button while the chart is drawing.
    button.disabled = true;
    google.visualization.events.addListener(chart, 'ready',
        function() {
          button.disabled = false;
        });
    chart.draw(data, options);
  }
 
  
//button.onclick = 
  this.update = function() {
	var myArray1 = ['2008Z', '2009Z', '2010Z', '2011Z'];
	var myArray2 = [1000, 2000, 3000, 4000];
	var where = 0;
    while (where < data.getNumberOfRows()) {
      where++;
    }
	for(var i = 0; i < myArray1.length; i++) {
		data.insertRows(where, [[myArray1[i].toString(), myArray2[i]]]);
		where++;
	}
	drawChart();
		
  }
  drawChart();
}

function update2() {
 ///???????????
}


</script>
<div id="example3-visualization" ></div>
<button id="example3-b1" onclick="update2()">Add and/or remove rows</button>

   
</body></html>

jak widać potrzebuję wykonać funkcję update z funkcji drawChart w funkcji update2 (domyślnie nie będzie ona podpięta pod onclicka, tylko wywołana bezpośrednio). Próbowałem różnych rzeczy jednak jedyne do czego udało mi się dojść to

(new drawExample3()).update();

jednak to za każdym razem tworzy nową instancję drawExample, przez co wykres się resetuje a tego nie chcę.

Z góry dziękuję za pomoc, prosze o jakieś wskazówki bądź tutoriala czy cokolowiek jak to zrobić :)

0

Przecież sam zlokalizowałeś błąd:

(new drawExample3()).update();

Tworzysz nowy obiekt i na nim wywołujesz update. Inna sprawa, że nawet nie masz się do tego obiektu jak dostać.

A przecież wystarczy:

//gdzieś w kodzie
plot = new drawExample3();

//i później update tego jednego, konkretnego wykresu
plot.update();

1 użytkowników online, w tym zalogowanych: 0, gości: 1