1
私はjqueryの.ajax（）、Googleビジュアライゼーションのタイムラインとone of the google datatable helpersを一緒に使用しようとしています。最終的には、ページ上にリンクがあり、ユーザーがクリックすると、データはjquery.ajax（）を介して非同期にロードされ、Googleビジュアライゼーションに準拠したJSONとして返され、注釈付きタイムラインを生成するためにチャートAPIに渡されます。データテーブルヘルパーwikiページ上の指導の線に沿って jquery .ajax、Googleビジュアライゼーションとそれらを一緒に働く問題
、バニラバージョンはすなわち- 、代わりに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);
ここで非稼働コードです：
分離コード：
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>
Iは、機能のほとんどを除去し、$（ドキュメント）.ready（関数（）{}（以下に示す）のそれを包むことによって、同じ損傷効果を有するジャバスクリプトバニラ作業バージョンを変更することも発見しました。
<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>
だから... ...私はそれが仕事を得るために一緒にこれらの呼び出しをチェーンする方法についてのアイデア？
おかげで
EDIT：
次のコードの並べ替えも動作するようには思えない - 特に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});
}
});
};
EDIT 2：
動作しません。さらに別のバリエーション！
次のデータが読み込まれます（つまり、.ajax（）呼び出しが動作します）が、次にthis.tが見つかりません。 Googleの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呼び出しが行われていないと私はを取得するページのロードを停止するにはストップを打ったとき「$は、定義されていません$アヤックス（{」放火魔で。
イライラする！
任意のアイデア？