尝试使用jquery更新谷歌可视化 [英] Trying to update a google visualization using jquery
问题描述
我相对缺乏经验，请耐心等待。
我正在使用Google可视化API开发简单的仪表板。我正在开发vb.net。我有注释的时间表，Intensity Map和我的apsx上的一组表格。
我想要做的是更新Intensity Map和表格用户使用注释时间线工具选择的日期范围。
我希望只更新这些可视化文件，而不用整页加载。显然，一个很好的方法是将可视化分离为自包含的aspx页面，并使用jQuery将它们加载到div中。
我明显地说，因为这不起作用。当我尝试使用jQuery更新包含Google可视化文件的aspx时，我在浏览器中看到从www.google.com载入数据...消息，并且它只是连续运行并且不会返回。我经历了一个有经验的开发人员，他被困住了，但认为必须是谷歌API和jQuery之间的冲突。
任何提示，建议，替代解决方案都非常感谢！
只需编写一些可以帮助您的东西。对于我来说，测试BarChart，ColumnChart，LineChart和AreaChart对我来说效果很好（由于设计对PieCharts无法正常工作）。
主要构造函数代码：
函数图表（选项）{
var self = this;
self.chart = [];
self.dataTable = new google.visualization.DataTable（）;
self.settings = $ .extend（{
colors：['＃98D8F4'，'＃E85500'，'＃B3CF2F'，'＃FEB800'，'＃FFA1C5'，'＃D984FF'， '＃DD9D75']，
width：960，height：600，
}，options）;
self.add = function（type，element）{
self.chart.push（{
element：$（element），
o：new google.visualization [type]（ $（$ element）[0]），
draw：function（dataTable，options）{
this.element.html（''）;
this.o.draw（dataTable，options） ;
}
}）;
};
self.draw = function（options）{
var settings = $ .extend（{}，this.settings，options）;
$ .each（self.chart，function（i，chart）{
chart.draw（self.dataTable，settings）
}）
};
self.parseData = function（labels，legends，data）{
var countRows = data [0] .length;
self.dataTable.addColumn（'string'，'Name'）;
$ .each（传说，功能（我，传奇）{
self.dataTable.addColumn（'数字'，传说）;
}）
self.dataTable.addRows（ countRows）;
$ .each（label，function（i，label）{
self.dataTable.setValue（i，0，label）;
$ .each（data，function（k，entry） {
self.dataTable.setValue（i，k + 1，data [k] [i]）;
}）
}）
return self.dataTable;
};
$ b 您可以简单地将数据作为数组传递以构建图表（您必须总是在调用draw方法之前解析数据）
$ $ p $ $ $ $ c $ var label = [Kaspersky，Symantec，G数据，Avira，
传奇= [Antivirensoftware（kostenpflichtig），Antivirensoftware（kostenlos），Internetsecurity（kostenpflichtig），Internetsecurity（kostenlos），Sonstiges，keine Angabe ，Beta-Test KIS 2010，别的什么]，
data = [[46,4,7,33]，[3,1,2,38]，[42,12,14,7 ]，[2,0,1,1]，[43,8,14,18]，[4,3,0,1]，[1,2,4,2]];
除了该脚本有点复杂之外，您可以轻松绘制图表。
var charts = new Charts（）;
charts.parseData（标签，图例，数据）;
charts.add（'ColumnChart'，'＃column-chart'）;
charts.add（'BarChart'，'＃bar-chart'）;
charts.draw（{title：'Antivirus Comparison Chart'，titleY：'Points'}）;
并轻松刷新
charts.parseData（otherLabels，otherLegends，otherData）;
charts.draw（{title：'其他数据的防病毒比较图表'，titleY：'Points'}）;
希望它能帮助您：）
<噢，不要忘记加载库，并将这个脚本包含在文档就绪函数中，例如
google.load（ jquery，1.3.2）;
google.load（'visualization'，'1'，{'packages'：['piechart'，'barchart'，'columnchart']}）;
google.setOnLoadCallback（function（）{
/ * script here * /
}）;
I'm relatively inexperienced, so please bear with me.
I'm developing a simple dashboard using the Google visualization API. I'm developing in vb.net. I have the Annotated Timeline, the Intensity Map, and a set of tables on my apsx.
What I am trying to do is update the Intensity Map and tables based on the date range the user selects using the Annotated Timeline tool.
I was hoping to update only these visualizations without doing a full page load. Apparently, a great way to do this is to separate the visualizations into self-contained aspx pages and use jQuery to "load" them into a div.
I say apparently, as this is not working. When I try to update an aspx containing a Google visualization using jQuery, I get the message "Loading data from www.google.com..." in the browser and it just runs continuously and never returns. I ran this by an experienced developer and he was stumped, but thought must be a conflict between the google API and jQuery.
Any tips, advice, alternative solutions are greatly appreciated!
just coded something that can help you. Tested for BarChart, ColumnChart, LineChart and AreaChart, for me works well (by design wouldn't work correctly for PieCharts).
Main constructor code:
function Charts (options){
var self = this;
self.chart = [];
self.dataTable = new google.visualization.DataTable();
self.settings = $.extend({
colors:['#98D8F4','#E85500','#B3CF2F', '#FEB800', '#FFA1C5', '#D984FF', '#DD9D75'],
width: 960, height: 600,
}, options);
self.add = function(type, element){
self.chart.push({
element: $(element),
o: new google.visualization[type]($(element)[0]),
draw: function(dataTable, options){
this.element.html('');
this.o.draw(dataTable, options);
}
});
};
self.draw = function(options){
var settings = $.extend({}, this.settings, options);
$.each(self.chart, function(i, chart){
chart.draw(self.dataTable, settings)
})
};
self.parseData = function(labels, legends, data){
var countRows = data[0].length;
self.dataTable.addColumn('string', 'Name');
$.each(legends, function(i, legend){
self.dataTable.addColumn('number', legend);
})
self.dataTable.addRows(countRows);
$.each(labels, function(i, label){
self.dataTable.setValue(i, 0, label);
$.each(data, function(k, entry){
self.dataTable.setValue(i, k+1, data[k][i]);
})
})
return self.dataTable;
};
}
You can simply pass data as array to construct charts (you must always parse data before call draw method)
var labels = [ "Kaspersky","Symantec","G-Data","Avira" ],
legends = [ "Antivirensoftware (kostenpflichtig)","Antivirensoftware (kostenlos)","Internetsecurity (kostenpflichtig)","Internetsecurity (kostenlos)","Sonstiges, keine Angabe","Beta-Test KIS 2010", "Something Else" ],
data = [ [46,4,7,33],[3,1,2,38],[42,12,14,7],[2,0,1,1],[43,8,14,18],[4,3,0,1],[1,2,4,2]];
besides that script is a little complicated, you can draw charts easily.
var charts = new Charts();
charts.parseData(labels, legends, data);
charts.add('ColumnChart', '#column-chart');
charts.add('BarChart', '#bar-chart');
charts.draw({title: 'Antivirus Comparison Chart', titleY:'Points'});
and refresh easily
charts.parseData(otherLabels, otherLegends, otherData);
charts.draw({title: 'Antivirus Comparison Chart with Other Data', titleY:'Points'});
hope it'll help you :)
Oh, and don't forget load libraries and include this script inside document ready function, e.g.
google.load("jquery", "1.3.2");
google.load('visualization', '1', {'packages':['piechart','barchart','columnchart']});
google.setOnLoadCallback(function() {
/* script here */
});
这篇关于尝试使用jquery更新谷歌可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
