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.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.common.effects.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="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> bar = new RGraph.Bar({ id: 'cvs', data: [14,16,18,19,13,14], options: { xaxisLabels: ['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>'; } } }).grow().on('tooltip', 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'], marginTop: 10, labelsList: false, marginBottom: 25, colorsStroke: 'rgba(0,0,0,0)' } }).draw(); }); </script>