/home/mip/mip/public/template/AdminLTE/plugins/RGraph/demos/bar-pie-charts-tooltips.html
<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.pie.js" ></script>
    
    <title>A Bar chart with Pie charts in tooltips</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A Bar chart that has tooltips and uses the ontooltip event to add Pie charts to the tooltips" />
     
</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 bar = new RGraph.Bar({
                id: 'cvs',
                data: [14,16,18,19,13,14],
                options: {
                    labels: ['Fred','John','James','Louis','Pete','Kevin'],
                    tooltips: function (index)
                    {
                        var label = bar.Get('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>';
                    },
                    textAccessible: true
                }
            }).grow();


            /**
            * The ontooltip event runs when a tooltip is shown and creates the Pie chart in the tooltip
            */
            bar.ontooltip = function (obj)
            {
                var pie_data = [
                    [80,75,65],
                    [84,85,95],
                    [43,54,85],
                    [43,51,62],
                    [74,75,65],
                    [78,85,95],
                    [46,35,52],
                    [84,94,94]
                ]
                var tooltip = RGraph.Registry.Get('chart.tooltip');
                var index   = tooltip.__index__;
                
                RGraph.reset(document.getElementById("tooltip_canvas"));

                var pie = new RGraph.Pie({
                    id: 'tooltip_canvas',
                    data: pie_data[index],
                    options: {
                        labels: ['Monday','Tuesday','Wednesday'],
                        gutterTop: 10,
                        gutterBottom: 25,
                        strokestyle: 'rgba(0,0,0,0)'
                    }
                }).draw()
                
                pie.onmousemove = function (e, shape)
                {
                    alert('An alert triggered by the Pie chart! Segment: ' + shape.index);
                }
            }
        };
    </script>







    <p></p>

    This goes in the documents header:
    <pre class="code">
&lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.dynamic.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.tooltips.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.effects.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.pie.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.bar.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;canvas id="cvs" width="600" height="250"&gt;
    [No canvas support]
&lt;/canvas&gt;
</pre>

    This is the code that generates the chart:
    <pre class="code">
&lt;script&gt;
    window.onload = function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [14,16,18,19,13,14],
            options: {
                labels: ['Fred','John','James','Louis','Pete','Kevin'],
                tooltips: function (index)
                {
                    var label = bar8.Get('labels')[index];
                    return '&lt;div style="text-align: center; font-weight: bold; font-size: 16pt"&gt;' + label + '&lt;/div&gt;&lt;br  /&gt;&lt;canvas id="tooltip_canvas" width="250" height="110"&gt;&lt;/canvas&gt;';
                },
                textAccessible: true
            }
        }).grow();


        <span>/**
        * The ontooltip event runs when a tooltip is shown and creates the Pie chart in the tooltip
        */</span>
        bar.ontooltip = function (obj)
        {
            var pie_data = [
                [80,75,65],
                [84,85,95],
                [43,54,85],
                [43,51,62],
                [74,75,65],
                [78,85,95],
                [46,35,52],
                [84,94,94]
            ]
            var tooltip = RGraph.Registry.Get('chart.tooltip');
            var index   = tooltip.__index__;

            var pie = new RGraph.Pie({
                id: 'tooltip_canvas',
                data: pie_data[index],
                options: {
                    labels: ['Monday','Tuesday','Wednesday'],
                    gutterTop: 10,
                    gutterBottom: 25,
                    strokestyle: 'rgba(0,0,0,0)'
                }
            }).draw()
            
            pie.onmousemove = function (e, shape)
            {
                alert('An alert triggered by the Pie chart! Segment: ' + shape.index);
            }
        }
    };
&lt;/script&gt;
</pre>


    <p>
        <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net', null, 'top=50,left=50,width=600,height=368'); return false"><img src="../images/facebook-large.png" width="200" height="43" alt="Share on Facebook" border="0" title="Visit the RGraph Facebook page" /></a>
        <a href="https://twitter.com/_rgraph" target="_blank" onclick="window.open('https://twitter.com/_rgraph', null, 'top=50,left=50,width=700,height=400'); return false"><img src="../images/twitter-large.png" width="200" height="43" alt="Share on Twitter" border="0" title="Mention RGraph on Twitter" /></a>
        
    </p>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>
Path: home/mip/mip/public/template/AdminLTE/plugins/RGraph/demos