我对JScript，Ajax和Google Graphs都很陌生。但是我正在尝试将所有内容组合在一起，我已经将它们全部分开编码并让它们正常工作但是有很多问题将它们组合在一起。
Google Graph我的代码的一部分（表单在此处不执行任何操作）：
<html>
<head>
<title>Dashboard Application</title><meta name=keywords content=Dashboard Application, some of my best frieds are search engines/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" /><script type="text/javascript" src="jquery.simple-dtpicker.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #ffffff; padding-left: 1%; padding-bottom: 100px; }
footer{font-size:small;position:fixed;right:5px;bottom:5px;}
</style>
<style>h1 {color:white; font-size:24pt; text-align:center;font-family:arial,sans-serif }.menu {color:white; font-size:12pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }table2 {background:black }p {color:black; font-size:12pt; text-align:justify;font-family:arial,sans-serif }p.foot {color:white; font-size:9pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }a:link, a:visited, a:active {color:white} </style></head>
<body>
<table width=100% cellpadding=12 cellspacing=0 border=0><tr bgcolor=black><td align=left><img src="logo.png" width=150 height=150/></td><td><h1>Engineering Dashboard</h1></td><td align=right><img src=logo.png width=150 height=150/> </td></tr> </table><table class='table2' width=100% border=0 bgcolor=black cellpadding=4 cellspacing=0>
<tr>
<td width=50%><a href=googletestform.php><img src=as-logo.png width=20 height=20 alt=Google Graphs+Form border=0 /></a><a href=googletestform.php><span class=menu>Google Graphs+Form</span></a></td><td width=50%><a href=logout.php><img src=as-logo.png width=20 height=20 alt=Log Out border=0 /></a><a href=logout.php><span class=menu>Log Out</span></a></td></tr>
</table>
<form id="graphinput" method=POST>
<table width="100%" cellpadding="1" cellspacing="1" border="0"><tr>
<td width="10%">Start Date:</td>
<td width="20%">
<input type="text" name="startDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=startDateTime]').appendDtpicker();
});
</script></td>
<td width="10%">End Date:</td>
<td width="20%">
<input type="text" name="endDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=endDateTime]').appendDtpicker();
});
</script></td><td width="30%" ><select name="table"><option value="PHY_Short_CHA_ESW">PHY_Short_CHA_ESW</option><option value="PHY_Short_Cache_Usage_Rate">PHY_Short_Cache_Usage_Rate</option><option value="PHY_Short_DKA_ESW">PHY_Short_DKA_ESW</option><option value="PHY_Short_ESW_Cache">PHY_Short_ESW_Cache</option><option value="PHY_Short_MP">PHY_Short_MP</option><option value="PHY_Short_MPPCB_ESW">PHY_Short_MPPCB_ESW</option><option value="PHY_Short_PG">PHY_Short_PG</option><option value="PHY_Short_Write_Pending_Rate">PHY_Short_Write_Pending_Rate</option><option value="Port_IOPS">Port_IOPS</option><option value="Port_Initiator_IOPS">Port_Initiator_IOPS</option><option value="Port_Initiator_KBPS">Port_Initiator_KBPS</option><option value="Port_Initiator_Response">Port_Initiator_Response</option><option value="Port_KBPS">Port_KBPS</option><option value="Port_Response">Port_Response</option></select></td><td width="10%" ><select name="graph"><option value="ALL">ALL</option><option value="AVG&MAX">AVG&MAX</option></select></td></tr></table><table><tr><td width=100%><input type="submit" value="Submit"></td></tr></table></form><div id="response"></div>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "get_sql_data.php",
//type: "POST",
dataType: "json",
success: function (phpdata) {
// Create our data table out of JSON data loaded from server.
var chartdata = new google.visualization.DataTable(phpdata);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(chartdata, {width: 1600, height: 500});
}
});
}
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div><table width=100% bgcolor=black cellpaddin g=0 border=0><tr><td><p class=foot>© root Dashboard</p><p class=foot>Please see our <a href=legal.php>Legal Information Page</a></p></td></tr></table></body>
</html>
纯文字版本（想要从字符串中返回的表单中获取数据并将其绘制成图形）：
<html>
<head>
<title>Dashboard Application</title><meta name=keywords content=Dashboard Application, some of my best frieds are search engines/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" /><script type="text/javascript" src="jquery.simple-dtpicker.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #ffffff; padding-left: 1%; padding-bottom: 100px; }
footer{font-size:small;position:fixed;right:5px;bottom:5px;}
</style>
<style>h1 {color:white; font-size:24pt; text-align:center;font-family:arial,sans-serif }.menu {color:white; font-size:12pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }table2 {background:black }p {color:black; font-size:12pt; text-align:justify;font-family:arial,sans-serif }p.foot {color:white; font-size:9pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }a:link, a:visited, a:active {color:white} </style></head>
<body>
<table width=100% cellpadding=12 cellspacing=0 border=0><tr bgcolor=black><td align=left><img src="logo.png" width=150 height=150/></td><td><h1>Engineering Dashboard</h1></td><td align=right><img src=logo.png width=150 height=150/> </td></tr> </table><table class='table2' width=100% border=0 bgcolor=black cellpadding=4 cellspacing=0>
<tr>
<td width=50%><a href=googletestform.php><img src=as-logo.png width=20 height=20 alt=Google Graphs+Form border=0 /></a><a href=googletestform.php><span class=menu>Google Graphs+Form</span></a></td><td width=50%><a href=logout.php><img src=as-logo.png width=20 height=20 alt=Log Out border=0 /></a><a href=logout.php><span class=menu>Log Out</span></a></td></tr>
</table>
<form id="graphinput" method=POST>
<table width="100%" cellpadding="1" cellspacing="1" border="0"><tr>
<td width="10%">Start Date:</td>
<td width="20%">
<input type="text" name="startDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=startDateTime]').appendDtpicker();
});
</script></td>
<td width="10%">End Date:</td>
<td width="20%">
<input type="text" name="endDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=endDateTime]').appendDtpicker();
});
</script></td><td width="30%" ><select name="table"><option value="PHY_Short_CHA_ESW">PHY_Short_CHA_ESW</option><option value="PHY_Short_Cache_Usage_Rate">PHY_Short_Cache_Usage_Rate</option><option value="PHY_Short_DKA_ESW">PHY_Short_DKA_ESW</option><option value="PHY_Short_ESW_Cache">PHY_Short_ESW_Cache</option><option value="PHY_Short_MP">PHY_Short_MP</option><option value="PHY_Short_MPPCB_ESW">PHY_Short_MPPCB_ESW</option><option value="PHY_Short_PG">PHY_Short_PG</option><option value="PHY_Short_Write_Pending_Rate">PHY_Short_Write_Pending_Rate</option><option value="Port_IOPS">Port_IOPS</option><option value="Port_Initiator_IOPS">Port_Initiator_IOPS</option><option value="Port_Initiator_KBPS">Port_Initiator_KBPS</option><option value="Port_Initiator_Response">Port_Initiator_Response</option><option value="Port_KBPS">Port_KBPS</option><option value="Port_Response">Port_Response</option></select></td><td width="10%" ><select name="graph"><option value="ALL">ALL</option><option value="AVG&MAX">AVG&MAX</option></select></td></tr></table><table><tr><td width=100%><input type="submit" value="Submit"></td></tr></table></form><div id="response"></div><div id="response"></div>
<script>
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
data: $(this).serialize()
})
.done(function(data){
// show the response
$("#response").html(data);
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
<table width=100% bgcolor=black cellpaddin g=0 border=0><tr><td><p class=foot>© root Dashboard</p><p class=foot>Please see our <a href=legal.php>Legal Information Page</a></p></td></tr></table></body>
</html>
当我按下提交按钮后，当我尝试将两者合并时，它只会打开一个新页面并继续说明要连接到www.google.com。关于如何绘制txt数据的任何想法？
以下是我的尝试不起作用： $（文件）。就绪（函数（）{ $（ “＃graphinput”）。提交（函数（）{
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
data: $(this).serialize()
})
.done(function(data){
// show the response
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var chartdata = new google.visualization.DataTable(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("response"));
chart.draw(chartdata, {width: 1600, height: 500});
}
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
提前感谢您的帮助。
答案 0 :(得分：0)
看到我的错误，我试图使用错误的数据类型绘图： 我目前的工作代码：
<script>
//Load core chart visualization package
google.load("visualization", "1", {packages: ["corechart"]});
//On load call back initiate function
google.setOnLoadCallback(getData);
function getData() {
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
dataType: "json",
data: $(this).serialize()
})
.done(function(data){
// show the response
//$("#response").html(data);
var chartdata = new google.visualization.DataTable(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("response"));
chart.draw(chartdata, {width: 1600, height: 500});
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
}
</script>