I am trying to bind data dynamically to pie chart, but its not working. Here's my code:
function drawChart() {
$.ajax({
url: "list",
dataType: "json",
success: function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'cName');
data.addColumn('int', 'share');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].cName, jsonData[i].share]);
}
var options = {
title: 'Certificate details',
backgroundColor: '#e9e9e9'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});}
function:
public JsonResult list()
{
int regId = getUserId(Session["username"].ToString());
var result = (from e in db.share_bought_history
where e.regist_id == regId
group e by e.comapnay_id into companies
select new
{
cName = companies.FirstOrDefault().company.company_name,
share = companies.Sum(x => x.no_of_sahre)
});
return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}
I also try to pass direct DataTable but same issue (nothing shows) Here's code:
function drawChart() {
$.ajax({
url: "list",
dataType: "json",
success: function (jsonData) {
var options = {
title: 'Certificate details',
backgroundColor: '#e9e9e9'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(jsonData, options);
}
});
Function:
public JsonResult list()
{
DataTable dataTable = new DataTable("pie");
dataTable.Columns.Add("cName", typeof(System.String));
dataTable.Columns.Add("share", typeof(System.Int16));
int regId = getUserId(Session["username"].ToString());
var result = (from e in db.share_bought_history
where e.regist_id == regId
group e by e.comapnay_id into companies
select new
{
cName = companies.FirstOrDefault().company.company_name,
share = companies.Sum(x => x.no_of_sahre)
});
foreach (var item in result)
{
DataRow row = dataTable.NewRow();
row[0] = item.cName;
row[1] = item.share;
dataTable.Rows.Add(row);
}
return Json(dataTable, JsonRequestBehavior.AllowGet);
}
and don't understand what's the problem because when i manually pass data (static) pie chart shows perfectly. like:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
backgroundColor: '#e9e9e9'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
use the first snippet above...
change 'int'
to 'number'
...
data.addColumn('number', 'share');