locked
google maps not working correclty inside update panel RRS feed

  • Question

  • User1804579801 posted

    When I was having a single google chart with the filter it was working as expected but when i added one more chart with a filter then only one chart is working correctly 

    I have used 

     My google charts   Code
    
    <script type="text/javascript">
            function pageLoad()
            {
                google.charts.load('current', {
                    packages: ['corechart'],
                    callback: function () {
                        drawStacked_bodies();
                    }
                });
                function drawStacked_bodies() {
                    var options = {
                        title: 'Target Status of Inspection Bodies Visits',
                        backgroundColor: '#ffffff',
                        hAxis: {
                            //textPosition: 'none'
                            format: 'decimal',
                            textStyle: {
                                fontSize: 0
                            },
                        },
                        // colors: ['#0054a6', '#c54444', '#28b690', '#28b690'],
                        colors: ['#0054A6', '#EA71A4', '#28b690', '#C54444'],
                        legend: {
                            position: 'bottom',
                            maxLines: 4
                        },
                        chartArea: {
                            left: 5,
                            top: 20,
                            width: '100%',
                            height: '370',
                        }
                    };
                    $.ajax({
                        type: "POST",
                        url: "sic_dashboard.aspx/GetInsepectionBodiesTarget",
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            var data = google.visualization.arrayToDataTable(r.d);
    
                            var chart = new google.visualization.ColumnChart(document.getElementById('container-main3'));
    
                            chart.draw(data, options);
    
                        },
                        failure: function (r) {
                            //alert(r.d);
                        },
                        error: function (r) {
                            // alert(r.d);
                        }
                    });
                }
    
                google.charts.load('current', {
                    packages: ['corechart'],
                    callback: function () {
                        drawStacked_bodies_4();
                    }
                });
    
                function drawStacked_bodies_4() {
                    var options = {
                        title: 'CCI Category-Wise Inspection Body Visit',
                        backgroundColor: '#ffffff',
                        hAxis: {
                            //textPosition: 'none'
                            format: 'decimal',
                            textStyle: {
                                fontSize: 0
                            },
                        },
                        // colors: ['#0054a6', '#c54444', '#28b690', '#28b690'],
                        colors: ['#0054A6', '#EA71A4', '#28b690', '#C54444'],
                        legend: {
                            position: 'bottom',
                            maxLines: 4
                        },
                        chartArea: {
                            left: 5,
                            top: 20,
                            width: '100%',
                            height: '370',
                        }
                    };
                    $.ajax({
                        type: "POST",
                        url: "sic_dashboard.aspx/GetCCIInsepectionBodiesVisit",
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            var data = google.visualization.arrayToDataTable(r.d);
    
                            var chart = new google.visualization.ColumnChart(document.getElementById('container-main4'));
    
                            chart.draw(data, options);
    
                        },
                        failure: function (r) {
                            //alert(r.d);
                        },
                        error: function (r) {
                            // alert(r.d);
                        }
                    });
                }
            }
            //extract the code executed in the jQuery loading event, and then execute the jQuery initialization code once after each updatepanel local refresh by capturing the EndRequest event of the ScriptManager
            //to solve update panel issue
    
            //Initial bind
            pageLoad();
            //Re-bind for callbacks
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(function () {
                pageLoad();
            });
        </script>
    
    This works only for first chart i.e., this method "drawStacked_bodies()" but for second chart it disappers whole chart and reload once again 

    Friday, January 31, 2020 12:28 PM

All replies

  • User-719153870 posted

    Hi nagapavanich,

    This works only for first chart i.e., this method "drawStacked_bodies()" but for second chart it disappers whole chart and reload once again 

    This problem can not be reroduced with above code.

    Here are some suggestions to solve the problem:

    1. You can provide us the complete code including the back code so that we can reproduce the problem and help solve it.
    2. You can create a new page with the function drawStacked_bodies_4() and sic_dashboard.aspx/GetCCIInsepectionBodiesVisit see if you can reproduce the problem by yourself.
    3. Press F12 to open the browser devtools see if you met any error message in the Console and share with us if met.

    Best Regard,

    Yang Shen

    Monday, February 3, 2020 3:01 AM
  • User1804579801 posted
    My design code i.e aspx page code
    <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <div class="row mt-5" id="sicdash_cci_inspections"> <div class="col-md-12"> <div class="create-new-instru"> <div class="div-headi"> <div class="row"> <div class="col-md-8"> <div class="div-headi-inner"> <h4>CCI Category-Wise Inspection Body Visit</h4> </div> </div> <div class="col-md-4"> <div class="div-headi-inner-filter"> <div class="row"> <div class="que-no-left mt-2"> <label class="control-label">Select Type of Filter:</label> </div> <div class="col-sm"> <div class="input-group"> <asp:DropDownList ID="ddl_CCI_FilterType" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddl_CCI_FilterType_SelectedIndexChanged"> </asp:DropDownList> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="homeg"> <div class="table-responsive"> <asp:Repeater ID="Repeater_cciInspection" runat="server" OnItemDataBound="Repeater_cciInspection_ItemDataBound"> <HeaderTemplate> <table id="example" class="table alert-master"> <thead> <tr> <th>CCI Category</th> <th>CCI Type</th> <%--<th>Gender</th>--%> <th width="4%">Active</th> <th width="4%">Target</th> <th width="4%">Completed</th> <th width="4%">Pending</th> <th width="4%">Percentage</th> </tr> </thead> </HeaderTemplate> <ItemTemplate> <tbody> <tr> <td><%# DataBinder.Eval(Container, "DataItem.Category")%> <asp:Label ID="lbl_CCI_CategoryId" Text='<%# DataBinder.Eval(Container, "DataItem.CategoryId")%>' runat="server" Visible="false" /> </td> <td><%# DataBinder.Eval(Container, "DataItem.ChildType")%> <asp:Label ID="lbl_CCI_ChildTypeId" Text='<%# DataBinder.Eval(Container, "DataItem.ChildTypeId")%>' runat="server" Visible="false" /> </td> <%-- <td><%# DataBinder.Eval(Container, "DataItem.Gender")%> <asp:Label ID="lbl_CCI_Gender" Text='<%# DataBinder.Eval(Container, "DataItem.GenderId")%>' runat="server" Visible="false" /></td>--%> <td><span class="badge"> <asp:Label ID="lbl_CCI_Insp_Active" runat="server" ForeColor="#0054A6"></asp:Label> </span></td> <td><span class="badge"> <asp:Label ID="lbl_CCI_Insp_target" runat="server" ForeColor="#EA71A4"></asp:Label> </span></td> <td><span class="badge"> <asp:LinkButton ID="lnkbtn_CCI_Insp_Completed" runat="server" ForeColor="#28B690" OnClick="lnkbtn_CCI_Insp_Completed_Click">0</asp:LinkButton> <asp:Label ID="lbl_CCI_Insp_Completed" runat="server" Visible="false" ForeColor="#28B690"></asp:Label> </span></td> <td><span class="badge"> <asp:Label ID="lbl_CCI_Insp_pending" runat="server" ForeColor="#C54444"></asp:Label> </span></td> <td> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" runat="server" id="cci_insp_percentage" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> <asp:Label ID="lbl_cci_insp_perce" runat="server"></asp:Label> </div> </div> </td> </tr> </ItemTemplate> <FooterTemplate> <tr> <td> <span class="badge"> <asp:Label ID="lbl_cci_insp_total" runat="server" Text="Total"></asp:Label></span> </td> <td></td> <td><span class="badge"> <asp:Label ID="lbl_cci_insp_TotalActive" runat="server" ForeColor="#0054A6"></asp:Label></span> </td> <td><span class="badge"> <asp:Label ID="lbl_cci_insp_TotalTarget" runat="server" ForeColor="#EA71A4"></asp:Label></span></td> <td><span class="badge"> <asp:Label ID="lbl_cci_insp_TotalCompleted" runat="server" ForeColor="#28B690"></asp:Label></span></td> <td><span class="badge"> <asp:Label ID="lbl_cci_insp_TotalPending" runat="server" ForeColor="#C54444"></asp:Label></span></td> <td> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" runat="server" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" id="cci_insp_totalperce"> <asp:Label ID="lbl_cci_insp_totalpercentage" runat="server"></asp:Label> </div> </div> </td> </tr> </tbody> </table> </FooterTemplate> </asp:Repeater> </div> </div> </div> <div class="col-md-7"> <div id="container-main4" style="height: 482px;"></div> </div> </div> </div> </div> </div> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div class="row mt-5" id="sicdash_target"> <div class="col-md-12"> <div class="create-new-instru"> <div class="div-headi"> <div class="row"> <div class="col-md-8"> <div class="div-headi-inner"> <h4>Target Status of Inspection Bodies' Visits</h4> </div> </div> <div class="col-md-4"> <div class="div-headi-inner-filter"> <div class="row"> <div class="que-no-left mt-2"> <label class="control-label">Select Type of Filter:</label> </div> <div class="col-sm"> <div class="input-group"> <asp:DropDownList ID="ddl_FilterType" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddl_FilterType_SelectedIndexChanged"> </asp:DropDownList> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="homeg"> <div class="table-responsive"> <asp:Repeater ID="Repeater_target" runat="server" OnItemDataBound="Repeater_target_Dashbaord_ItemDataBound"> <HeaderTemplate> <table id="example" class="table alert-master"> <thead> <tr> <th>Inspection Bodies</th> <th width="4%">Active</th> <th width="4%">Target</th> <th width="4%">Completed</th> <th width="4%">Pending</th> <th width="4%">Percentage</th> </tr> </thead> </HeaderTemplate> <ItemTemplate> <tbody> <tr> <td><%# DataBinder.Eval(Container, "DataItem.RoleDescription")%> <asp:Label ID="lbl_RoleId" Text='<%# DataBinder.Eval(Container, "DataItem.RoleId")%>' runat="server" Visible="false" /> </td> <td><span class="badge"> <asp:Label ID="lbl_Active" runat="server" Visible="true" ForeColor="#0054A6"></asp:Label> </span></td> <td><span class="badge"> <%--<asp:LinkButton ID="lnkbtn_CCI_Target" runat="server" ForeColor="#0054a6" CommandArgument='<%# Eval("RoleId") %>' OnClick="lnkbtn_CCI_Target_Click">0</asp:LinkButton>--%> <asp:Label ID="lbl_CCI_target" runat="server" Visible="false" ForeColor="#EA71A4"></asp:Label> </span></td> <td><span class="badge"> <asp:LinkButton ID="lnkbtn_CCI_Completed" runat="server" ForeColor="#28B690" CommandArgument='<%# Eval("RoleId") %>' OnClick="lnkbtn_CCI_Completed_Click">0</asp:LinkButton> <asp:Label ID="lbl_CCI_Completed" runat="server" Visible="false" ForeColor="#28B690"></asp:Label> </span></td> <td><span class="badge"> <%-- <asp:LinkButton ID="lnkbtn_CCI_Pending" runat="server" ForeColor="#28b690" CommandArgument='<%# Eval("RoleId") %>' OnClick="lnkbtn_CCI_Pending_Click">0</asp:LinkButton>--%> <asp:Label ID="lbl_CCI_pending" runat="server" Visible="false" ForeColor="#C54444"></asp:Label> </span></td> <td> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" runat="server" id="percentage" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> <asp:Label ID="lbl_perce" runat="server"></asp:Label> </div> </div> </td> </tr> </ItemTemplate> <FooterTemplate> <tr> <td> <span class="badge"> <asp:Label ID="lbl_total" runat="server" Text="Total"></asp:Label></span> </td> <td><span class="badge"> <asp:Label ID="lbl_TotalActive" runat="server" ForeColor="#0054A6"></asp:Label></span> </td> <td><span class="badge"> <asp:Label ID="lbl_TotalTarget" runat="server" ForeColor="#EA71A4"></asp:Label></span></td> <td><span class="badge"> <asp:Label ID="lbl_TotalCompleted" runat="server" ForeColor="#28B690"></asp:Label></span></td> <td><span class="badge"> <asp:Label ID="lbl_TotalPending" runat="server" ForeColor="#C54444"></asp:Label></span></td> <td> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" runat="server" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" id="totalperce"> <asp:Label ID="lbl_totalpercentage" runat="server"></asp:Label> </div> </div> </td> </tr> </tbody> </table> </FooterTemplate> </asp:Repeater> </div> </div> </div> <div class="col-md-7"> <div id="container-main3" style="height: 482px;"></div> </div> </div> </div> </div> </div> </ContentTemplate> </asp:UpdatePanel>
     [WebMethod]
        public static List<object> GetCCIInsepectionBodiesVisit()
        {
            BusinessLogic bl = new BusinessLogic();
            BusinessObject bo = new BusinessObject();
            List<object> chartData = new List<object>();
            string Date1 = string.Empty, Date2 = string.Empty, Status = string.Empty;
            int InspectionsTotal = 0, InspectionsCompleted = 0, InspectionsPending = 0, ActiveCount = 0;
            bo.Num1 = 89;//Para value
            bo.Para1 = "";//State Id bihar
            bo.Para2 = "0";//Para value1
            bo.Para3 = "0";//Para value2
            bo.Para4 = "0";//Para value3
            bo.Dateused = DateTime.Now;//Para value4
            bo.Dateused1 = DateTime.Now;//Para value5
            DataTable dttarget_cci = bl.Get_LKP_Tables(bo);
            for (int i = 0; i < dttarget_cci.Rows.Count; i++)
            {
                bo.Num1 = int.Parse(dttarget_cci.Rows[i]["CategoryId"].ToString());//CategoryId
                bo.Num2 = int.Parse(dttarget_cci.Rows[i]["ChildTypeId"].ToString());//ChildTypeId
                bo.Para1 = System.Web.HttpContext.Current.Session["CCI_FilterType"].ToString();//TypeofFilter
                DataTable dt = bl.Admin_Get_SIC_CCICategory_Inspection_Counts(bo);
                if (dt.Rows.Count > 0)
                {
                    InspectionsTotal = int.Parse(dt.Rows[0]["InspectionsTotal"].ToString());
                    InspectionsCompleted = int.Parse(dt.Rows[0]["InspectionsCompleted"].ToString());
                    InspectionsPending = int.Parse(dt.Rows[0]["InspectionsPending"].ToString());
                    ActiveCount = int.Parse(dt.Rows[0]["ActiveCount"].ToString());
                }
                chartData.Add(new object[]
            {
                "","Active","Target","Completed","Pending"
            });
                chartData.Add(new object[] { dttarget_cci.Rows[i]["Category"].ToString(), ActiveCount, InspectionsTotal, InspectionsCompleted, InspectionsPending });
    
            }
            return chartData;
        }
    
    
      [WebMethod]
        public static List<object> GetInsepectionBodiesTarget()
        {
    
            BusinessLogic bl = new BusinessLogic();
            BusinessObject bo = new BusinessObject();
            List<object> chartData = new List<object>();
    
            string Date1 = string.Empty, Date2 = string.Empty, Status = string.Empty;
            int Target = 0, Completed = 0, Pending = 0,Active=0;
    
    
            bo.Num1 = 90;//Para value
            bo.Para1 = "5";//State Id bihar
            bo.Para2 = "0";//Para value1
            bo.Para3 = "0";//Para value2
            bo.Para4 = "0";//Para value3
            bo.Dateused = DateTime.Now;//Para value4
            bo.Dateused1 = DateTime.Now;//Para value5
            DataTable dttarget = bl.Get_LKP_Tables(bo);
            for (int i = 0; i < dttarget.Rows.Count; i++)
            {
                bo.Num1 =int.Parse(dttarget.Rows[i]["RoleId"].ToString());//RoleId
                bo.Para1 = System.Web.HttpContext.Current.Session["FilterType"].ToString();
                DataTable dt = bl.Admin_Get_InsepctionBodiesTarget_Counts(bo);
                if (dt.Rows.Count > 0)
                {
                    Target = int.Parse(dt.Rows[0]["NoofVisits"].ToString());
                    Completed = int.Parse(dt.Rows[0]["Completed"].ToString());
                    Pending = int.Parse(dt.Rows[0]["Pending"].ToString());
                    Active = int.Parse(dt.Rows[0]["Activecounts"].ToString());
                }
                chartData.Add(new object[]
            {
                "","Active","Target","Completed","Pending"
            });
                chartData.Add(new object[] { dttarget.Rows[i]["RoleName"].ToString(), Active, Target, Completed, Pending});
    
            }
            return chartData;
        }
    

    Monday, February 3, 2020 5:49 AM
  • User-719153870 posted

    Hi nagapavanich,

    Sorry for the late reply.

    The problem still can not be reproduced since the class BusinessObject and class BusinessLogic are not provided but i think these should not be the reason for your problem since the two charts are using the exact same classes.

    I checked your code row by row and the code for your two charts are the same no matter front or back except there's below code in GetCCIInsepectionBodiesVisit() but not in GetInsepectionBodiesTarget(), i'm not sure if this is the problem or just your data structure but maybe you can check it.

    bo.Num2 = int.Parse(dttarget_cci.Rows[i]["ChildTypeId"].ToString());//ChildTypeId

    And, have you checked the browser devtools? Did you see any error message in the console?

    Best Regard,

    Yang Shen

    Tuesday, February 4, 2020 3:16 AM