jquery Pie Chart in .net using google API
This sample shows you, how to make pie chart using jquery. The below jquery library file necessary
for making chart. Its free to use.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Write code on server side function calling from jquery.The sample is for asp.net using c#.
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<RetUsers> GetSome()
{
// avoid circual reference(parent child)
List<RetUsers> res = new RetUsers().GetAllUser().Select(c => new RetUsers { User_ID = c.User_ID, User_Name = c.User_Name }).ToList();
return res;
}
public class RetUsers
{
public int User_ID { get; set; }
public string User_Name { get; set; }
public List<RetUsers> GetAllUser()
{
List<RetUsers> lstFood = new List<RetUsers>();
for (int i = 0; i < 5; i++)
{
RetUsers objFood = new RetUsers();
objFood.User_ID = i;
objFood.User_Name = "Food" + i;
lstFood.Add(objFood);
}
return lstFood;
}
}
jquery code on aspx page.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var pie = [];
var data;
$.ajax(
{
type: "POST",
async: true,
url: "CallingServer.aspx/GetSome",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var resultAsJson = msg.d // your return result is JS array
// Now you can loop over the array to get each object
pie.push([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);
// Create the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'User_Name');
data.addColumn('number', 'User_ID');
for (var i in resultAsJson)
{
var user = resultAsJson[i]
var user_name = user.User_Name
data.addRows([['' + user.User_Name + '', user.User_ID]]);
// Here you append that value to your label
}
// Set chart options
var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
);
}
</script>
Add div tag in html
<div id="chart_div"></div>
for making chart. Its free to use.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Write code on server side function calling from jquery.The sample is for asp.net using c#.
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<RetUsers> GetSome()
{
// avoid circual reference(parent child)
List<RetUsers> res = new RetUsers().GetAllUser().Select(c => new RetUsers { User_ID = c.User_ID, User_Name = c.User_Name }).ToList();
return res;
}
public class RetUsers
{
public int User_ID { get; set; }
public string User_Name { get; set; }
public List<RetUsers> GetAllUser()
{
List<RetUsers> lstFood = new List<RetUsers>();
for (int i = 0; i < 5; i++)
{
RetUsers objFood = new RetUsers();
objFood.User_ID = i;
objFood.User_Name = "Food" + i;
lstFood.Add(objFood);
}
return lstFood;
}
}
jquery code on aspx page.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var pie = [];
var data;
$.ajax(
{
type: "POST",
async: true,
url: "CallingServer.aspx/GetSome",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var resultAsJson = msg.d // your return result is JS array
// Now you can loop over the array to get each object
pie.push([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);
// Create the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'User_Name');
data.addColumn('number', 'User_ID');
for (var i in resultAsJson)
{
var user = resultAsJson[i]
var user_name = user.User_Name
data.addRows([['' + user.User_Name + '', user.User_ID]]);
// Here you append that value to your label
}
// Set chart options
var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
);
}
</script>
Add div tag in html
<div id="chart_div"></div>
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home