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(@"<script type=*text/javascript* src=*https://www.google.com/jsapi *>
$('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 <= 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("</script>");
lt.Text = str.ToString().Replace('*', '"');
#region Show Modal PopUp
try
{
btnSearch.Text = "Search";
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#myModal').modal('show');");
sb.Append(@"</script>");
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