Cannot get charts to render

13 views

Skip to first unread message

Simon Roberts

unread,

Jul 21, 2016, 10:41:53 AM7/21/16

to Google Visualization API

Hello All,

Im trying to use google charts in my .net MVC app, heres what i have below, for the life in me the charts will not render, however data is being pulled from the DB and the array can be seen created in chrome dev tools (attached image.), Can some one help me with it not rendering at all, i just get a blank screen where the chart should load.

Controller-

public ActionResult Index()
{
return View();
}

[AllowAnonymous]
public JsonResult GetChartData()
{
List<CalendarData> data = new List<CalendarData>();
using (ApplicationDbContext dc = new ApplicationDbContext())
{
data = dc.CalendarData.ToList();
}
var chartData = new object[data.Count + 1];
chartData[0] = new object[]
{
"LeaveType"
};
int j = 0;
foreach (var i in data)
{
j++;
chartData[j] = new object[] { i.LeaveType.ToString(), };
}
return Json(chartData, JsonRequestBehavior.AllowGet);
}

and heres the view -

<html>
<head>
<title>Title of the document</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"></script>

<script>
var chartData; // globar variable for hold chart data
google.charts.load('current', { packages: ['corechart'] });

// Here We will fill chartData

$(document).ready(function () {

$.ajax({
url: "/Reporting/GetChartData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
// after complete loading data
google.charts.setOnLoadCallback(drawChart);
drawChart();
});
});

function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);

var options = {
title: "Staff on Leave",
pointSize: 5
};

var lineChart = new google.visualization.LineChart(document.getElementById('chart_div'));
lineChart.draw(data, options);

}

</script>
</head>

<body>
<h2>Staffing Reports</h2>
<hr />
<div id="chart_div" style="width: 900px; height: 500px"></div>
</body>
</html>