Thursday 29 November 2012

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>  

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home