ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Show canvas Bar chart on Bootstrap Modal Popup on ASP.Net GridView mouse hover using jQuery<p>Hi <a class="username" rel="mukesh1">mukesh1</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function hidepopup() { $(&#39;#bar-chart&#39;).empty(); $(&#39;#myModal&#39;).modal(&#39;hide&#39;); } function Showpointchart(Task_title, Remarks1, Points1, Remarks2, Points2) { $(&#39;#bar-chart&#39;).empty(); $(&#39;#myModal&#39;).modal(&#39;show&#39;); $(&#39;#myModal&#39;).on(&#39;shown.bs.modal&#39;, function () { var ctx = document.getElementById(&#34;bar-chart&#34;).getContext(&#39;2d&#39;); var myChart = new Chart(ctx, { type: &#39;bar&#39;, data: { labels: [Remarks1, Remarks2], datasets: [{ label: &#34;Points&#34;, data: [Points1, Points2], backgroundColor: [&#34;#3e95cd&#34;, &#34;#8e5ea2&#34;] }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [{ ticks: { callback: function (value, index, values) { // return only first 4 charater of remark. return value.substr(0, 4); } } }] }, tooltips: { callbacks: { title: function (tooltipItem, data) { // Returns text to render as the title of the tooltip. return data.labels[tooltipItem[0].index]; } } } } }); }); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;asp:GridView ID=&#34;grdperformance&#34; runat=&#34;server&#34; AutoGenerateColumns=&#34;false&#34; CssClass=&#34;table table-responsive&#34;&gt; &lt;Columns&gt; &lt;asp:TemplateField&gt; &lt;HeaderTemplate&gt; &lt;div class=&#34;col-md-8&#34;&gt; &lt;label&gt; Task Title&lt;/label&gt;&lt;/div&gt; &lt;div class=&#34;col-md-4&#34;&gt; &lt;label&gt; Total Points&lt;/label&gt;&lt;/div&gt; &lt;/HeaderTemplate&gt; &lt;ItemTemplate&gt; &lt;div class=&#34;col-md-8&#34;&gt; &lt;a style=&#34;color: Red;&#34; onmouseover=&#39;Showpointchart(&#34;&lt;%#Eval(&#34;Task_title&#34;)%&gt;&#34;,&#34;&lt;%#Eval(&#34;Remarks1&#34;)%&gt;&#34;,&#34;&lt;%#Eval(&#34;Points1&#34;)%&gt;&#34;,&#34;&lt;%#Eval(&#34;Remarks2&#34;)%&gt;&#34;,&#34;&lt;%#Eval(&#34;Points2&#34;)%&gt;&#34;)&#39;&gt; &lt;%# Eval(&#34;Task_title&#34;) %&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class=&#34;col-md-4&#34;&gt; &lt;asp:Label ID=&#34;Label4&#34; runat=&#34;server&#34; Text=&#39;&lt;%# Eval(&#34;Total_Points&#34;) %&gt;&#39;&gt;&lt;/asp:Label&gt; &lt;/div&gt; &lt;/ItemTemplate&gt; &lt;/asp:TemplateField&gt; &lt;/Columns&gt; &lt;/asp:GridView&gt; &lt;div class=&#34;col-md-12&#34;&gt; &lt;div class=&#34;modal fade&#34; id=&#34;myModal&#34; role=&#34;dialog&#34; onmousedown=&#34;hidepopup()&#34;&gt; &lt;div class=&#34;modal-dialog&#34; style=&#34;width: 300px&#34;&gt; &lt;!-- Modal content--&gt; &lt;div class=&#34;modal-content&#34;&gt; &lt;div class=&#34;modal-body&#34;&gt; &lt;span style=&#34;color: red&#34;&gt;&lt;/span&gt;Employee Task Report &lt;div class=&#34;col-lg-12 col-sm-12 col-md-12 col-xs-12&#34;&gt; &lt;br /&gt; &lt;br /&gt; &lt;div class=&#34;col-md-12&#34;&gt; &lt;%--//taskchart--%&gt; &lt;canvas id=&#34;bar-chart&#34; width=&#34;200&#34; height=&#34;200&#34;&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;hr /&gt; &lt;button type=&#34;button&#34; class=&#34;btn btn-info&#34; onmouseover=&#34;hidepopup()&#34; data-dismiss=&#34;modal&#34;&gt; Close&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">C#</span></strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[] { new DataColumn(&#34;Task_title&#34;, typeof(string)), new DataColumn(&#34;Remarks1&#34;, typeof(string)), new DataColumn(&#34;Points1&#34;, typeof(int)), new DataColumn(&#34;Remarks2&#34;, typeof(string)), new DataColumn(&#34;Points2&#34;, typeof(int)), new DataColumn(&#34;Total_Points&#34;, typeof(int)) }); dt.Rows.Add(&#34;A&#34;, &#34;Re1&#34;, 30, &#34;Re2&#34;, 40, 100); dt.Rows.Add(&#34;B&#34;, &#34;Re1&#34;, 50, &#34;Re2&#34;, 60, 100); dt.Rows.Add(&#34;C&#34;, &#34;Re1&#34;, 70, &#34;Re2&#34;, 80, 100); grdperformance.DataSource = dt; grdperformance.DataBind(); } }</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://imgur.com/vbdFtiU.gif" alt="" width="360" height="410" /></p>https://www.aspforums.net:443/Threads/442620/Show-canvas-Bar-chart-on-Bootstrap-Modal-Popup-on-ASPNet-GridView-mouse-hover-using-jQuery/https://www.aspforums.net:443/Threads/442620/Show-canvas-Bar-chart-on-Bootstrap-Modal-Popup-on-ASPNet-GridView-mouse-hover-using-jQuery/Fri, 21 Sep 2018 03:14:47 GMT