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.
<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', titleBold: true, titleSize: 16, 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>