Multiple visualizations on one page
I am using python-visualization library to calculate data source. I tried to do multiple renderings on the same page. Both are line charts and the data comes from separate URLs for each visualization.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="/site_media/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['linechart'] });
</script>
<script type="text/javascript">
var visualization1, visualization2;
function drawVisualization1() {
var query1 = new google.visualization.Query('/datasource1/');
query1.send(handleQueryResponse1);
var query2 = new google.visualization.Query('/datasource2/');
query2.send(handleQueryResponse2);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data1 = response.getDataTable();
visualization1 = new google.visualization.LineChart(document.getElementById('visualization1'));
var options = {};
options['width'] = 600;
options['height'] = 200;
visualization1.draw(data1, options);
}
function handleQueryResponse2(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data2 = response.getDataTable();
visualization2 = new google.visualization.LineChart(document.getElementById('visualization2'));
var options = {};
options['width'] = 600;
options['height'] = 200;
visualization2.draw(data2, options);
}
google.setOnLoadCallback(drawVisualization1);
</script>
<body>
<div id="visualization1" class="span-15"><br /><br /></div>
<div id="visualization2" class="span-15"><br /><br /></div>
</body>
DataSources:
def datasource1(request):
data = []
description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}
for i in range(datetime.today().hour + 1):
data.append({"col1":datetime.today().hour,"col2":datetime.today().hour })
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
return HttpResponse(data_table.ToJSonResponse(columns_order=( "col1","col2",)))
def datasource2(request):
data = []
description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}
for i in range(datetime.today().hour + 1):
data.append({"col1":datetime.today().hour,"col2":datetime.today().hour })
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
return HttpResponse(data_table.ToJSonResponse(columns_order=( "col1","col2",)))
When rendering a page, only the first visualization appears, the second visualization never appears. Can anyone help me?
source to share
You can try something like
function Charts(){
var self = this;
self.chart = [];
self.settings = { width: 650, height: 250 };
self.add = function(type, element, dataTable, options){
self.chart.push({
o: new google.visualization[type]($(element)[0]),
data: dataTable,
draw: function(){
var settings = $.extend({}, self.settings, options);
this.o.draw(this.data, settings);
}
});
return self;
};
self.draw = function(){
$.each(self.chart, function(i, chart){
chart.draw();
});
return self;
};
}
and then
//var data1 = 'someDataTable',
// data2 = 'anotherDataTable';
charts = new Charts();
var settings = {width:600, height:200 };
charts.add('LineChart', '#visualization1', settings, data1);
charts.add('LineChart', '#visualization2', settings, data2);
charts.draw();
Sorry, didn't check myself, just thought it might help you.
And I suggest downloading from jQuery google.
google.load("jquery", "1.2.6");
Hope this helps you :)
source to share
It happened to me too. The solution was for the server to return the reqId parameter. If you have two visualizations on the same page, you will have reqId 0 and the other reqId 1. make sure the server returns these reqIds back appropriately in response.
If both responses return '0', then only one visualization (the first) is displayed.
source to share