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
