Remove From My Forums

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

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