我正在利用谷歌线图从一个利用共同项目数据库提取的图表价值。 目前,我有工作要做。 <代码>data.addColumn报表在网页上载时通过数据库查询生成。
我的问题是,我也想有两条 com子,可以用来为轴心 pick和最大值,然后更新图表。 目前,我能想做到这一点的唯一途径是用新的参数更新网页。
我更希望只重述图表,而不重载整页。 这是可能的吗? 是否有办法超越文字标签,然后重载图表? 或者还有其他办法?
EDIT:我对如何将数据从数据库转至装货页有麻烦。 我的守则是:
<>strong>loader.html (page the hold themap anddate areas):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load( visualization , 1 , {packages: [ corechart ]});
</script>
<script type="text/javascript">
function loadChart()
{
var xmlhttp;
var minDate = document.getElementById( startDate ).value;
var maxDate = document.getElementById( endDate ).value;
if (!minDate)
minDate = none ;
if (!maxDate)
maxDate = none ;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById( lineChart ).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "chart-loader.jsp?min=" + minDate + &max= + maxDate, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="container">
<div id="lineChart"></div>
<div id="startDateBox">
<label for="startDate">Min Date:</label>
<input id="startDate" type="text" />
</div>
<div id="endDateBox">
<label for="endDate">Max Date:</label>
<input id="endDate" type="text" />
</div>
<input type="button" value="Update" id="updateBtn" onclick="loadChart()" />
</div> <!-- End container -->
</body>
</html>
<
<%@ page import="java.sql.*, java.util.ArrayList" %>
<%
Connection conn;
try {
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
conn = DriverManager.getConnection("jdbc:microsoft:sqlserver://...", "user", "pass");
}
catch(SQLException e)
{
out.println("SQLException: " + e.getMessage() + "<br/>");
while((e = e.getNextException()) != null)
out.println(e.getMessage() + "<br/>");
throw new UnavailableException(this, "Cannot connect with the specified database.");
}
String data = "";
String minDate = (String)request.getParameter("min");
String maxDate = (String)request.getParameter("max");
try
{
ResultSet rs;
Statement stmt = conn.createStatement();
if (minDate.equals("none") || maxDate.equals("none")) // First load, use whole table
{
rs = stmt.executeQuery("SELECT ...");
}
// ... more possible queries
ArrayList<String> ptVals = new ArrayList<String>();
ArrayList<String> colDates = new ArrayList<String>();
while (rs.next())
{
ptVals.add(rs.getString("avgvalue"));
colDates.add(rs.getString("collectiondate"));
}
// ptVals.size()
for (int i = 0; i < 5; i++)
data += " data.addRow([ " + colDates.get(i) + " ," + ptVals.get(i) + "]);
";
// ... Use out.print to spit out script.
}
catch(SQLException e)
{
data = "SQLException: " + e.getMessage() + "<br/>";
while((e = e.getNextException()) != null)
data += e.getMessage() + "<br/>";
}
finally
{ // Clean up resources, close the connection.
if(conn != null)
{
try { conn.close(); }
catch (Exception ignored) {}
}
}
%>
Original script to load the chart
<script type="text/javascript">
function drawVisualization()
{
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn( string , Date );
data.addColumn( number , Temperature );
data.addRow(["01/01/11", 70.2]);
data.addRow(["01/02/11", 70.0]);
data.addRow(["01/03/11", 69.8]);
data.addRow(["01/04/11", 70.1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById( lineChart )).
draw(data, {backgroundColor: transparent ,
width: 700, height: 400,
legend: none ,
hAxis: {title: Dates , titleTextStyle: {color: black , fontSize: 12, fontName: Verdana, Arial }},
vAxis: {title: Temperature , titleTextStyle: {color: black , fontSize: 12, fontName: Verdana, Arial }},
chartArea: {left: 80, top: 20}
}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
Thanks, Ryan