Show canvas Bar chart on Bootstrap Modal Popup on ASP.Net GridView mouse hover using jQuery

Last Reply 9 months ago By dharmendr

Posted 9 months ago

i have many rows on mouseover of each row popup will open.

i need to close popup using javascript.

if i use 

$('#myModal').modal('hide');

then on mouse over on graph sometimes it shows previous rows graph also 

                    <asp:GridView ID="grdperformance" runat="server" Width="100%" BorderColor="#c4e7e7" BorderWidth="1px" OnRowDataBound="grdperformance_RowDataBound"  AutoGenerateColumns="false"  >
                        <Columns>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                <div class="col-md-8">    <label>Task Title</label></div>
                                 <div class="col-md-4">      <label>Total Points</label></div>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div class="col-md-8"><a style="color:white;" onmouseover='Showpointchart("<%#Eval("Task_title")%>","<%#Eval("Remarks1")%>","<%#Eval("Points1")%>","<%#Eval("Remarks2")%>","<%#Eval("Points2")%>","<%#Eval("Remarks3")%>","<%#Eval("Points3")%>","<%#Eval("Remarks4")%>","<%#Eval("Points4")%>","<%#Eval("Remarks5")%>","<%#Eval("Points5")%>","<%#Eval("Remarks6")%>","<%#Eval("Points6")%>","<%#Eval("Remarks7")%>","<%#Eval("Points7")%>","<%#Eval("Remarks8")%>","<%#Eval("Points8")%>","<%#Eval("Remarks9")%>","<%#Eval("Points9")%>","<%#Eval("Remarks10")%>","<%#Eval("Points10")%>")' >   <%# Eval("Task_title") %></a></div>
                                    <div class="col-md-4">
                                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("Total_Points") %>'></asp:Label>
                                       
                                    </div>
                     </asp:GridView>

 

<div class="col-md-12">
          <div class="modal fade" id="myModal"  role="dialog"  onmousedown="hidepopup()"   >
    <div class="modal-dialog" style="width:700px">
        <!-- Modal content-->
        <div class="modal-content"  >
<div class="modal-body"   >
                <span style="color:red"> <%--Click to Close--%></span>
                <%--<br/>--%>
                Employee Task Report
                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12" >
                   
                    <br /><br />
                    
                    <div class="col-md-12">
                   <%--//taskchart--%>
                          <canvas id="bar-chart"  width="500" height="300"></canvas>
                    </div>
                  </div>
                 
            </div>
             
            <div class="modal-footer"   >
                <hr />
                <button type="button" class="btn btn-info" onmouseover="hidepopup()" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>

 

         function Showpointchart(title,remark1,point1,remark2,point2,remark3,point3,remark4,point4,remark5,point5, remark6,point6,remark7,point7,remark8,point8,remark9,point9,remark10,point10)
         {
             alert("ok");
             $('#myModal').modal('show');
             $('#myModal').on('shown.bs.modal', function () {
 
                 var ctx = document.getElementById("bar-chart").getContext('2d');
                 var myChart = new Chart(ctx, {
                     type: 'bar',
                     data: {
                         labels: [remark1, remark2, remark3, remark4, remark5, remark6, remark7, remark8, remark9, remark10],
                         datasets: [{
                             label: "Points",
                             data: [point1, point2, point3, point4, point5, point6, point7, point8, point9, point10],
                             backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"]
                         }]
                     },
                     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, 10) + "..");
                                     }
                                 }
                             }]
                         },
                         tooltips: {
                             callbacks: {
                                 title: function (tooltipItem, data) {
                                     // Returns text to render as the title of the tooltip.
                                     return data.labels[tooltipItem[0].index];
                                 }
                             }
                         }
                     }
                 });
             })
         }
         function hidepopup() { 
             $('#myModal').modal('hide');
         }
You are viewing reply posted by: dharmendr 9 months ago.
Posted 9 months ago

Hi mukesh1,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script type="text/javascript">
        function hidepopup() {
            $('#bar-chart').empty();
            $('#myModal').modal('hide');
        }
        function Showpointchart(Task_title, Remarks1, Points1, Remarks2, Points2) {
            $('#bar-chart').empty();
            $('#myModal').modal('show');
            $('#myModal').on('shown.bs.modal', function () {
                var ctx = document.getElementById("bar-chart").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [Remarks1, Remarks2],
                        datasets: [{
                            label: "Points",
                            data: [Points1, Points2],
                            backgroundColor: ["#3e95cd", "#8e5ea2"]
                        }]
                    },
                    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];
                                }
                            }
                        }
                    }
                });
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="grdperformance" runat="server" AutoGenerateColumns="false" CssClass="table table-responsive">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <div class="col-md-8">
                        <label>
                            Task Title</label></div>
                    <div class="col-md-4">
                        <label>
                            Total Points</label></div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="col-md-8">
                        <a style="color: Red;" onmouseover='Showpointchart("<%#Eval("Task_title")%>","<%#Eval("Remarks1")%>","<%#Eval("Points1")%>","<%#Eval("Remarks2")%>","<%#Eval("Points2")%>")'>
                            <%# Eval("Task_title") %></a></div>
                    <div class="col-md-4">
                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("Total_Points") %>'></asp:Label>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <div class="col-md-12">
        <div class="modal fade" id="myModal" role="dialog" onmousedown="hidepopup()">
            <div class="modal-dialog" style="width: 300px">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        <span style="color: red"></span>Employee Task Report
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <br />
                            <br />
                            <div class="col-md-12">
                                <%--//taskchart--%>
                                <canvas id="bar-chart" width="200" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <hr />
                        <button type="button" class="btn btn-info" onmouseover="hidepopup()" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("Task_title", typeof(string)), 
            new DataColumn("Remarks1", typeof(string)), new DataColumn("Points1", typeof(int)), 
            new DataColumn("Remarks2", typeof(string)), new DataColumn("Points2", typeof(int)), 
            new DataColumn("Total_Points", typeof(int)) });
        dt.Rows.Add("A", "Re1", 30, "Re2", 40, 100);
        dt.Rows.Add("B", "Re1", 50, "Re2", 60, 100);
        dt.Rows.Add("C", "Re1", 70, "Re2", 80, 100);
        grdperformance.DataSource = dt;
        grdperformance.DataBind();
    }
}

Screenshot