谷歌图表实时更新ajax
Posted
技术标签:
【中文标题】谷歌图表实时更新ajax【英文标题】：Google charts live update ajax 【发布时间】：2013-01-30 06:23:25 【问题描述】：有谁知道是否可以在 Google 图表中添加实时更新功能？我不想使用按钮来更新数据；相反，我希望图表在数据库数据更改时自动更改。这是我用来显示折线图的代码，它工作正常。
index.php
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', 'packages':['corechart']);
google.setOnLoadCallback(drawChart);
function drawChart()
var jsonData = $.ajax(
url: "getData.php",
dataType:"json",
async: false
).responseText;
var data = new google.visualization.DataTable(jsonData);
var options =
width: '100%',
height: 500,
legend: 'none',
colors: ['orange','red','green'],
vAxis: textStyle: color: 'white',
hAxis: textStyle: color: 'white'
;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
getData.php 我以以下格式从我的数据库中获取数据：
$db_conn_pyr = connect();
function getOrderrader($datum)
// gets order rows ...
$pastDate = date('Ymd', strtotime("-1 month"));
$sqlTrans = "SELECT DISTINCT D3611 FROM PUPROTRA WHERE D3625 = 'U' AND D3601 = 'O' AND
D3611 >= $pastDate ORDER BY D3611 ASC";
$resultTrans = odbc_exec($db_conn_pyr, $sqlTrans)or die(odbc_errormsg());
$data = array(
'cols' => array(
array('id' => '', 'label' => 'datum', 'type' => 'string'),
array('id' => '', 'label' => 'Target', 'type' => 'number'),
array('id' => '', 'label' => 'Target', 'type' => 'number'),
array('id' => '', 'label' => 'Orderrader', 'type' => 'number')
)
);
while($row = odbc_fetch_array($resultTrans))
$datum = utf8_encode($row['D3611']);
$ordernr = getOrderrader($datum);
$data['rows'][] = array(
'c' => array(
array('v' => $datum),
array('v' => 240),
array('v' => 160),
array('v' => $ordernr)
)
);
$string = json_encode($data);
echo $string;
非常感谢 琳达
【问题讨论】：
【参考方案1】：使用 javascript 计时器在 xxx 秒后调用您的图表创建功能，它应该适合您。
【讨论】：
以上是关于谷歌图表实时更新ajax的主要内容，如果未能解决你的问题，请参考以下文章