Chart with chart in tooltips (exemple bar08.html)


« 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
Hi

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 >
<html>
<head>
     <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/RGraph.bar.js" ></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>
</head>
<body>
        
     <h1>A Bar chart with Pie charts in tooltips</h1>
    
     <p>
         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.
     </p>

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

     <script>
         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>';
                                  });
             RGraph.Effects.Bar.Grow(bar8);


             /**
             * The ontooltip event runs when a tooltip is shown and creates the Pie chart in the tooltip
             */
             bar8.ontooltip = function (obj)
             {
                 var pie_data = [
                                 [80,75,65],
                                 [84,85,95],
                                 [43,54,85],
                                 [43,51,62],
                                 [74,75,65],
                                 [78,85,95]
                                ]
    
     var pie_labels = [
                                 ['Paul','Robert','Jerry'],
                                 ['Jhon','Phill','Mike'],
                                 ['Tom','Willian','Berry'],
                                 ['Rachel','Barack','Jessy'],
                                 ['Will','James','Chrys'],
                                 ['Pam','Angie','Sam']
                                ]
     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('gutter.top', 10);
                 pie.Set('gutter.bottom', 25);
     pie.Set('tooltips', pie_tooltips[index]);
                 pie.Draw();
             }
         }
     </script>


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

</body>
</html>
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:

dev.rgraph.net/demos/bar-pie-charts-tooltips.html


PS Please remember to link to the RGraph website - thanks!




Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Guilherme Kuntze on 4th June 2013
Hello

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...

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

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

www.rgraph.net/fiddle/view/8c01f9c8322a7aee886321536b68c8f4




Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer

Add a reply

 




« Back to message list
RGraph on social media