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>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/55f81c79-ac8b-4ba1-9299-e392d80686c3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
