A basic example of Pie charts in tooltips

[No canvas support]

This is a basic example that shows charts (Pie charts) in tooltips. The canvas element is part of the tooltip HTML code (specified like regular tooltips) and then it uses the tooltip event to run some code which then creates the Pie chart in the tooltip.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.pie.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="1000" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    /**
    * This creates the Bar chart
    */
    var bar = new RGraph.Bar({
        id: 'myBar',
        data: [12,13,16,15],
        options: {
            marginLeft: 35,
            colors: ['red'],
            title: 'A basic graph with charts in tooltips',
            xaxisLabels: ['Kev', 'Brian', 'Fred', 'John']
        }
    });

    // A function which returns the string which is used as every tooltip
    window.__mybar__ = bar;
    bar.set('tooltips', function (idx)
    {
        return '<div style="text-align: center"><h3 style="margin: 0">' + window.__mybar__.Get('labels')[idx] + '\'s statistics:</h3><canvas id="__tooltip__canvas__" width="100" height="100" data-l="false">[No canvas support]</canvas></div>';
    });

    bar.draw();


    /**
    * This is the function which creates the Pie chart (using the custom tooltip RGraph event
    */
    function myCreatePieChart(obj)
    {
        var canvas  = obj.canvas;
        var context = obj.context;
        var id      = obj.id;
        
        // This gets the tooltip index from the tooltip (which is stored in the RGraph registry) itself
        var idx = RGraph.Registry.get('chart.tooltip').__index__;
        
        /**
        * The Pie chart data. Realistically this would come from a dynamic source
        * eg AJAX
        */
        var pieData = [
            [4,5,3,6],
            [8,4,5,2],
            [4,3,5,1],
            [4,2,1,3]
        ];
        
        var pie = new RGraph.Pie({
            id: '__tooltip__canvas__',
            data: pieData[idx],
            options: {
                align: 'left',
                marginTop: 10,
                marginBottom: 10,
                marginLeft: 10,
                marginRight: 10,
                exploded: [3,3,3,3],
                colorsStroke: 'rgba(0,0,0,0)'
            }
        }).draw();
    }

    RGraph.addCustomEventListener(bar, 'ontooltip', myCreatePieChart);
</script>