CODEWITHSUNDEEP
javascriptajaxasp.net-mvcasp.net-web-apigoogle-visualization
dave
dave

Reputation: 200

How to convert List<MyModel> into Google API datatable

There are no errors and ajax is able to make a successful call and return data from GetData(). I am using Google Charts API.

Question: How can I convert List<MyModel> into Google API datatable?

Issue: Google Charts API - takes data in the following format

var data = new google.visualization.DataTable();
data.addColumn('string', 'First_name ');
data.addColumn('string', 'Salary');
data.addColumn('boolean', 'Full_Time_Employee ');
data.addRows([
    ['Mike', '$10,000', true],
    ['Jim', '$8,000', false],
    ['Alice', '$12,500', true],
    ['Bob', '$7,000', true]
]);

But when I get data from the database, it doesn't display anything because the formatting is not the same on the line return Json(graphData);

{ First_Name = "Mike", Salary= "10000",  Full_Time_Employee = true }

Controller:

public async Task<IActionResult> GetData()
{
    try
    {
        // query data  
        IQueryable<MyModel> query = (IQueryable<MyModel>)(from x in _context1.CourseTaken_DbSet
                                               select x);
        //load data
        List<MyModel> graphData = await query.AsNoTracking().Take(100).ToListAsync();
        // return json data to google charts api
        return Json(graphData);
    }
    catch (Exception ex)
    {
        Console.Write(ex);
    }
    return View();
}

Front-end:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["table"] });
    google.setOnLoadCallback(drawChart01);
    function drawChart01() {
        alert('testing1');
    var googleApiClass = {
        'headerRow': 'header-style',
        'tableCell': 'table-rows'
    };
    var options = {
        title: 'Total',
        'is3D': true,
        'width': '100%',
        'height': '100%',
        cssClassNames: googleApiClass
    };
    $.ajax({
        type: "POST",
        url: "/Home/GetData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            alert("sucess" + r.d);
            var data = new google.visualization.arrayToDataTable(r.d);
            var chart = new google.visualization.Table($("#Chart01Div")[0]);
            chart.draw(data, options);
        },
        failure: function (r) {
            alert("Failure: " + r.d);
        },
        error: function (r) {
            alert("Error: " + r.d);
        }
    });
} //end of drawChart01 function

I also tried the following but this returns:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],

success: function (r) {
   alert(r);
    var data = new google.visualization.arrayToDataTable(r);
    var chart = new google.visualization.Table($("#Chart01Div")[0]);
    chart.draw(data, options);
},

Upvotes: 1

Views: 56

Answers (1)

Yong Shun
Yong Shun

Reputation: 51485

You can perform the data conversion from the list of objects to a two-dimension array on JavaScript side as below:

var data = new google.visualization.DataTable();
data.addColumn('string', 'First_name');
data.addColumn('string', 'Salary');
data.addColumn('boolean', 'Full_Time_Employee');
            
var rows = [];
$.each(r, function (i, obj) {
    rows.push([obj.First_Name, obj.Salary, obj.Full_Time_Employee]);
});
data.addRows(rows);
                        
var chart = new google.visualization.Table($("#Chart01Div")[0]);
chart.draw(data, options);

Demo MVC @ .NET Fiddle

Upvotes: 1

Related Questions