简体   繁体   中英

Passing data To google Charts From Code Behind

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

// here is My scripting 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);
       }

my HTML code

<form id="form1" runat="server">
   <div>

   </div>
   <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
  </asp:ScriptManager>
  <div id="chart_div" style="width:400; height:300"></div> 
  </form>

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

  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;
    }

}

}

to pass data to google charts from code behind , we have to change our code , and you should create a web-method

how to change the code and how to create web-method ... just check the following link its working fine for me http://www.c-sharpcorner.com/UploadFile/4d9083/how-to-create-google-charts-in-Asp-Net-with-json879/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM