Благодаря andyg1 и Ascendant я смог заставить его работать так (используя PrototypeJS, а не jQuery, но идея та же). Поскольку это совсем не очевидно, я собираюсь показать все шаги.
Конечная точка Ajax просто возвращает json и выглядит следующим образом (шаблон .NET MVC). Обратите внимание, что я обнаружил, что должен был процитировать все, что документация Google не предлагает, необходимо:
<%
Response.Headers.Add("Content-type", "text/json");
Response.AddHeader("Content-type", "application/json");
%>
{
"cols": [
{"id": "col_1", "label": "Date", "type": "string"},
{"id": "col_2", "label": "Score", "type": "number"}
],
"rows": [
<%
int index = 0;
foreach(KeyValuePair<string, double> item in Model.Performance ) { %>
{"c":[{"v":"<%= item.Key %>"}, {"v":<%= item.Value %>}]}<%= (index == Model.Performance.Count - 1) ? "" : "," %>
<% index++; %>
<%
}
%>
]
}
Тогда главная страница содержала это:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/js/myJavascriptFile.js" />
Затем в myJavascriptFile.js (обратите внимание, что последняя строка метода initialize - это google.setOnLoadCallback, который вызывает метод в моем классе, а не drawChart):
google.load('visualization', '1', {'packages':['corechart']});
var colors = {'blue': '#369', 'red': '#c22', 'green': '#283', 'yellow': '#c91'};
var MyClass = Class.create({
initialize: function() {
...
google.setOnLoadCallback(this.getTeamCharts);
},
getTeamCharts: function () {
$$(".chart-wrapper").each(function (div) {
var chartData = div.getData();
var parameters = {
...
};
new Ajax.Request('/endpoints/TeamChart.aspx', {
method: 'get',
parameters: parameters,
onSuccess: function(transport) {
var jsonData = transport.responseJSON;
var data = new google.visualization.DataTable(jsonData);
var chartColor = colors[parameters.TeamColor];
var chartDivId = 'chart_div_' + parameters.TeamIdAsString;
// Set chart options
var options = {
'chartArea': {'left':'15%','top':'15%','width':'80%','height':'70%'},
'legend': {'position': 'none'},
'lineWidth': 3,
'width': 262,
'height': 180,
'colors': [chartColor]
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
chart.draw(data, options);
}
});
});
}
});
document.observe("dom:loaded", function () {
var thing = new MyClass();
});
Я уверен, что это может быть улучшено, но это работает!