locked
Google Charts works only when I put a break point in WebMethod RRS feed

  • Question

  • User-1971168174 posted

    Hi ,

    I am using google charts to plot histogram on button click ...I am not able to find why its plotting the chart only when i put a break point anywhere in my WebMethod.... its working fine with breakpoint but not working without debugging 

    Need help.Below is my code , thanks in advance 

    aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="histrogram_google.aspx.cs" Inherits="histrogram_google" %>
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
          <title>Histogram | </title>
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
          
             
        
        
    
        
        <script type="text/javascript">
    
            // Global variable to hold data
            // Load the Visualization API and the piechart package.
            google.charts.load("current", { packages: ["corechart"] });
            
        </script>
          
        <script type="text/javascript">
            function DrawHistogram(message_graph) {
                debugger;
                $.ajax({
    
    
    
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "histrogram_google.aspx/GethistogramchartData",
                    data: "{ 'condition': '" + message_graph + "'}",
                    dataType: "json",
    
                    success: function (response) {
                     //   debugger;
                        drawchart(response.d); // calling method
                    },
    
                    error: function () {
                        alert("Error loading data! Please try again.");
                    }
                });
            }
    
            function drawchart(dataValues) {
                // Callback that creates and populates a data table,
                // instantiates the pie chart, passes in the data and
                // draws it.
                debugger;
                var data = new google.visualization.DataTable();
    
                data.addColumn('string', 'Name');
                data.addColumn('number', 'Value');
                //debugger;
                //for (var i = 0; i < dataValues.length; i++) {
                //    data.addRow([dataValues[i].PlanName, dataValues[i].PaymentAmount]);
                //}
                for (i = 0; i < dataValues.length; i++) {
                    data.addRow([dataValues[i].PlanName, dataValues[i].PaymentAmount]);
                    
                }
                // Instantiate and draw our chart, passing in some options
                debugger;
                var options = {
                    
                   
                    title: 'Histogram ( test )',
                    legend: { position: 'none' },
                   /// title: 'Hello',
                    titleTextStyle: {
                        color: '#111110',
                        
                        fontSize: 18
                       
                    }
    
                };
    
                var chart = new google.visualization.Histogram(document.getElementById('regions_div'));
                chart.draw(data, options);
    
    
            }
        </script>
    
           
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class="row">
                <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
                 <div id="regions_div" ></div>
            </div>
        </div>
        </form>
    </body>
    </html>
    

    aspx.cs

    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;
    
    public partial class histrogram_google : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
        #region // web method for filling and passing data to histogram
        [WebMethod]
        public static List<ChartDetails> GethistogramchartData()
        {
    
            DataTable dt = new DataTable();
            dt.Columns.Add("PlanName", typeof(string));
            dt.Columns.Add("PaymentAmount", typeof(double));
    
    
            // Here we add five DataRows.
            dt.Rows.Add("A1", 0.825);
            dt.Rows.Add("A2", 0.842);
            dt.Rows.Add("A3", 0.846);
            dt.Rows.Add("A4", 0.864);
            dt.Rows.Add("A5", 0.868);
            dt.Rows.Add("A6", 0.87);
            dt.Rows.Add("A7", 0.873);
            dt.Rows.Add("A8", 0.881);
            dt.Rows.Add("A9", 0.881);
            dt.Rows.Add("A10", 0.882);
           
           
    
    
    
    
            List<ChartDetails> dataList = new List<ChartDetails>();
    
            foreach (DataRow dtrow in dt.Rows)
            {
                ChartDetails details = new ChartDetails();
                details.PlanName = dtrow[0].ToString();
                details.PaymentAmount = Convert.ToDouble(dtrow[1]);
    
                dataList.Add(details);
            }
            return dataList;
    
        }
    
    
        public class ChartDetails
        {
            public string PlanName { get; set; }
            public double PaymentAmount { get; set; }
        }
    
        #endregion    
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            string message_graph = "";
            Page.ClientScript.RegisterStartupScript(this.GetType(), "reset3", " DrawHistogram('" + message_graph + "');", true);
        }
    }

    Thanks

    Wednesday, December 26, 2018 9:53 AM

Answers

  • User-1174608757 posted

    Hi NWRITER,

    According to your code. I have made a sample here. I suggest you to  put the method  "drawchart(response.d)" in the   function google.charts.setOnLoadCallback( )

    because  google.visualization.DataTable() couldn't be used directly unless it is in the onLoadCallback function. Here is my demo. I hope it can help you.

    google.aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
       
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                 
        
        <script type="text/javascript">
    
            // Global variable to hold data
            // Load the Visualization API and the piechart package.
            google.charts.load("current",{ packages: ["corechart"] });
            
        </script>
          
        <script type="text/javascript">
          
            function DrawHistogram(message_graph) {
                debugger;
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "web.asmx/GethistogramchartData",
                    data: "{ 'condition': '" + message_graph + "'}",
                    dataType: "json",
                    success: function (response) {
                        //   debugger;
                        google.charts.setOnLoadCallback(function () {
                         drawchart(response.d);
                        })
                         // calling method
                    },
    
                    error: function () {
                        alert("Error loading data! Please try again.");
                    }
                });
            }
        
            function drawchart(dataValues) {
                // Callback that creates and populates a data table,
                // instantiates the pie chart, passes in the data and
                // draws it.
                debugger;
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Name');
                data.addColumn('number', 'Value');
                //debugger;
                //for (var i = 0; i < dataValues.length; i++) {
                //    data.addRow([dataValues[i].PlanName, dataValues[i].PaymentAmount]);
                //}
                for (var i = 0; i < dataValues.length; i++) {
                    data.addRow([dataValues[i].PlanName, dataValues[i].PaymentAmount]);
                    
                }
                // Instantiate and draw our chart, passing in some options
                debugger;
                var options = {  
                    title: 'Histogram ( test )',
                    legend: { position: 'none' },
                   /// title: 'Hello',
                    titleTextStyle: {
                        color: '#111110',
                        
                        fontSize: 18                  
                    }
    
                };
    
                var chart = new google.visualization.Histogram(document.getElementById('regions_div'));
                chart.draw(data, options);
    
    
                }
          
        </script>
    
           
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class="row">
                <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
                 <div id="regions_div" ></div>
            </div>
        </div>
        </form>
    </body>
    </html>

    google.aspx.cs:

     public partial class google : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
            protected void Button1_Click(object sender, EventArgs e)
            {
                string message_graph = "";
                Page.ClientScript.RegisterStartupScript(this.GetType(), "reset3", " DrawHistogram('" + message_graph + "');", true);
            }
        }

    web.asmx:

    [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
         [System.Web.Script.Services.ScriptService]
        public class web : System.Web.Services.WebService
        {
            public class ChartDetails
            {
                public string PlanName { get; set; }
                public double PaymentAmount { get; set; }
            }
    
            [WebMethod]
            public  List<ChartDetails> GethistogramchartData()
            {      
                DataTable dt = new DataTable();
                dt.Columns.Add("PlanName", typeof(string));
                dt.Columns.Add("PaymentAmount", typeof(double));
                // Here we add five DataRows.
                dt.Rows.Add("A1", 0.825);
                dt.Rows.Add("A2", 0.842);
                dt.Rows.Add("A3", 0.846);
                dt.Rows.Add("A4", 0.864);
                dt.Rows.Add("A5", 0.868);
                dt.Rows.Add("A6", 0.87);
                dt.Rows.Add("A7", 0.873);
                dt.Rows.Add("A8", 0.881);
                dt.Rows.Add("A9", 0.881);
                dt.Rows.Add("A10", 0.882);
    
    
                List<ChartDetails> dataList = new List<ChartDetails>();
    
                foreach (DataRow dtrow in dt.Rows)
                {
                    ChartDetails details = new ChartDetails();
                    details.PlanName = dtrow[0].ToString();
                    details.PaymentAmount = Convert.ToDouble(dtrow[1]);
    
                    dataList.Add(details);
                }
                return dataList;
    
            }
        }

    It works well as below:

    Best Regards

    Wei Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 27, 2018 5:01 AM

All replies

  • User-1174608757 posted

    Hi NWRITER,

    According to your code. I have made a sample here. I suggest you to  put the method  "drawchart(response.d)" in the   function google.charts.setOnLoadCallback( )

    because  google.visualization.DataTable() couldn't be used directly unless it is in the onLoadCallback function. Here is my demo. I hope it can help you.

    google.aspx:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
       
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                 
        
        <script type="text/javascript">
    
            // Global variable to hold data
            // Load the Visualization API and the piechart package.
            google.charts.load("current",{ packages: ["corechart"] });
            
        </script>
          
        <script type="text/javascript">
          
            function DrawHistogram(message_graph) {
                debugger;
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "web.asmx/GethistogramchartData",
                    data: "{ 'condition': '" + message_graph + "'}",
                    dataType: "json",
                    success: function (response) {
                        //   debugger;
                        google.charts.setOnLoadCallback(function () {
                         drawchart(response.d);
                        })
                         // calling method
                    },
    
                    error: function () {
                        alert("Error loading data! Please try again.");
                    }
                });
            }
        
            function drawchart(dataValues) {
                // Callback that creates and populates a data table,
                // instantiates the pie chart, passes in the data and
                // draws it.
                debugger;
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Name');
                data.addColumn('number', 'Value');
                //debugger;
                //for (var i = 0; i < dataValues.length; i++) {
                //    data.addRow([dataValues[i].PlanName, dataValues[i].PaymentAmount]);
                //}
                for (var i = 0; i < dataValues.length; i++) {
                    data.addRow([dataValues[i].PlanName, dataValues[i].PaymentAmount]);
                    
                }
                // Instantiate and draw our chart, passing in some options
                debugger;
                var options = {  
                    title: 'Histogram ( test )',
                    legend: { position: 'none' },
                   /// title: 'Hello',
                    titleTextStyle: {
                        color: '#111110',
                        
                        fontSize: 18                  
                    }
    
                };
    
                var chart = new google.visualization.Histogram(document.getElementById('regions_div'));
                chart.draw(data, options);
    
    
                }
          
        </script>
    
           
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class="row">
                <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
                 <div id="regions_div" ></div>
            </div>
        </div>
        </form>
    </body>
    </html>

    google.aspx.cs:

     public partial class google : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
            protected void Button1_Click(object sender, EventArgs e)
            {
                string message_graph = "";
                Page.ClientScript.RegisterStartupScript(this.GetType(), "reset3", " DrawHistogram('" + message_graph + "');", true);
            }
        }

    web.asmx:

    [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
         [System.Web.Script.Services.ScriptService]
        public class web : System.Web.Services.WebService
        {
            public class ChartDetails
            {
                public string PlanName { get; set; }
                public double PaymentAmount { get; set; }
            }
    
            [WebMethod]
            public  List<ChartDetails> GethistogramchartData()
            {      
                DataTable dt = new DataTable();
                dt.Columns.Add("PlanName", typeof(string));
                dt.Columns.Add("PaymentAmount", typeof(double));
                // Here we add five DataRows.
                dt.Rows.Add("A1", 0.825);
                dt.Rows.Add("A2", 0.842);
                dt.Rows.Add("A3", 0.846);
                dt.Rows.Add("A4", 0.864);
                dt.Rows.Add("A5", 0.868);
                dt.Rows.Add("A6", 0.87);
                dt.Rows.Add("A7", 0.873);
                dt.Rows.Add("A8", 0.881);
                dt.Rows.Add("A9", 0.881);
                dt.Rows.Add("A10", 0.882);
    
    
                List<ChartDetails> dataList = new List<ChartDetails>();
    
                foreach (DataRow dtrow in dt.Rows)
                {
                    ChartDetails details = new ChartDetails();
                    details.PlanName = dtrow[0].ToString();
                    details.PaymentAmount = Convert.ToDouble(dtrow[1]);
    
                    dataList.Add(details);
                }
                return dataList;
    
            }
        }

    It works well as below:

    Best Regards

    Wei Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 27, 2018 5:01 AM
  • User-1971168174 posted

    Thanks Wei Zhang.

    Thursday, December 27, 2018 11:23 AM