1
我試圖使用jQuery的.ajax（），谷歌可視化註釋時間表和one of the google datatable helpers在一起。最終，我所追求的是在頁面上建立鏈接，當用戶點擊它時，數據通過jquery.ajax（）異步加載，並作爲Google可視化符合JSON返回，並傳遞給製圖API以生成帶註釋的時間線。jquery .ajax，谷歌可視化和問題讓他們一起工作
沿着DataTable的助手維基頁面上的指導線，香草版做工精細，即
- 數據（而不是JSON數據通過對頁面調用注入頁面沒有AJAX加載。 ClientScript.RegisterStartupScript（）在Page_Load（）方法背後的代碼）和
- 一個鏈接頁面上沒有關聯的單擊事件
這裏的香草工作代碼：
代碼隱藏：
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = PopulateDatatable();
ConvertToGoogleDatatable(dt);
}
private void ConvertToGoogleDatatable(DataTable dt)
{
// Use of Bortosky helper class to generated
// google visualisation compliant json
GoogleDataTable gdt = new GoogleDataTable(dt);
using (MemoryStream memoryStream = new MemoryStream())
{
gdt.WriteJson(memoryStream);
memoryStream.Position = 0;
StreamReader sr = new StreamReader(memoryStream);
Page.ClientScript.RegisterStartupScript(this.GetType(), "vis", string.Format("var jsonData = {0}", sr.ReadToEnd()), true);
}
}
private DataTable PopulateDatatable()
{
DataTable dt = new DataTable();
dt.Columns.Add("Date", typeof(System.DateTime));
dt.Columns.Add("High", typeof(System.Double));
dt.Columns.Add("Low", typeof(System.Double));
dt.Columns.Add("Closing Price", typeof(System.Double));
using (StreamReader sr = new StreamReader(@"data.csv"))
{
string line;
line = sr.ReadLine();
while ((line = sr.ReadLine()) != null)
{
string[] lineParts = line.Split(',');
dt.Rows.Add(new object[] { Convert.ToDateTime(lineParts[0]), lineParts[2], lineParts[3], lineParts[4] });
}
}
return dt;
}
}
XHTML：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GoogleVis._Default" %>
<!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 runat="server">
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(jsonData, 0.5);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id='chart_div' style='width: 90%; height: 500px;'></div>
</div>
</form>
</body>
</html>
當我然後嘗試以包裹在一個PageMethod的對數據的請求重構經由阿賈克斯被調用（）和附加點擊事件就會崩潰。特別是，調試我可以看到.ajax（）調用工作正常，json數據正在返回。 JSON數據也被正確地傳遞給drawChart（）方法，但執行不越過這行：
var data = new google.visualization.DataTable(msg.d, 0.5);
瀏覽器只是停留在說
「來自google.com ...傳輸數據」這裏的非工作代碼：
代碼隱藏：
public partial class _Default : System.Web.UI.Page
{
[WebMethod]
public static string AjaxMethod()
{
DataTable dt = PopulateDatatable();
return ConvertToGoogleDatatable(dt);
}
private static string ConvertToGoogleDatatable(DataTable dt)
{
GoogleDataTable gdt = new GoogleDataTable(dt);
using (MemoryStream memoryStream = new MemoryStream())
{
gdt.WriteJson(memoryStream);
memoryStream.Position = 0;
StreamReader sr = new StreamReader(memoryStream);
// FOLLOWING 3 LINES DIFFERENT FROM VANILLA VERSION ABOVE!
string returnValue = sr.ReadToEnd();
sr.Close();
return returnValue;
}
}
private static DataTable PopulateDatatable()
{
DataTable dt = new DataTable();
dt.Columns.Add("Date", typeof(System.DateTime));
dt.Columns.Add("High", typeof(System.Double));
dt.Columns.Add("Low", typeof(System.Double));
dt.Columns.Add("Closing Price", typeof(System.Double));
using (StreamReader sr = new StreamReader(@"data.csv"))
{
string line;
line = sr.ReadLine();
while ((line = sr.ReadLine()) != null)
{
string[] lineParts = line.Split(',');
dt.Rows.Add(new object[] { Convert.ToDateTime(lineParts[0]), lineParts[2], lineParts[3], lineParts[4] });
}
}
return dt;
}
}
XHTML：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GoogleVis._Default" %>
<!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 runat="server">
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript' src="jquery-1.3.2.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#Result").click(function() {
$.ajax({
type: "POST",
url: "Default.aspx/AjaxMethod",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart(msg));
}
});
});
});
function drawChart(msg) {
var data = new google.visualization.DataTable(msg.d, 0.5);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="Result"><a href="#">Load!</a></div>
<div id='chart_div' style='width: 90%; height: 500px;'></div>
</div>
</form>
</body>
</html>
我還發現，剝離的大部分功能並修改香草工作JavaScript版本在包裝它的$（document）。就緒（函數（）{}（如下圖所示）具有同樣的破壞性影響。
<script type='text/javascript'>
$(document).ready(function() {
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(jsonData, 0.5);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
}
</script>
所以......關於如何我應這些調用鏈接在一起，得到它的工作任何想法？
感謝
編輯：
下面的代碼的清理也似乎不工作 - 尤其是在LoadData警報消息（）從不顯示！
$(document).ready(function() {
$("#Result").click(function() {
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(LoadData)
});
});
function LoadData(){
alert("breakpoint");
$.ajax({
type: "POST",
url: "Default.aspx/AjaxMethod",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var jsonData = msg.d;
var data = new google.visualization.DataTable(jsonData, 0.5);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
});
};
編輯2：
另一種變不起作用！
以下結果是數據被加載（即.ajax（）調用工作），但我然後得到一個this.t undefined錯誤從谷歌的JavaScript。
<script type='text/javascript' src="jquery-1.3.2.min.js"></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(LoadData);
function LoadData() {
$.ajax({
type: "POST",
url: "Default.aspx/AjaxMethod",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var data = new google.visualization.DataTable(msg.d, 0.5);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
});
}
</script>
用$（document）.ready（function（）{}）包裝上面的代碼。讓我回到之前的「從google.com傳輸數據」，它就在那裏。 Ajax調用不言，當我打stop停止加載頁面我得到「$沒有定義，$。阿賈克斯（{」的螢火。
令人沮喪！
任何想法？