Populate Google Pie chart from Database Data returned by WebService in ASP.Net

Hi Mohammadmk,

Forst you need to return a valid json string from webservice.

Then change your code with the below code.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                url: "WebServices/PropertiesCount.asmx/BinaChart",
                data: '{}',
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            }).done(function (data) {
                var info = new google.visualization.DataTable();
                info.addColumn('string', 'PropertiesOwner');
                info.addColumn('number', 'PropertyCount');
                var json = JSON.parse(data.d);
                json.forEach(function (row) {
                    info.addRow([row.PropertiesOwner, row.PropertyCount]);
                });
                var options = {
                    'title': 'How Much Pizza I Ate Last Night',
                    'width': 400,
                    'height': 300
                };
                var chart = new google.visualization.PieChart(document.getElementById('divChart'));
                chart.draw(info, options);
            }).fail(function (err) {
                console.log(err);
            });
        }
    });
</script>
<div id="divChart" style="width: 900px; height: 500px;">
</div>

Valid Json String

[
{
"PropertyCount": 1,
"PropertyOwner": "name one"
},
{
"PropertyOwner": "name two",
"PropertyCount": 8
},
{
"PropertyOwner": "name three",
"PropertyCount": 1
},
{
"PropertyOwner": "name four",
"PropertyCount": 5
},
]

WebService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for PropertiesCount
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class PropertiesCount : System.Web.Services.WebService {

    public PropertiesCount () {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string BinaChart()
    {
        return "[{\"PropertyOwner\": \"name one\",\"PropertyCount\": 1},{\"PropertyOwner\": \"name two\",\"PropertyCount\": 8},{\"PropertyOwner\": \"name three\",\"PropertyCount\": 1},{\"PropertyOwner\": \"name four\",\"PropertyCount\": 5}]";
    }    
}

Screenshot