1. Home
2. asp.net
3. Google Charts with ASP.NET using jQuery C Sharp

Google Charts with ASP.NET using jQuery C Sharp

Category > ASP.NET || Published on : Thursday, June 4, 2015 || Views: 6415 || Google Charts with ASP.NET using jQuery C Sharp Google Charts with ASP.NET using jQuery C Sharp Google Charts with ASP.NET using jQuery C Sharp

Step 1: Place these below codes in Head Section of the ASP.NET Page

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    <script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
    <script src="//cdn.jsdelivr.net/chart.js/0.2/Chart.js" type="text/javascript"></script>
    

Step 2: In the HTML Body, Place these codes(Below)

    <div id="dvChart">
                            </div> <div id="dvLegend">
                            </div>

Step 3: Place below javascript at the end of the body html tag

<script type="text/javascript">
      $(document).ready(function () {
          LoadChart();
      });
      function LoadChart() {
          var chartType = "Pie";
          $.ajax({
              type: "POST",
              url: "CS.aspx/GetChart",
              data: "{country: 'France'}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (r) {
                  $("#dvChart").html("");
                  $("#dvLegend").html("");
                  var data = eval(r.d);
                  var el = document.createElement('canvas');
                  $("#dvChart")[0].appendChild(el);

                  //Fix for IE 8
                  if ($.browser.msie && $.browser.version == "8.0") {
                      G_vmlCanvasManager.initElement(el);
                  }
                  var ctx = el.getContext('2d');
                  var userStrengthsChart;




                  userStrengthsChart = new Chart(ctx).Pie(data);


                  for (var i = 0; i < data.length; i++) {
                      var div = $("<div />");
                      div.css("margin-bottom", "10px");
                      div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + data[i].color + "'></span> " + data[i].text);
                      $("#dvLegend").append(div);
                  }
              },
              failure: function (response) {
                  alert('There was an error.');
              }
          });
      }
    </script>

Step 4: Write the following codes in the Code Behind file as below

[WebMethod]
    public static string GetChart()
    {
        string constr = ConfigurationManager.ConnectionStrings["NothwindString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            string query = string.Format("select shipcity, count(orderid) from orders where shipcountry = 'France' group by shipcity");
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = query;
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    StringBuilder sb = new StringBuilder();
                    sb.Append("[");
                    while (sdr.Read())
                    {
                        sb.Append("{");
                        System.Threading.Thread.Sleep(50);
                        string color = String.Format("#{0:X6}", new Random().Next(0x1000000));
                        sb.Append(string.Format("text :'{0}', value:{1}, color: '{2}'", sdr[0], sdr[1], color));
                        sb.Append("},");
                    }
                    sb = sb.Remove(sb.Length - 1, 1);
                    sb.Append("]");
                    con.Close();
                    return sb.ToString();
                }
            }
        }
    }

Please add the "using System.Web.Services;" namespace

enjoy!!!!!

You might also like