Click here to Skip to main content
15,881,600 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:

hello,my google chart is not rendered in bootstrap modal popup .code is written using c# for chart
my question is if i write code in aspx page--static data it show in popup .but when it comes from datable on C# code .it creats script bt not shown in popup


Aspx code.on button click modal is opend

C#
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="width: 95%; height:90%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                               <span aria-hidden="true"</span></button>
                        </div>
                      <asp:UpdatePanel ID="upAdd" runat="server">
                        <ContentTemplate>
                        <div class="modal-body" style="padding: 0px 0px 45px 25px;">
                          <asp:Panel ID="panel1" runat="server" HorizontalAlign="Center" Height="100%" Width="100%"><br />
                                            <asp:Label ID="lblmsg" runat="server" Text="" Visible="false"></asp:Label>
                                             <div class="text-left"><h5>
                                              <asp:Label ID="lbl2" runat="server" Text="Meter Name :" Font-Bold="true"></asp:Label>
                                              <asp:Label ID="lblMeter" runat="server"></asp:Label></h5>
                                             <asp:Label ID="lbl1" runat="server" Text="Parameter Name  :" Font-Bold="true"></asp:Label>
                                             <asp:Label ID="lblParaname" runat="server"></asp:Label> 
                                             </div>
                                             <div id="interactive">
                                           <asp:Literal ID="lt" runat="server" ></asp:Literal>
                                            <div id="chart_div" style="height: 500px; width: 300px;"  runat="server">
                                            </div>
                                            </div> 
                          </asp:Panel>
                        </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    </div>
                </div>
            </div>

 Code :

<pre lang="C#">private void BindChart(DataTable dt)
    {
        try
        {
           
            str.Append(@"&lt;script type=*text/javascript*  src=*https://www.google.com/jsapi *&gt; 
                        $('body').one('shown.bs.modal','#myModal', function(){
                       google.load('visualization', '1.1', {'packages':['corechart'], *callback*: drawChart});
                    }); 
         google.load('visualization', '1.1', { 'packages': ['corechart'], *callback*: drawChart });
                       function drawChart() {
                        var data = new google.visualization.DataTable();
                        data.addColumn('string', 'Year');
                        data.addColumn('number','Parameter');     
                        data.addRows(" + dt.Rows.Count + ");");

            for (int i = 0; i &lt;= dt.Rows.Count - 1; i++)
            {
                str.Append("data.setValue( " + i + "," + 0 + "," + "'" + Convert.ToDateTime(dt.Rows[i][1]).ToString("dd-MM HH:mm") + "');");
                str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i][2].ToString() + ") ;");
            }

            str.Append("var chart = new google.visualization.LineChart(document.getElementById('chart_div'));");
            str.Append("chart.draw(data, {width: 900, height: 500, title: 'Parameter Value V/S Datetime',");
            str.Append("hAxis: {title: 'Date-Time (dd-MM HH:mm)', titleTextStyle: {color: 'green'}}");
            str.Append("});}");
            str.Append("&lt;/script&gt;");
            lt.Text = str.ToString().Replace('*', '"');

            #region Show Modal PopUp
            try
            {
                btnSearch.Text = "Search";
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append(@"&lt;script type='text/javascript'&gt;");
                sb.Append("$('#myModal').modal('show');");               
                sb.Append(@"&lt;/script&gt;");
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Graph", sb.ToString(), false);
            }
            catch (Exception ex) { ExceptionUtility.LogException(ex, System.Reflection.MethodBase.GetCurrentMethod().Name); }
            #endregion
        }
        catch
        { }
    }


What I have tried:

i have tried to put in div of chart in update panel .static chart is displayed in popup but when i create it from database query it doesnt shown on popup
Posted
Updated 8-Feb-16 17:57pm
v5
Comments
Kornfeld Eliyahu Peter 8-Feb-16 5:53am    
Maybe something about the code creates the chart from DB?
But who can tell? No one, except you, have seen that code...
Kornfeld Eliyahu Peter 8-Feb-16 7:31am    
Please add this code - nicely formatted - to your original question...It is next to impossible to read it in this format...

1 solution

Try To Improve Your Code From Below Link.

Click Here To See Modal Pop-Up With Chart

Example PopUp


Or Also Check The Other Problem As Below.

If U are Loading Your Chart Data On Button Click Then might be your Popup could get refresh and it could be fade-out before the chart load.
so try to load your modal pop-up after your datatable is ready to load in chart as below link.

Load Modal Pop-Up After Data Loaded.
 
Share this answer
 
v3
Comments
Member 11117664 9-Feb-16 1:24am    
ya i hv tried too this
Member 11117664 19-Feb-16 0:47am    
okk i wl try .Thank u JAy :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900