Chart.js inside in UpdatePanel using Bootstrap Modal - bootstrap-modal

Question

I am trying to show Bar Chart in Bootstrap Modal Popup. But everything is fine when it is call outside UpdatePanel.
If I call the cart inside UpdatePanel, it is showing nothing. Please help me:
My jQuery:
<script type="text/javascript">
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData =
{
//labels: ["January", "February", "March", "April", "May", "June", "July"],
labels: <% =this.ChartLabels %>,
datasets:
[
{
label: "Query Count",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
//data: [0, 1, 4, 6, 10, 8, 6]
data: <% =this.ChartData1 %>
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
//data: [28, 48, 40, 19, 86, 27, 90]
data: <% =this.ChartData2 %>
}
]
}
//Sys.WebForms.PageRequestManager.getInstance().add_endRequest(RunThisAfterEachAsyncPostback);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
DrawChart();
}
}
function DrawChart()
{
//Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Bar(lineChartData, {
responsive: true
});
}
$('#modChart').modal('show')
DrawChart();
</script>
I am calling the Jquery from CodeBehind :
protected void Button1_Click(object sender, EventArgs e)
{
public string ChartLabels = null;
public string ChartData1 = null;
public string ChartData2 = null;
this.ChartLabels = "['January', 'February', 'March', 'April', 'May', 'June', 'July']";
this.ChartData1 = "[65, 59, 80, 81, 56, 55, 40]";
this.ChartData2 = "[28, 48, 40, 19, 86, 27, 90]";
ScriptManager.RegisterStartupScript(this, this.GetType(), "CallMyFunction", "DrawChart()", true);
}
My ASPX Button inside in UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal fade" id="modChart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Linechart</h4>
</div>
<div class="modal-body">
<div>
<canvas id="canvas" width="568" height="300"></canvas>
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>