I am using python-visualization library for computing the datasource. I tried to put more than one visualization in a single page. Both are line charts and data comes from a seperate URLs for each visualizations.
<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 I render the page only the first visualization comes up , the second visualization never appears. Can some one help me out?