Can you show tooltips using the mouseover event in a Gantt chart?


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Kedar on 10th May 2017
I did one Rgraph gantt chart where Tooltip text is displaying only after clicking that particular chart bar, not showing any text when simply hover that bar.
Is there any solution for this, or Can you show any example for Gantt Chart only.
Below mentioned my code :-


  function GetWeeklyGaraphData() {
             $("#GetWeeklyGaraphDataGanchart").fadeIn('slow');
            
             var TestPlanID = $('#hdnGanTestPlanID').val();
             var obj = { TestPlanID: TestPlanID }
             $.ajax({
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 url: "xyz.aspx/GetGaraphDataForTest",
                 dataType: "json",
                 async: false,
                 data: JSON.stringify(obj),
                 success: function (data) {
                     var TestPurposeddllist = JSON.parse(data.d);
                     if (TestPurposeddllist.Table) {
                         var len = TestPurposeddllist.Table.length;
                         var data = [];
                         var TooltipsText = [];

                         if (TestPurposeddllist.Table4) {
                             var len4 = TestPurposeddllist.Table4.length;
                             if (TestPurposeddllist.Table5) {
                                 var len5 = TestPurposeddllist.Table5.length;
                             }
                             var kcnt = 0;
                             var addArrayText = [];
                             debugger;
                             for (var i = 0; i < len4; i++) {
                                 kcnt = 0;
                                 addArrayText = [];

                                 for (var k = 0; k < len5; k++) {
                                     if (TestPurposeddllist.Table4[i].SystemID == TestPurposeddllist.Table5[k].SystemID) {
                                         kcnt++;
                                         addArrayText.push([TestPurposeddllist.Table5[k].LapseDurationStart, TestPurposeddllist.Table5[k].LapseDurationEnd, null, TestPurposeddllist.Table5[k].SystemName, 'rgba(255, 255, 255, 1)']);
                                         TooltipsText[i] ="<b>Comments:</b><br>"+ TestPurposeddllist.Table5[0].LapseComments;
                                     }
                                 }

                                 if (kcnt == 0) {
                                     data.push([TestPurposeddllist.Table4[i].DurationStart, TestPurposeddllist.Table4[i].DurationEnd, null, TestPurposeddllist.Table4[i].SystemName, 'rgba(6,200,150,1)']);
                                 }
                                 else {
                                     data.push([[TestPurposeddllist.Table4[i].DurationStart, TestPurposeddllist.Table4[i].DurationEnd, null, TestPurposeddllist.Table4[i].SystemName, 'rgba(6,200,150,1)']]);
                                                                        
                                     for (var j=0;j<addArrayText.length;j++){
                                         data[i][j+1] = addArrayText[j];
                                     }
                                 }
                             }
                         }

                         var XmaxValue = 0;
                        
                         var LaBelData = [];
                         if (TestPurposeddllist.Table2) {
                             var len2 = TestPurposeddllist.Table2.length;
                             for (var i = 0; i < len2; i++) {
                                 LaBelData.push(TestPurposeddllist.Table2[i].DateForGanntChart);
                             }
                         }
                         var WeeklyData = [];
                         var strtxt = '';
                         var monthCnt = 0;
                         if (TestPurposeddllist.Table3) {
                             var len2 = TestPurposeddllist.Table3.length;
                             for (var i = 0; i < len2; i++) {
                                                                
                                 WeeklyData.push("CW"+TestPurposeddllist.Table3[i].weekyr);
                             }
                             XmaxValue = len2;
                         }
                         debugger;
                         var canvas = document.getElementById("idcvsweekly");
                         RGraph.Reset(canvas);
                         var height = data.length * 50;
                         //var width = LaBelData.length * 50;
                         var width = WeeklyData.length * 40;

                         if (width < 800) {
                             width = '800';
                         }
                         if (height < 300) {
                             height = '300';
                         }
                         if (len < 6) {
                             var len22 = 6 - len;

                             for (var i = 0; i < len22; i++) {

                                 data.push([0, 0, null, '','']);
                             }
                         }
                         canvas.width = width;
                         canvas.height = height;
                         var text_size = Math.min(12, ($(window).width() / 1000) * 10);
                         var gantt = new RGraph.Gantt({
                             id: 'idcvsweekly',
                             data: data,
                             options: {
                                 labels: WeeklyData,
                                 labelsAlign: 'top',
                                 xmax: XmaxValue,
                                 labelsPercent: true,
                                 backgroundGridAutofitNumvlines: XmaxValue,
                                 textAccessible: true,
                                 textSize: 7,
                                 tooltips: TooltipsText,
                                 defaultcolor: 'rgba(6,200,150,1)',
                             }
                         }).draw();


                     }
                 },
             });
         }
Posted by Richard on 10th May 2017
Hi there,

Have you tried setting the tooltipsEvent property to mousemove ?



Richard
Posted by Kedar on 11th May 2017
I tried "tooltipsEvent", but I guess, the way I'm implementing is not right for Gantt Chart.
Can you please give one example by implementing this.
Posted by Richard on 11th May 2017
Hi there,

www.rgraph.net/fiddle/view.html/gant-chart-tooltips-using-mousemove-event

The first four events have tooltips.



Richard
Posted by Kedar on 11th May 2017
Thank you so much.
It is working now...

Add a reply




« Back to message list