Javascript google visualization具有自己的数据查询的多个图表
在我的Google Visualization网页上，我想要一个条形图和一个面积图，但我只能显示其中一个 每个图表都需要自己的数据，并针对我自己的基于Python的服务器使用自己的google.visualization.Query对象。我的initialize函数调用该函数以显示第一个图表，在第一个图表的查询响应处理程序的底部，我调用该函数以显示第二个图表。（我这样做是为了确保我的第二个数据查询直到第一个图表绘制完成后才开始。）当我编码一次只绘制一个图表时，每个图表都会正确显示。但当我尝试绘制两个图表时，只有第一个图表会绘制，即使我正在验证两个数据查询是否都在正确的时间运行并返回有效的json响应 谢谢你的帮助，波黑 2013年10月27日编辑： 这个帖子解决了我的问题： 对于任何实现Python数据源的人，请按如下方式解析reqId参数：Javascript google visualization具有自己的数据查询的多个图表,javascript,google-visualization,Javascript,Google Visualization,在我的Google Visualization网页上，我想要一个条形图和一个面积图，但我只能显示其中一个 每个图表都需要自己的数据，并针对我自己的基于Python的服务器使用自己的google.visualization.Query对象。我的initialize函数调用该函数以显示第一个图表，在第一个图表的查询响应处理程序的底部，我调用该函数以显示第二个图表。（我这样做是为了确保我的第二个数据查询直到第一个图表绘制完成后才开始。）当我编码一次只绘制一个图表时，每个图表都会正确显示。但当我尝试绘制
import cgi
form = cgi.FieldStorage()
tqx = form.getvalue("tqx") # tqx comes back like "reqId:1"
req_id = int(tqx[tqx.find("reqId"): ].split(":")[1])
response = data_table.ToJSonResponse(req_id=req_id,
columns_order=("vehicle_id", "num_events"))
print "Content-type: text/plain"
print
print response
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（初始化）；
var timelineDate1=“”；
var messageCountsDate1=“”；
var timeline_Drawed=假；
var消息\u计数\u绘制=假；
函数初始化（）
{
drawTimeline（）；
}
函数drawTimeline（）
{
var rows=QueryString.rows | |“4”；
var date1=QueryString.date1 | |“2013-9-1”；//开始日期
timelineDate1=日期1；
var page=parseInt（QueryString.page）| 1；
如果（第<1页）
{
page=1；
}
//时间线
var url_timeline=”http://localhost/emit_event_timeline.py"
+“？date1=“+date1+”&rows=“+rows+”&page=“+page；
var query\u timeline=新的google.visualization.query（url\u timeline）；
查询时间线设置超时（14400）；
查询\u timeline.send（handleTimelineQueryResponse）；
}
函数handleTimelineQueryResponse（响应）
{
var stack=parseInt（QueryString.stack）| 1
var时间线和U选项=
{
标题：“事件计数时间线”+timelineDate1+“到当前”，
变量：{title:'Date'，titleTextStyle:{color:'red'}}，
hAxis:{title:'Event Count'，titleTextStyle:{color:'blue'}}，
isStacked:堆栈
};
if（response.isError（））
{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
var timeline_data_table=response.getDataTable（）；
var timeline_chart=new google.visualization.AreaChart（document.getElementById（'timeline_div'））；
google.visualization.events.addListener（时间线图表“就绪”，时间线图表“就绪”）；
google.visualization.events.addListener（时间线图表'error'，errorHandler）；
时间线图表。绘制（时间线数据表、时间线选项）；
}
功能时间线\u图表\u就绪（）
{
绘制的时间线=真；
如果（！消息\u计数\u绘制）
{
drawMessagecounts（）；
}
}
函数mc_图表_就绪（）
{
消息\u计数\u绘制=真；
如果（！绘制时间线）
{
drawTimeline（）；
}
}
函数drawMessagecounts（）
{
var rows=QueryString.rows | |“20”；
var date1=QueryString.date1 | |“2013-9-1”；//开始日期
messageCountsDate1=date1
var page=parseInt（QueryString.page）| 1；
如果（第<1页）
{
page=1；
}
//消息计数
变量url_消息_计数=”http://localhost/emit_all_message_counts.py"
+“？date1=“+date1+”&page=“+page+”&rows=“+rows；
var query\u message\u counts=新的google.visualization.query（url\u message\u counts）
查询消息计数。设置超时（14400）；
查询消息计数。发送（handleMessageCountQueryResponse）；
}
函数handleMessageCountQueryResponse（响应）
{
var stack=parseInt（QueryString.stack）| 1
var mc_期权=
{
标题：“邮件计数，+MessageCountsData1+”显示“，
vAxis:{title:'Message Source'，titleTextStyle:{color:'red'}}，
hAxis:{title:'Message Count'，titleTextStyle:{color:'blue'}，
isStacked:堆栈
};
if（response.isError（））
{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
var mc_data_table=response.getDataTable（）；
var mc_chart=new google.visualization.BarChart（document.getElementById（'message_count_div'））；
google.visualization.events.addListener（mc_-chart，'ready'，mc_-chart_-ready）；
google.visualization.events.addListener（mc_图表'error'，errorHandler）；
绘制mc_图表（mc_数据表、mc_选项）；
}
//感谢：
// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
var QueryString=函数（）
{
//此函数是匿名的，立即执行并
//返回值被指定给QueryString！
var query_string={}；
var query=window.location.search.substring（1）；
var vars=query.split（&）；
对于（var i=0；i，解决方案是让我的Python数据源将请求中的reqId参数传递回json reqponse。这篇文章解决了我的问题：
<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(initialize);
var timelineDate1 = "";
var messageCountsDate1 = "";
var timeline_drawn = false;
var message_count_drawn = false;
function initialize()
{
drawTimeline();
}
function drawTimeline()
{
var rows = QueryString.rows || "4";
var date1 = QueryString.date1 || "2013-9-1"; // Date start
timelineDate1 = date1;
var page = parseInt(QueryString.page) || 1;
if (page < 1)
{
page = 1;
}
// Timeline
var url_timeline = "http://localhost/emit_event_timeline.py"
+ "?date1=" + date1 + "&rows=" + rows + "&page=" + page;
var query_timeline = new google.visualization.Query(url_timeline);
query_timeline.setTimeout(14400);
query_timeline.send(handleTimelineQueryResponse);
}
function handleTimelineQueryResponse(response)
{
var stack = parseInt(QueryString.stack) || 1
var timeline_options =
{
title: 'Event Count Timeline, ' + timelineDate1 + ' to Present',
vAxis: {title: 'Date', titleTextStyle: {color: 'red'}},
hAxis: {title: 'Event Count', titleTextStyle: {color: 'blue'}},
isStacked: stack
};
if (response.isError())
{
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var timeline_data_table = response.getDataTable();
var timeline_chart = new google.visualization.AreaChart(document.getElementById('timeline_div'));
google.visualization.events.addListener(timeline_chart, 'ready', timeline_chart_ready);
google.visualization.events.addListener(timeline_chart, 'error', errorHandler);
timeline_chart.draw(timeline_data_table, timeline_options);
}
function timeline_chart_ready()
{
timeline_drawn = true;
if (!message_count_drawn)
{
drawMessagecounts();
}
}
function mc_chart_ready()
{
message_count_drawn = true;
if (!timeline_drawn)
{
drawTimeline();
}
}
function drawMessagecounts()
{
var rows = QueryString.rows || "20";
var date1 = QueryString.date1 || "2013-9-1"; // Date start
messageCountsDate1 = date1
var page = parseInt(QueryString.page) || 1;
if (page < 1)
{
page = 1;
}
// Message counts
var url_message_counts = "http://localhost/emit_all_message_counts.py"
+ "?date1=" + date1 + "&page=" + page + "&rows=" + rows;
var query_message_counts = new google.visualization.Query(url_message_counts)
query_message_counts.setTimeout(14400);
query_message_counts.send(handleMessageCountQueryResponse);
}
function handleMessageCountQueryResponse(response)
{
var stack = parseInt(QueryString.stack) || 1
var mc_options =
{
title: 'Message Counts, ' + messageCountsDate1 + ' to Present',
vAxis: {title: 'Message Source', titleTextStyle: {color: 'red'}},
hAxis: {title: 'Message Count', titleTextStyle: {color: 'blue'}},
isStacked: stack
};
if (response.isError())
{
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var mc_data_table = response.getDataTable();
var mc_chart = new google.visualization.BarChart(document.getElementById('message_count_div'));
google.visualization.events.addListener(mc_chart, 'ready', mc_chart_ready);
google.visualization.events.addListener(mc_chart, 'error', errorHandler);
mc_chart.draw(mc_data_table, mc_options);
}
// Thanks to:
// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
var QueryString = function ()
{
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = pair[1];
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [ query_string[pair[0]], pair[1] ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(pair[1]);
}
}
return query_string;
} ();
function errorHandler(e)
{
// Called when an error occurs during chart processing
alert('Error handler: ' + e.message);
}
</script>
</head>
<body>
<div id="timeline_div" style="width:800px;height:500px;border:1px solid gray;float:left">
</div>
<div id="message_count_div" style="width:800px;height:500px;border:1px solid gray;float:left">
</div>
<div id="control_div" style="width:80px;height:60px;float:left">
</div>
</body>
</html>