标签: google-visualization
使用PHP和JavaScript动态更新Google Chart
我有一个谷歌图表(使用谷歌可视化API,而不是谷歌图表API)填充页面加载.之后,用户可以从多个下拉菜单中选择选项.我希望用户能够根据他们的选择更新Google Chart.
我已经创建了PHP代码来通过MySQL获取新数据 - 在用户选择各种选项之后.
问题:我是否需要更换当前图表？或者我应该创建一个JavaScript函数来更新图表？
这是我的Google Chart 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, …推荐指数
解决办法
查看次数
Google Visualization API - 德国的Geomap地区
在发布新的geomap软件包版本后,我似乎在使用geomap进行德国地区时遇到了问题.在升级之前,一切似乎都很好.问题是,如果我试图展示DE-BE(柏林)和DE-BB(勃兰登堡)地区 - 柏林地区没有显示.如果我删除DE-BB区域,或者用其他任何德国区域替换它,例如,DE-BY(拜仁)它可以正常工作!
请在下面找到测试代码:
google.load('visualization', '1.1', {packages: ['geomap']});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addRows(2);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
data.setValue(0, 0, 'DE-BE');
data.setValue(0, 1, 200);
data.setValue(1, 0, 'DE-BB');
data.setValue(1, 1, 300);
var geochart = new google.visualization.GeoMap(document.getElementById('visualization'));
var options = {};
options['dataMode'] = 'regions';
options['region'] = 'DE';
geochart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
你能否向我提供可能出错的任何支持或想法？是否可以包含旧版本的geomap软件包进行测试？
推荐指数
解决办法
查看次数
用JSON绘制谷歌图表
如果它是一个单独的JSON文件,我如何检索和使用谷歌图表的数据集？我试过jQuery getJSON但是无法让它工作..谷歌Viz应该使用JSON绘制条形图是否有原生的谷歌API方式？或者我可以找到使用jQuery的方法以及如何使用？谢谢
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Products');
data.addColumn('number', 'Automated');
data.addRows([
['Product 1', 85],
['Product 2', 75],
['Product 3', 90],
['Product 4', 40], …推荐指数
解决办法
查看次数
无法从打印的html文件中查看gvisMotionChart
当我将动态图表的代码保存到html文件并尝试打开它时,我得到页脚,"初始化"进度条闪烁一瞬间,但没有其他任何显示.
所以
M1 <- gvisMotionChart(Fruits, idvar="Fruit", timevar="Year")
plot(M1)
效果很好,但是
print(M1, file='d:/delete/fruit.html')
然后在浏览器中打开生成的文件出现空白(页脚除外).有没有办法可以保存这个可视化并循环播放？
推荐指数
解决办法
查看次数
在Google图表中格式化图例和轴
我是谷歌图表的新手,我无法通过图表周围的文本获得良好的结果.
这是我的图表的样子:
正如您所看到的,它确实同时削减了水平轴和图例,因此最终结果并不像它可能的那样好.有办法解决这个问题吗？我一直在阅读官方文档和这里的一些帖子,但我还没有找到这样做的方法.
回顾:我们如何修改图例或轴文本以使它们完全可见？
推荐指数
解决办法
查看次数
电子邮件图表 - 酒吧,区域和饼图
我想在我的电子邮件中显示图表 - Bar,Area,Pie Charts.我尝试了几个基于CSS的图表与内联样式,但它仍然没有显示.这是在电子邮件中显示图表的最佳方式.
图像是唯一的选择吗？
推荐指数
解决办法
查看次数
如何在网页中定位Google图表？
我正在使用Google图表.定位让我望而却步.我没有在文档中找到该部分.我只想在div中创建一个Google图表,左上角位于div中的(x,y).有关控制尺寸的额外帮助.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
如果我使用像firebug这样的工具查看'运行时'中的html,我看到:
rect x="161" y="96" width="579" height="309"
但我没有选择任何这些价值观.
推荐指数
解决办法
查看次数
在Google Visualization API中使用按聚合分组保留格式
使用Google的Visualization API,我使用google.visualization.data.group根据我的原始数据创建子表.我的原始数据使用{v:"US",f:"United States"}的技巧来显示除值之外的其他内容,但是当我使用聚合函数时,格式化被消除,只留下"US"部分.
有没有办法保留原始格式,或者将其添加回使用组聚合创建的DataTables的简单方法？
样本数据:
[2010, {v:"MA", f:"Morocco"}, {v:"002", f:"Africa"}, {v:"002", f:"Northern Africa"}, 21.12724],
[2010, {v:"AW", f:"Aruba"}, {v:"019", f:"Americas "}, {v:"019", f:"Caribbean"}, 0.98],
[2010, {v:"AF", f:"Afghanistan"}, {v:"142", f:"Asia"}, {v:"142", f:"Southern Asia"}, 0.9861],
[2010, {v:"AO", f:"Angola"}, {v:"002", f:"Africa"}, {v:"002", f:"Middle Africa"}, 5.11774],
聚合功能:
var countryData = google.visualization.data.group(
rawData,
[0, 1],
[{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);
编辑:
进一步考虑,可能无法对格式进行分组,因为无法保证每个值的格式都是一致的.考虑到这一点,编写一个将格式添加到我的数据的每一列的函数可能更好(或唯一可能).所以问题就变成了,"我该怎么做？"
我真的不想单独创建原始数据作为未格式化的值,然后使用其他表来查找每个值的格式.这将需要额外的2个表(一个用于28行的区域,一个用于超过240行的国家),然后创建两个函数来查看分组表中的每个值(将有30年以上的数据,意味着成千上万行)添加值.
这似乎是一个非常复杂的解决方案.
有没有办法用修饰函数做到这一点？我可以编写一个函数来将表中的每个值作为{v:"US",f:"United States"}格式化对象返回吗？或者是否有一种简单的方法来编写列格式化程序,它将在我的原始表中查找适当的值并采用该格式？这对我(谁必须写它)和用户(谁必须加载它)都会造成最少的麻烦？
编辑2:
看起来我应该能够使用以下内容为新表创建格式化程序:
function (dt, row) {
return {
v: (dt.getValue(row, 1) / 1000000),
f: (dt.getValue(row, 1) / 1000000) …javascript google-visualization google-data-api google-datatable
推荐指数
解决办法
查看次数
当Google Chart包含在基于jQuery的选项卡中时,它会加载极小的内容
我正在使用谷歌的折线图几乎完全像演示 - 只有数据已经改变 - 在这个jQuery选项卡插件内部没有修改.可能有50%的时间,图表将加载400x200,即使它被指定加载到700x250.包含div将具有适当的宽度和高度,但由API呈现的图表将在400x200内加载.
我怀疑这是因为API尝试渲染时没有显示选项卡.因此,它尝试渲染它认为为null的东西,因此强制自己进入最小的默认分辨率.
我的想法是,如果图表的显示可以延迟,直到单击相应的选项卡,它将解决问题.可悲的是,我不知道该怎么做,而且我的研究也没有成果.我能找到的最接近的是这个帖子,但我没有找到任何真正的答案.
如果您有任何建议我会很感激,如果有必要,我很乐意跟进更多信息.
推荐指数
解决办法
查看次数
在谷歌图表中,图例指示符颜色不会随条形颜色而变化
我正在使用Google图表.我想改变图表中的条形颜色.所以使用系列风格我改变了条形颜色.但同时我想根据条形颜色更改Legend指示灯颜色.但我无法更改图例指示灯颜色.请帮我.
这是图表代码:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart3);
function drawChart3() {
var data = google.visualization.arrayToDataTable([
['Priority', 'Resolution(%)',{ role: 'annotation' },'ESL(%)',{ role: 'annotation' },{ role: 'style' }],
['P1', <%=P1_PERCENT %>,<%=P1_PERCENT%>,95,95,'color: #fcb441' ],
['P2', <%=P2_PERCENT%>,<%=P2_PERCENT%>,95,95,'color: #fcb441' ],
['P3 & P4', <%=P3_P4_PERCENT%>,<%=P3_P4_PERCENT%>,90,90,'color: #fcb441' ]
]);
var options = {
tooltip:{textStyle:{fontName:'"Arial"'}},
title: 'Resolution(Priority Wise)',titleTextStyle:{fontName:'"Arial"'},
hAxis: {title: 'Priority', titleTextStyle: {color: 'black',fontSize:'15',fontName:'"Arial"'}},
vAxis: {minValue:0},
legend:{position: 'bottom'},
chartArea:{width:'88%'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('g4'));
chart.draw(data, options);
}
我得到这样的图表
推荐指数
解决办法
查看次数