标签: google-visualization
适用于Asp.net Mvc的Google Chart HtmlHelper
Google Chart Api是否有任何HtmlHelper Extensions ？(我喜欢用于一些基本图表,例如饼图,条形图)
Soe Moe
推荐指数
解决办法
查看次数
使用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图表？
我正在使用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柱形图vAxis.minValue不适用于所有零值
我遇到的情况是默认情况下所有数据都为零.像这样的东西:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['2003', 0, 0, 0, 0, 0, 0],
['2004', 0, 0, 0, 0, 0, 0],
['2005', 0, 0, 0, 0, 0, 0],
['2006', 0, 0, 0, 0, 0, 0],
['2007', 0, 0, 0, 0, 0, 0],
['2008', 0, 0, 0, 0, 0, 0]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country", …推荐指数
解决办法
查看次数
在Google Charts中绘制视觉线条
我正在写一张谷歌图表.它有堆叠的列.最重要的是,我想绘制2行,表示最小和最大允许值.
我想出的唯一解决方案是修改ComboCharts的第一个例子.我的结果如下:
这还不够.图形是可变的,因此如果仅显示1个Quartal,则该线将仅为点.我的问题是:
- 有没有办法进一步绘制线条,因此它会触及图形的左右边界？
- 我可以在图表中绘制标记线,而不是假装它是另一个数据点吗？
如果你愿意,你可以在这里摆弄一个ComboChart .
推荐指数
解决办法
查看次数
更改谷歌材料条形图上的颜色
我正在使用谷歌的新材料栏图表显示带有chart.title和chart.subtitle选项的图形,但无法更改颜色.我想要实现的是
http://jsfiddle.net/8pjuz38c/1/
但最接近的是:
http://jsfiddle.net/8pjuz38c/5/
为什么颜色不适用于该系列？
推荐指数
解决办法
查看次数