从数据库创建的Google图表不会显示在引导程序模式弹出窗口中 [英] Google chart created from database is not displayed in bootstrap modal popup

问题描述

你好，我的谷歌图表没有在bootstrap模式弹出窗口中呈现.code是用c＃写的图表

我的问题是我是否写代码aspx页面 - 它在弹出窗口中显示的静态数据。但是它来自C＃代码上的数据。在弹出窗口中没有显示的创建脚本





Aspx code.on按钮点击模式为opend

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

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

我的尝试：



i试图在更新面板中放入图表div。静态图表显示在弹出窗口中但是当我从数据库查询创建它时它没有显示在弹出窗口

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

推荐答案

（'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}）;
函数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（ < span class =code-string> dd-MM HH：mm）+ '）; ）;
str.A ppend（ data.setValue（ + i + ， + 1 + ， + dt.Rows [i] [ 2 ]。ToString（）+ ）;）;
}

str.Append（ var chart = new google.visualization。线型图（的document.getElementById（ 'chart_div'））;）;
str.Append（ chart.draw（data，{width：900，height：500，title： '参数值V / S日期时间'，）;
str.Append（ hAxis ：{title：'Date-Time（dd-MM HH：mm）'，titleTextStyle：{color：'green'}}）;
str.Append（ }）;}）;
str.Append（ & lt; / script& gt;）;
lt.Text = str.ToString（）。替换（' *'，' '）;

#region Show Modal PopUp
try
{
bnnSearch.Text = 搜索;
System.Text.StringBuilder sb = new System.Text.StringBuilder（）;
sb.Append（ @ & lt;脚本类型='text / javascript'& gt;）;
sb.Append（

('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; /脚本&安培; gt; 中）;
ScriptManager.RegisterClientScriptBlock（ this ， this .GetType（）， 图，sb.ToString（）， false ）;
}
catch （Exception ex）{ExceptionUtility.LogException（例如，System.Reflection.MethodBase.GetCurrentMethod（）。Name）; }
#endregion
}
catch
{}
}

('#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 { } }

我的尝试：



i试图在更新面板中放入图表div。静态图表显示在弹出窗口中但是当我从数据库查询中创建时它没有显示在弹出窗口

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

尝试从链接下方改进您的代码。



点击这里查看模态弹出图表



PopUp示例





或者还检查下面的其他问题。



如果你正在加载你的图表数据按钮然后可能是你的弹出窗口可以刷新它可能是图表加载前淡出。

因此，在数据表准备加载到图表中后，尝试加载模态弹出窗口，如下面的链接。



加载数据后加载模态弹出窗口。

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.

这篇关于从数据库创建的Google图表不会显示在引导程序模式弹出窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！