title: passing data to google chart at run time
body: <p>I have been trying to create a google chart. It works if i hard code the value in DrawChart Function but it doesn't work when i pass the value from aspx.cs page, it only gives blank page.
  i don't know where i am making the mistake.
  below is the HTML and C# code</p>
  
  <p>HTML Page </p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart2.aspx.cs" Inherits="CarriageReturn.Chart2" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages':['corechart']});
        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
          // Create the data table.
            $.ajax({
              type: "POST",
              url: "Chart2.aspx/GetChartData()",
              data: '{}',
              contentType: "application/json; charset=utf-8",
              dataType: "json",
                success: function (r) {
               var chartdata = new google.visualization.DataTable();
          chartdata.addColumn('string', 'Topping');
            chartdata.addColumn('number', 'Slices');
  
             chartdata.addRows(r.d);
  
                           // 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(chartdata, options);
               },
              failure: function (r) {
                  alert(r.d);
              },
              error: function (r) {
                  alert(r.d);
              }
            });
        }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
              &lt;div id="chart_div"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>C# Page :</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Configuration;
  using System.Data;
  using System.Data.SqlClient;
  using System.Linq;
  using System.Web;
  using System.Web.Services;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  namespace CarriageReturn
  {
      public partial class Chart2 : System.Web.UI.Page
      {
          public void Page_Load(object sender, EventArgs e)
          {
              GetChartData();
          }
          [WebMethod]
          public static List&lt;object&gt; GetChartData()
          {
              List&lt;object&gt; chartData = new List&lt;object&gt;();
              chartData.Add(new object[] { "Mushrooms", 3 });
              chartData.Add(new object[] { "Onions", 1 });
              chartData.Add(new object[] { "Olives", 1 });
              chartData.Add(new object[] { "Zucchini", 1 });
              chartData.Add(new object[] { "Pepperoni", 1 });
              return chartData;
  
  
          }
      }
  }
  </code></pre>
  
  <p>i need to pass the value to chart from database.                                                                                   </p>