生の HTML ファイルで次のコードを正常に使用しています。
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', '2010', '2011', '2012'],
['Jun', 3139285, 3266244, 3121214],
['Jul', 3531094, 3349940, 3214951],
['Aug', 3231183, 3406815, 3335187],
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(
data,
{vAxis: {minValue: 500000, maxValue: 4000000}}
);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 450px; height: 250px;"></div>
</body>
</html>
しかし、Rails サイト ページで次のように同じ手法を使用しようとすると、うまくいきません。
index.html.erb:
<% content_for :head do %>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', '2010', '2011', '2012'],
['Jun', 3139285, 3266244, 3121214],
['Jul', 3531094, 3349940, 3214951],
['Aug', 3231183, 3406815, 3335187],
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(
data,
{vAxis: {minValue: 500000, maxValue: 4000000}}
);
}
</script>
<% end %>
...
<div id="chart_div" style="width: 317px; height: 250px;"></div>
application.html.erb:
<head>
...
<%= yield :head if yield :head %>
...
</head>
ここで何が間違っているのかわかりません。Google Charts API の使用に関して欠けているものはありますか? ドキュメントを読みましたが、これが生の HTML ファイルのように機能しない理由がわかりません。