Связать результаты <form> с графиком на Google Charts

#javascript #html #google_api #google_chart

Есть простой график на Google Charts:




И есть форма:


    
    



Как мне передавать результаты ввода в массив с данными для отрисовки графиком? Спасибо.
    

Ответы

Ответ 1

Вот и вторая реализация на котором не добавляются строки а меняются:




	
		
		
	
	
		
		

		

			
			
			
			
		
	





Здесь использованы методы removeRow insertRows. То есть удаляем строку и в место
нее добавляем новую с новыми значениями.

Фишка кода в том что если в форме input написать существующий номер то строка обновится
а если номер больше чем есть на графике то оно добавит новую строку методом addRows.

А для пустого графика инициализируй google charts api вот так с нулевыми значениями:

data = google.visualization.arrayToDataTable([
  ['Time', 'First', 'Second'],
  ['00',         0,        0],
  ['01',         0,        0],
  ['02',         0,        0],
  ['03',         0,        0]
]);


Ответ 2

Добрый день. Вот мой пример реализации задуманного.

Объясняю что я сделал. В Google Charts Есть метод addRows. При клике на submit button
формы я вызвал метод addRows и добавил в опции графика новую строку. Но для того что
бы оно было видно в графике надо с ново инициализировать график. И что бы старые данные
не потерять я сделал переменные в функции drawChart() глобальными. и после каждого
клика на submit к старым опциям добавляется новая строка и график инициализируется с ново.