我按照谷歌运动图表链接但是我使用jsp生成数据并将该数据传递给加载器jsp(jquery ajax请求)。下面是我的代码。请帮我解决这个问题。
显示jsp:(此页面调用ajax请求来自数据库的数据)
<html>
<head>
<title>Motion Chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jsapi.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function loadMotionChart(){
var jsonData = $.ajax({
url: "./chart-loaders/motion-chart-loader.jsp",
dataType: "json",
data:"DB="+'myDB',
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData);
var data = new google.visualization.arrayToDataTable(obj);
var options = {
title: 'Motion Chart', is3D : true
};
var motionchart = new google.visualization.MotionChart(document.getElementById('motionChart'));
motionchart.draw(data, options);
}
</script>
</head>
<body>
<div id="container">
<div id="motionBox">
<input type="button" value="Load Chart" onclick="loadMotionChart()" />
</div>
</div>
<div id="motionChartContainer">
<div id="motionChart" style="width: 800px; height: 400px;" />
</div>
</body>
</html>
loader jsp:(这个页面是我尝试创建json字符串并传回显示jsp的loader页面)
<%@ page import="java.sql.*, java.util.*, java.text.*" %>
<%@page import="net.sf.json.JSONObject,net.sf.json.JSONArray"%>
<%
Connection conn;
.
.
.
String data = "[[\"Item\",\"Date\",\"Amt1\",\"Amt2\"],";
try
{
ResultSet rs=null;
Statement stmt = conn.createStatement();
monthOffset = "2013-01-01";
monthLimit = "2013-02-28";
rs = stmt.executeQuery("select dbo.doGetMotionChartData('" + monthOffset + "','"+monthLimit+"')");
while (rs.next())
{
resultData = rs.getString(1);
}
itemTokens = new StringTokenizer(resultData, "#");
itemSize = itemTokens.countTokens();
// at this point I get whole data as one string("resultData") then I use string tokenizer to split and make data in required format.
for (int i = 0; i < itemSize; i++){
tmpitemToken = itemTokens.nextToken("#");
collectionTokens = new StringTokenizer(tmpitemToken, "|");
collectionSize = collectionTokens.countTokens();
for (int j = 0; j < collectionSize; j++){
tmpCollectionToken = collectionTokens.nextToken("|");
collectionSplit = tmpCollectionToken.split(",");
dateSplit = collectionSplit[1].split("-");
data += "['" + collectionSplit[0] + "'," + "new Date("+dateSplit[2]+","+dateSplit[1]+","+dateSplit[0]+")" + "," + collectionSplit[2] + "," + collectionSplit[3] + "]" + "," ;
}
}
/*
final Data = [["Item","Date","Amt1","Amt2"],['Item1',new Date(2013,01,01),618699.88,603694.00],['Item2',new Date(2013,01,01),2650229.78,3124956.02],['Item1',new Date(2013,02,01),179667.66,354520.00],['Item2',new Date(2013,02,01),229715.02,1208445.76]]
*/
out.print(data);
out.flush();
}
catch(Exception e){
e.printStackTrace();
}