如何使用谷歌折线图绘制实时数据

swamykumar

我正在使用每隔一秒的$ interval调用来绘制来自服务器的数据的google折线图。现在我想将新数据添加到已绘制的图表中，而不是再次重绘该图表。

$interval(dataCall, 1000);

		function dataCall() {
		
			$http.get({x: "XYZ"}, successCallback, failureCallback);
			
			function successCallback(response) {
				$scope.res = response; 		//response is like {"a":1, "b":2}
				drawBasic();				
			}
			
			function failureCallback(response) {
				console.log(response);
			}
		}

		google.charts.load('current', {packages: ['corechart', 'line']});
		
		var dataArray = [];
		
		function drawBasic() {
				
			var data = new google.visualization.DataTable();
			data.addColumn('date', 'Timestamp');
			data.addColumn('number', 'value');
			
			var options = {
					hAxis: {
						title: 'Timestamp'
					},
					vAxis: {
						title: 'something'
					},
					tooltip: { isHtml: true },
					legend: {
						position: 'none'
					}
				};
				
			dataArray.push([new Date(), $scope.res]);
				
			data.addRows(dataArray);
			
			var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
			chart.draw(data, options);
					     
		}

白帽

必须重绘图表以显示新数据，
但是您可以避免每次都重新创建图表和选项

建议类似以下设置...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Timestamp');
  data.addColumn('number', 'a');
  data.addColumn('number', 'b');

  var options = {
    hAxis: {
      title: 'Timestamp'
    },
    vAxis: {
      title: 'something'
    },
    tooltip: { isHtml: true },
    legend: {
      position: 'none'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  dataCall();
  $interval(dataCall, 1000);

  function dataCall() {
    $http.get({x: "XYZ"}, successCallback, failureCallback);

    function successCallback(response) {
      data.addRow([new Date(), response.a, response.b]);
      chart.draw(data, options);
    }

    function failureCallback(response) {
      console.log(response);
    }
  }
});