My Google Pie Chart is displaying no data even though query works . ASP.NET MVC

Question

I struggling with trying to figure out why my Google Pie Chart is failing to display the data even though my query works perfectly in the Query builder when I tested it.

I'm still pretty new to this and I have a basic understanding but I can't seem to spot the problem? If anyone can help me with a solution I'll greatly appreciate it. I'm currently developing in ASP.NET MVC and I'm running everything off my view page using Razor for this report. If anyone needs additional code, please let me know and thanks in advance.

@using WebMatrix.Data;
@using WebMatrix.WebData;


@{
    var db = Database.Open("HealthContext");

    String rows = "";

    var Query = ("SELECT Hospital.Name,Hospital.Province,Count([Order].OrderID) AS Orders FROM Hospital,[Order] WHERE Hospital.HospitalID = [Order].HospitalID GROUP BY Hospital.Name,Hospital.Province;");

    var AppQuery = db.Query(Query);


    List<string> rowsList = new List<string>();

    foreach (var item in AppQuery)
    {
        rowsList.Add("['" + item.Name + "', '" + item.Province + "','" + item.Orders + "']");


    };

    rows = String.Join(", ", rowsList);

    }

<h2>PieChart1</h2>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Name');

        data.addColumn('string', 'Province');

        data.addColumn('number', 'Orders');
        @Html.Raw(rows);

        var options = {
            title: 'Orders Per Hospital'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }
</script>

Answer 1

I think you are just outputting your row data into your drawChart() function without actually specifying it as data for the DataTable.

Try:

data.addRows([
    @Html.Raw(rows)
]);

I haven't actually used Google's visualization API, but I'm going based on: https://developers.google.com/chart/interactive/docs/reference#DataTable