I've been using Google Drive to store a lot of data in in Google
Spreadsheets so that I can quickly build graphs and such. Piece of cake.
Now, I want to move that data to a database and build a little MVC 4 web
app to serve that data. Piece of cake. Adding Google Charts was also a
piece of cake until I tried to use the AreaChart. Not sure if I have the
data in the right format or what, but I am stumped and need some help. Here
is my code. Perhaps I'm making it too difficult on myself and there's an
easier way. Many thanks.
*ChartController method*
public JsonResult GetAreaChartData()
{
List<string[]> data = new List<string[]>();
data.Add(new[] { "Month", "Bolivia", "Ecuador", "Madagascar", "Papua
New Guinea", "Rwanda" });
data.Add(new[] { "2004/05", "165", "938", "522", "998", "450" });
data.Add(new[] { "2005/06", "135", "1120", "599", "1268", "288" });
return Json(data);
}
*Chart.cshtml*
<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi "></script>
<script type="text/javascript">// <![CDATA[
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.post('/ChartController/GetAreaChartData', {},
function (data) {
var tdata = new google.visualization.DataTable();
var rows = data.length;
var cols = data[0].length;
tdata.addColumn('string', data[0][0]);
for (var i = 0; i < cols; i++)
{
tdata.addColumn('number', data[0][i]);
}
tdata.addRows(data.length);
for (var i = 1; i < data.length; i++)
{
tdata.setCell(i, 0, data[i][0]);
for (var j = 1; j < cols; j++) {
var value = parseInt(data[i][j]);
alert(value);
// Fails ???
tdata.setCell(i, j, data[i][j]);
}
}
var options = {
title: 'Some Text',
isStacked: true,
width: 900,
height: 500,
vAxis: {title: "More Text"},
hAxis: {title: "Date"}
};
var chart = new
google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(tdata, options);
});
}
// ]]></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/XPIZRTkD3rUJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
