Chart with more charts in the tooltips

« 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 Guilherme Kuntze on 23rd May 2013

I looking for this type of chart and I would like to know if is possible active click action in the second chart, like, I click in the first chart and open the new chart by tooltip, than I click in the second chart and show a simple tooltip just with text.

Following example:

<!DOCTYPE html >
     <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
     <script type="text/javascript" src="../libraries/RGraph.common.core.js" ></script>
     <script type="text/javascript" src="../libraries/RGraph.common.dynamic.js" ></script>
     <script type="text/javascript" src="../libraries/RGraph.common.effects.js" ></script>
     <script type="text/javascript" src="../libraries/RGraph.common.tooltips.js" ></script>
     <script type="text/javascript" src="../libraries/" ></script>
     <script type="text/javascript" src="../libraries/RGraph.pie.js" ></script>
     <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
     <title>A Bar chart with Pie charts in tooltips</title>
     <h1>A Bar chart with Pie charts in tooltips</h1>
         This Bar chart shows how you can have charts in tooltips. It uses the new DOM1 style of adding
         the ontooltip event. This ontooltip event creates the chart in the tooltip.

     <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

         window.onload = function ()
             var bar8 = new RGraph.Bar('cvs', [14,16,18,19,13,14])
             bar8.Set('labels', ['Fred','John','James','Louis','Pete','Kevin']);
             bar8.Set('tooltips', function (index)
                                      var label = bar8.Get('chart.labels')[index];
                                      return '<div style="text-align: center; font-weight: bold; font-size: 16pt">' + label + '</div><br /><canvas id="tooltip_canvas" width="250" height="110"></canvas>';

             * The ontooltip event runs when a tooltip is shown and creates the Pie chart in the tooltip
             bar8.ontooltip = function (obj)
                 var pie_data = [
     var pie_labels = [
     var pie_tooltips = [
                                 ['Age: 10','Age: 15','Age: 19'],
                                 ['fAge: 20','Age: 19','Age: 20'],
                                 ['Age: 22','Age: 21','Age: 35'],
                                 ['Age: 21','Age: 17','Age: 12'],
                                 ['Age: 30','Age: 10','Age: 14'],
                                 ['Age: 45','Age: 9','Age: 16']
                 var tooltip = RGraph.Registry.Get('chart.tooltip');
                 var index = tooltip.__index__;
                 var pie = new RGraph.Pie('tooltip_canvas', pie_data[index]);
                 pie.Set('labels', pie_labels[index]);
                 pie.Set('', 10);
                 pie.Set('gutter.bottom', 25);
     pie.Set('tooltips', pie_tooltips[index]);

         <a href="./">« Back</a>

Posted by RGraph support on 24th May 2013
Hi there,

It's technically feasible if you use the onmousemove event on the tooltip chart to trigger the second DIV. Then you could add something to the window onlick function (using window.addEventListener('click', function() {...}, false) ) so that a click clears the second DIV. I've updated the example to show a simple alert() when the Pie chart is mouseover'ed

Posted by Guilherme Kuntze on 4th June 2013

With this example above I could draw a chart with another chart in tooltips, but I'm having problem to use it with grouped chart, I would like to know if it's necessary make something different and if have some example of how to make...

Posted by RGraph support on 4th June 2013
Hi there,

There's an example of a grouped chart with Pie charts in tooltips here:

Richard, RGraph Support

Add a reply

« Back to message list