title: Passing data To google Charts From Code Behind
body: <p>i am a newbie i was developing a project on ASP.net Which Requires Google Charts API to Produce Some Charts , all went fine when i am using static data in google charts , Problem is i want to pass data fetched from Code Behind Page(.cs Page) how can i do that</p>
  
  <p>// here is My scripting Code</p>
  
  <pre><code>var res;
     function GetCityValue() {
         PageMethods.GetCity("USA", onSucceeded, onFailed);
       }
         function onSucceeded(result)
         {
  
           res=result; 
         }
         function onFailed(error)
         {
             return 0;
         }
  
  
  
  
     // Google chart API
  
         // 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() {
  
             // Create the data table.
             var data = new google.visualization.DataTable();
             data.addColumn('string', 'Topping');
             data.addColumn('number', 'Slices');
  
             GetCityValue();
  
             data.addRows([
      ['Mushrooms', res],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);
  
             // 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);
         }
  </code></pre>
  
  <p>my HTML code</p>
  
  <pre><code>&lt;form id="form1" runat="server"&gt;
     &lt;div&gt;
  
     &lt;/div&gt;
     &lt;asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"&gt;
    &lt;/asp:ScriptManager&gt;
    &lt;div id="chart_div" style="width:400; height:300"&gt;&lt;/div&gt; 
    &lt;/form&gt;
  </code></pre>
  
  <p>and here is my Code Behind Page (.cs page)
  i think there is no need of showing my .CS code but here is the code</p>
  
  <pre><code>  namespace pageMethodsAndWebMethods
   {
     public partial class jscript : System.Web.UI.Page
     {
         protected void Page_Load(object sender, EventArgs e)
         {
  
         }
      [System.Web.Services.WebMethod()]
      public static int GetCity(String strCountry)
      {
          int strCity = 0;
          if (strCountry == "USA")
              strCity = 2;
          else
              strCity = 1;
          return strCity;
      }
  
  }
  </code></pre>
  
  <p>}</p>