谷歌更新动态图表使用PHP和JavaScript
-
19-09-2019 - |
题
我有一个谷歌图(使用谷歌可视化API ,不上的页面加载填充谷歌图表API )。在这之后,用户可以选择从多个下拉菜单中的选项。我希望用户能够根据自己的选择来更新谷歌图。
我已经创建PHP代码经由MySQL来获取最新的数据 - 用户选择的各种选项之后
<强>问题强>:我应该需要更换电流图?或者我应该创建一个JavaScript函数来更新图形?
下面是我的谷歌图的JavaScript代码:
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Cluster');
data.addColumn('number', 'Loans');
data.addColumn('number', 'Lines');
/* create for loops to add as many columns as necessary */
var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;
data.addRows(len);
for(i=0; i<len; i++) {
var lines = (encoded_line_volume[i])/100000;
var loans = (encoded_loan_volume[i])/100000;
data.setValue(i, 0, ' '+encoded_cluster_name[i]+' '); /* x-axis */
data.setValue(i, 1, loans); /* Y-axis category #1*/
data.setValue(i, 2, lines); /* Y-axis category #2*/
}
/*********************************end of loops*****/
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, {
width: 600,
height: 300,
is3D: true,
title: 'Prospect Population',
legend: 'right'
});
}
解决方案
我只更新而不是替换图表的数据。并请求图表得到重绘。
可以修改操场例如来测试此出。结果 它看起来像这样:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
// Create and draw the visualization.
var v=new google.visualization.ColumnChart(
document.getElementById('visualization')
);
v.draw(data, null);
// Pretend update data triggered and processed
data.setCell(2, 1, 860);
v.draw(data, null);
}
不隶属于 StackOverflow