Loading data to data.addrows(chartData) MVC ASP.net

67 views
Skip to first unread message

Simon Roberts

unread,
Sep 9, 2016, 4:43:34 AM9/9/16
to Google Visualization API
Im having issues pulling data into the rows for my dashboard, Ive created a controller which pulls data from a MSSQL Table -

using (ApplicationDbContext db = new ApplicationDbContext())
            {
                data = (
                    from u in db.StaffReportingDay
                    select new StaffReportingDayVM
                    {
                        Date = u.Date.ToString(),
                        AnnualLeave = u.AnnualLeave,
                        CompassionateLeave = u.CompassionateLeave,
                        Sick = u.Sick,
                        StudyLeave = u.StudyLeave,
                        Total = u.Total
                        }).ToList();
                    }


            var ChartOne = new object[data.Count + 1];
            ChartOne[0] = new object[]
            {
                "Date",
                "Annual Leave",
                "Sick Leave",
                "Total on Leave"
            };

            int j = 0;

            foreach(var i in data)
            {
                j++;
                ChartOne[j] = new object[] {i.Date, i.AnnualLeave, i.Sick, i.Total, i.CompassionateLeave, i.StudyLeave };
            }


            return Json(ChartOne, JsonRequestBehavior.AllowGet);

I then pull that data into the view -

 var chartData;
    google.load('visualization', '1', { packages: ['controls'] });
    google.setOnLoadCallback(createTable);

    $(document).ready(function () {

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

    function createTable() {
        // Create the dataset (DataTable)
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'AnnualLeave');
        data.addColumn('number', 'CompassionateLeave');
        data.addColumn('number', 'StudyLeave');
        data.addColumn('number', 'Total');
        //data.addRows(chartData);
        data.setCell(chartData);
       

        

        // Create a dashboard.
        var dash_container = document.getElementById('dashboard_div'),
          myDashboard = new google.visualization.Dashboard(dash_container);

        // Create a date range slider
        var myDateSlider = new google.visualization.ControlWrapper({
            'controlType': 'ChartRangeFilter',
            'containerId': 'control_div',
            'options': {
                'filterColumnLabel': 'Date'
            }
        });

        // Table visualization
        var myTable = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'table_div'
        });

        // Bind myTable to the dashboard, and to the controls
        // this will make sure our table is update when our date changes
        myDashboard.bind(myDateSlider, myTable);

        // Line chart visualization
        var myLine = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'line_div',
        });

        // Bind myLine to the dashboard, and to the controls
        // this will make sure our line chart is update when our date changes
        myDashboard.bind(myDateSlider, myLine);

        myDashboard.draw(myData);
    }
</script>

<div id="dashboard_div">
    <div id="control_div"><!-- Controls renders here --></div>
    <div id="line_div"><!-- Line chart renders here --></div>
    <div id="table_div"><!-- Table renders here --></div>
</div>

I get errors when using either data.addrows(chartData)




 or data.setcell(chartData)


Can some one please point me in the right direction? Ive been going around in circles for a couple of days.


Thanks


Simon




Reply all
Reply to author
Forward
0 new messages