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

257

11 июня 2017, 19:58

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

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Time', 'First', 'Second'],
      ['00',         4,        4],
      ['01',         7,        7],
      ['02',         6,        6],
      ['03',         5,        6]
    ]);
    var options = {
      title: 'Chart online',
      hAxis: {title: 'Время',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

И есть форма:

<form name="in">
    <input name="data">
    <input type="button" value="ok" onClick="ab();">
</form>

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

Answer 1

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

<html> 
	<head> 
		<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(drawChart); 
				let chart; 
				let data; 
				let options; 
				function drawChart() { 
					data = google.visualization.arrayToDataTable([ 
					  ['Time', 'First', 'Second'], 
					  ['00',         4,        4], 
					  ['01',         7,        7], 
					  ['02',         6,        6], 
					  ['03',         5,        6] 
					]); 
 
					options = { 
					  title: 'Chart online', 
					  hAxis: {title: 'Время',  titleTextStyle: {color: '#333'}}, 
					  vAxis: {minValue: 0} 
					}; 
 
					chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
					chart.draw(data, options); 
					 
				} 
				function drawChartRow(){ 
					let row_id = parseInt(document.querySelector("input[name='Time']").value); 
					let row_Time = document.querySelector("input[name='Time']").value; 
					let row_First = parseInt(document.querySelector("input[name='First']").value); 
					let row_Second = parseInt(document.querySelector("input[name='Second']").value); 
					 
					 
					if(row_id >= data.qg.length){ 
						data.addRows([ 
							[row_Time, row_First, row_Second] 
						]); 
					} 
					else{ 
						data.removeRow(row_id); 
						data.insertRows(row_id, [[row_Time, row_First, row_Second]]); 
					} 
					 
					chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
					chart.draw(data, options);					 
					return false; 
				} 
				 
		</script> 
	</head> 
	<body> 
		 
		<div id="chart_div"></div> 
		<form name="in"> 
			<input name="Time" value="00" /> 
			<input name="First" value="10" /> 
			<input name="Second" value="8" /> 
			<input type="button" value="ok" onclick="drawChartRow()"> 
		</form> 
	</body> 
</html>

Здесь использованы методы 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]
]);

Answer 2

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

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

<html> 
	<head> 
		<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(drawChart); 
				let chart; 
				let data; 
				let options; 
				function drawChart() { 
				data = google.visualization.arrayToDataTable([ 
				  ['Time', 'First', 'Second'], 
				  ['00',         4,        4], 
				  ['01',         7,        7], 
				  ['02',         6,        6], 
				  ['03',         5,        6] 
				]); 
 
				options = { 
				  title: 'Chart online', 
				  hAxis: {title: 'Время',  titleTextStyle: {color: '#333'}}, 
				  vAxis: {minValue: 0} 
				}; 
 
				chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
				chart.draw(data, options); 
 
				} 
				function drawChartRow(){ 
					data.addRows([ 
						[document.querySelector("input[name='Time']").value, 
						 parseInt(document.querySelector("input[name='First']").value), 
						 parseInt(document.querySelector("input[name='Second']").value) 
						] 
					]); 
					chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
					chart.draw(data, options);					 
					return false; 
				} 
		</script> 
	</head> 
	<body> 
		 
		<div id="chart_div"></div> 
		<form name="in"> 
			<input name="Time" value="04" /> 
			<input name="First" value="10" /> 
			<input name="Second" value="8" /> 
			<input type="button" value="ok" onclick="drawChartRow()"> 
		</form> 
	</body> 
</html>