Problem with the tooltips, using multiple charts

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« 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 Chris on 6th December 2012
I am drawing 2 charts, one waterfall and one "combined bar and spline", each one in their own canvas. When using one of them only, excluding the other, tool-tips work. When both of them are rendered, tool-tips are not working. Any ideas?

Following is the complete code:

       {
       // Graph 1
             waterfall1 = new RGraph.Waterfall('chart1', [0,-504.03])
             waterfall1.Set('chart.background.grid.autofit', true);
             waterfall1.Set('chart.background.grid.autofit.numhlines', 10);
             waterfall1.Set('chart.background.grid.autofit.numvlines', 14);
             waterfall1.Set('chart.title', 'Ημερήσια χρεοπίστωση');
             waterfall1.Set('chart.colors', ['#1C7994','#DBE9EF','#254264']);
             waterfall1.Set('chart.strokestyle', ['#1A438A']);
             waterfall1.Set('chart.units.pre', '€');
             waterfall1.Set('chart.units.post', '');
             waterfall1.Set('chart.total', true);
             waterfall1.Set('chart.labels', ['Μεταφορές χρημάτων', 'Συναλλαγές', 'Σύνολο']);
             waterfall1.Set('chart.tooltips', ['Μεταφορές χρημάτων',
                                               'Συναλλαγές',
                                               'Σύνολο']);
             waterfall1.Set('chart.highlight.stroke', 'rgba(0,0,0,0)');
             waterfall1.Set('chart.shadow', navigator.userAgent.indexOf('Firefox') == -1);
             waterfall1.Set('chart.shadow.color', '#aaa');
             waterfall1.Set('chart.shadow.blur', 5);
             waterfall1.Set('chart.shadow.offsetx', 0);
             waterfall1.Set('chart.shadow.offsety', 0);
             waterfall1.Set('chart.gutter.left', 50);
             waterfall1.Set('chart.xaxispos', 'center');
       waterfall1.Set('chart.tooltips.event', 'onmousemove');
             RGraph.Effects.Waterfall.Grow(waterfall1);

       // Graph 2
           bar = new RGraph.Bar('chart2', ['0','0','0','0','0','-122.98','619.95','762.64','-700.6','-340.72','-403.22','-9.58','0','3442.49','-2562.47','-504.03','-166.33','0','945.05','0','290.56','-50.4','-131.05','-700.6','-295.08','0','0','-629.96','1765.26','-418.34','-59.48']);
           bar.Set('labels', ['26.06','27.06','28.06','29.06','30.06','01.07','02.07','03.07','04.07','05.07','06.07','07.07','08.07','09.07','10.07','11.07','12.07','13.07','14.07','15.07','16.07','17.07','18.07','19.07','20.07','21.07','22.07','23.07','24.07','25.07','26.07']);
           bar.Set('colors', ['#DAE8EE']);
           bar.Set('ylabels', false);
       bar.Set('chart.title', 'Πρόοδος χρεοπιστώσεων, επί συνόλου λογαριασμού');
       bar.Set('xaxispos', 'center');
       bar.Set('chart.units.pre', '$');
       bar.Set('chart.tooltips.event', 'onmousemove');
       bar.Set('chart.tooltips.hotspot.xonly', 'true');
           RGraph.Effects.Bar.Grow(bar);

           line = new RGraph.Line('chart2', ['0','0','0','0','0','-122.98','619.95','762.64','-700.6','-340.72','-403.22','-9.58','0','3442.49','-2562.47','-504.03','-166.33','0','945.05','0','290.56','-50.4','-131.05','-700.6','-295.08','0','0','-629.96','1765.26','-418.34','-59.48']);
           line.Set('spline', true);
           line.Set('shadow', true);
       line.Set('colors', ['#1C7994']);
           line.Set('tickmarks', 'endsquare');
       line.Set('xaxispos', 'center');
           line.Set('tooltips', '26.06','27.06','28.06','29.06','30.06','01.07','02.07','03.07','04.07','05.07','06.07','07.07','08.07','09.07','10.07','11.07','12.07','13.07','14.07','15.07','16.07','17.07','18.07','19.07','20.07','21.07','22.07','23.07','24.07','25.07','26.07');
       line.Set('chart.linewidth', 2);
           line.Set('hmargin', (line.canvas.width - line.Get('chart.gutter.left') - line.Get('chart.gutter.right')) / (bar.data.length * 2));
          line.ontooltip = function (obj) {
            var canvasXY = RGraph.getCanvasXY(obj.canvas);
            $('.RGraph_tooltip').css('top', (canvasXY[1] - $('.RGraph_tooltip').height() + 20) + 'px');
          }
       //RGraph.Effects.Line.jQuery.Trace(line);
     }
Posted by RGraph support on 6th December 2012
Hi,

Nothing jumps out at me - try taking your charts back to basics and add the options gradually.

There are numerous examples of multiple charts on the RGraph website including the front page.
Posted by Chris on 6th December 2012
Using the very basics, but just having a 2nd canvas element (not used), still doesn't work. Soit seems a problem of the waterfall graph when 2nd canvas is present. HTML markup is ok, header is HTML5 document and using FF 17.x:

    <canvas id="chart1" width="600" height="250">blah blah</canvas>

     <canvas id="chart2" width="1250" height="600">blah blah</canvas>

     <script>
         window.onload = function ()
         {


       // Graph 1
             waterfall1 = new RGraph.Waterfall('chart1', [0,-504.03])
             waterfall1.Set('chart.labels', ['sample', 'sample', 'sample']);
             waterfall1.Set('chart.tooltips', ['sample',
                                               'sample',
                                               'sample']);
   
             waterfall1.Set('chart.xaxispos', 'center');
             RGraph.Effects.Waterfall.Grow(waterfall1);
     }
     </script>
Posted by RGraph support on 6th December 2012
Hi,

Here's a sample of both charts on the same page:

dev.rgraph.net/demos/waterfall03.html
Posted by Chris on 6th December 2012
I had to set chart.tooltips.coords.page to true
Sorry for bothering

Add a reply




« Back to message list