CODEWITHSUNDEEP
asp.net-mvcchartsgoogle-visualizationreporting
mustang00
mustang00

Reputation: 313

Google Pie Chart not displaying correctly on view page in Asp.Net MVC

I seem to have a problem with displaying my Google Pie Chart on my view page. It doesn't seem to display the datain the Pie Chart correctly and I'm not entirely sure why, I tried changing around the code for my dataColumn, but it ends up not displaying anything at all. So I reverted back... The query does work, the correct data is being pulled from the database.

I'm still fairly new to reports so if anyone can please suggest a solution I'll greatly appreciate it!

I've done everything in the view using razor syntax. If any additional code is required please let me know.

View Page Code: 

@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.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', 'Orders');
        data.addRows([
            @Html.Raw(rows)]
        );

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

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

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

How the report displays:

enter image description here

Upvotes: 0

Views: 538

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

without seeing the data @Html.Raw(rows) produces, it will be hard to answer for sure.

However, it looks like a String is being for Orders instead of a Number.

I would start by changing:

rowsList.Add("['" + item.Name + "','" + item.Orders + "']");

to:

rowsList.Add("['" + item.Name + "'," + item.Orders + "]");

And:

    data.addColumn('string', 'Name');     
    data.addColumn('string', 'Orders');
    data.addRows([
        @Html.Raw(rows)]
    );

To:

    data.addColumn('string', 'Name');     
    data.addColumn('number', 'Orders');
    data.addRows([
        @Html.Raw(rows)]
    );

Upvotes: 1

Related Questions