Tooltips are not working on my Line chart

Share RGraph:   Share or Like RGraph on Facebook!

« 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 Ananth on 29th September 2017
  HI,

i was trying to generate charts and trying to add tooltips and i have check all the examples in this site that good but when i tried tool tips are not working below is my chart data


var objData = [null, 9004, 8638, 10304, null]
var objyMin = 6200
var objyMax = 12000

var line = new RGraph.Line({
                 id: 'cvs',
                 data: objData,
                 options: {
                     //gutterBottom: 45,
                     gutterLeft: 60,
                     labels: ['', 'Apr', 'May', 'Jun', ''],
                     colors: ['#7CB5EC'],
                     tickmarks: 'filledsquare',
                     shadow: false,
                     labelsAbove: true,
                     labelsAboveBorder: false,
                     linewidth: 1,
                     ymin: objyMin,
                     ymax: objyMax,
                     title: 'X',
                     titleYaxis: 'Y',
                     titleYaxisSize: 7,
                     titleYaxisBold: true,
                     titleYaxisPos: 0.2,
                     titleXaxisColor: 'black',
                     backgroundColor: '#e5f3ff',
                     backgroundGrid: true,
                     backgroundGridColor: '#fff',
                     backgroundGridVlines: false,
                     backgroundGridBorder: false,
                     hmargin: 5,
                     scaleZerostart: true,
                     axisColor: '#000000',
                     numxticks: 0,
                     noyaxis: false,
                     textFont: 'Segoe UI',
                     textSize: 10,
                     textColor: '#000000',
                     tooltips: ['Alvin', 'Pete', 'Hoolio', 'Jack',''],
                     tooltipsEffect: 'fade',
                     //annotatable: true
                     //textAccessible: true
                 }
             }).trace2();
Posted by Richard on 29th September 2017
Hi there,

Turn off textAccessible - the SPAN tags are obscuring the tooltip hotspots. Here's an example:

www.rgraph.net/fiddle/view.html/line-chart-showing-tooltips


Richard
Posted by Ananth on 29th September 2017
Hi Richard,

sorry i missed to add <script src="/libraries/RGraph.common.tooltips.js"></script> on the page and that is why it was not working thats my fault. and as soon as i have added it worked


Thanks,
Ananth
Posted by Ananth on 29th September 2017
Hi Richard,

i tried this and tooltip is working but there is some pointer underneath on each tooltip and that style is something making the tooltip looks ugly

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC

is this default option and how to change styles/disable this


Thanks,
Ananth
Posted by Richard on 29th September 2017
Hi there,

This is an inline image that used to be used in tooltips - but is not used any longer. You must be using an older version of one or more of the libraries. So update everything to version 4.63.

Richard
Posted by Ananth on 29th September 2017
Hi Richard,

perfect that did the trick, Yes i was on old version i believe i have replaced it now.


Thanks,
Ananth
Posted by Ananth on 20th October 2017
Hi Richard,

after i updated the version to 4.63 that tool-tip issue has been resolved however after updating issue that i faced which was resolved by your suggestion in www.rgraph.net/forum/message.html/how-do-i-specify-a-start-value-for-the-y-axis?-20170926170749.html reappeared like the first value as null in data is displayed in border of the div which is enclosed for graph however older version is working fine and not displaying this in the border i don't have an option to upload any screenshots but i have shared the div HTML part here, thanks for your help


linec([null, 9004, 8638, 10304, null], 6200, 12000);

function linec(objData, objyMin, objyMax) {
             //var $canvas3 = $("#cvsOverallTicketTrend");
             //var $parent3 = $canvas3.parent();
             //$canvas3.width($parent3.width());
             //$canvas3.height($parent3.height());

             var canvas = document.getElementById('cvsOverallTicketTrend');
             RGraph.Reset(canvas);

             var lineTicketTrendProductionSustain = new RGraph.Line({
                 id: 'cvsOverallTicketTrend',
                 data: objData,
                 options: {
                     //gutterBottom: 45,
                     gutterLeft: 60,
                     labels: ['', 'Apr', 'May', 'Jun', ''],
                     colors: ['#7CB5EC'],
                     tickmarks: 'filledsquare',
                     shadow: false,
                     labelsAbove: true,
                     labelsAboveBorder: false,
                     linewidth: 1,
                     ymin: objyMin,
                     ymax: objyMax,
                     title: 'Ticket Trend',
                     titleYaxis: 'No. Of Tickets Handled',
                     titleYaxisSize: 7,
                     titleYaxisBold: true,
                     titleYaxisPos: 0.2,
                     titleXaxisColor: 'black',
                     backgroundColor: '#e5f3ff',
                     backgroundGrid: true,
                     backgroundGridColor: '#fff',
                     backgroundGridVlines: false,
                     backgroundGridBorder: false,
                     hmargin: 5,
                     scaleZerostart: true,
                     axisColor: '#000000',
                     numxticks: 0,
                     noyaxis: false,
                     textFont: 'Segoe UI',
                     textSize: 10,
                     textColor: '#000000'
                     //tooltips: ['Alvin', 'Pete', 'Hoolio', 'Jack', ''],
                     //tooltipsEffect: 'fade',
                     //annotatable: true
                     //textAccessible: true
                 }
             }).trace2();


         };

here is my html

<div class="col-lg-4">
         <div class="panel panel-primary">
             <div class="panel-body" id="divPWIC">
                 <canvas id="cvsOverallTicketTrend" width="370" height="150">[No canvas support]
                 </canvas>

             </div>
         </div>
     </div>


Thanks,
Ananth
Posted by Richard on 20th October 2017
Hi there,

This is a test page showing your chart:

www.rgraph.net/tests/line/ananth.html

Seems to be OK - so what exactly is the problem with is?

Richard
Posted by Richard on 20th October 2017
Hi there,

I should add that this is version 4.64.

Richard
Posted by Ananth on 20th October 2017
Hi Richard,

sure please let me know once it has been added as i have downloaded 4.64 now and tried and still same ! overlapping in div


Thanks,
Ananth
Posted by Richard on 20th October 2017
Hi there,

Once what has been added? The test page I made using your code, here:

www.rgraph.net/tests/line/ananth.html

seems fine.

What's the issue with it?

Richard
Posted by Ananth on 20th October 2017
Hi Richard,

if i add this HTML and get the same chart displayed inside this div this div border is displaying text in the border

<div class="col-lg-4">
          <div class="panel panel-primary">
              <div class="panel-body" id="divPWIC">
                  <canvas id="cvsOverallTicketTrend" width="370" height="150">[No canvas support]
                  </canvas>

              </div>
          </div>
      </div>


Thanks,
Ananth
Posted by Richard on 20th October 2017
Hi there,

It's probably some CSS. Try adding some padding to the DIV that contains the canvas:

     <div class="col-lg-4">
           <div class="panel panel-primary">
               <div class="panel-body" id="divPWIC" style="padding: 50px">
                   <canvas id="cvsOverallTicketTrend" width="370" height="150"></canvas>
               </div>
           </div>
       </div>


Or just take out the class names and see what happens:

     <div>
           <div>
               <div style="padding: 50px">
                   <canvas id="cvsOverallTicketTrend" width="370" height="150"></canvas>
               </div>
           </div>
       </div>

Richard
Posted by Ananth on 22nd October 2017
Hi Richard,

thanks but padding didn't help still i am seeing that null as label in the graph

as without padding this works well with older version. and not with new version.


Thanks,
Ananth
Posted by Richard on 22nd October 2017
Hi there,

Then I don't know what's going on.

Have you updated *all* of the libraries to the latest version? ie the Line chart library as well as the core library and also any others that you're using.

Richard

Add a reply




« Back to message list