diff options
Diffstat (limited to 'schall/static/RGraph/docs/basic_tooltips.html')
| -rw-r--r-- | schall/static/RGraph/docs/basic_tooltips.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/schall/static/RGraph/docs/basic_tooltips.html b/schall/static/RGraph/docs/basic_tooltips.html new file mode 100644 index 0000000..c3d591c --- /dev/null +++ b/schall/static/RGraph/docs/basic_tooltips.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + --> + + <title>RGraph: HTML5 Javascript charts library - A basic example of Pie charts in tooltips</title> + + <meta name="keywords" content="rgraph javascript charts html5 canvas basic example pie charts tooltips" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - A basic example of Pie charts in tooltips" /> + + <!-- Include the RGraph libraries --> + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]--> + +</head> + +<body> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - A basic example of Pie charts in tooltips</h1> + + <canvas id="myBar" width="1000" height="250">[No canvas support]</canvas> + + <script> + window.onload = function () + { + /** + * This creates the Bar chart + */ + var bar = new RGraph.Bar('myBar', [12,13,16,15]); + bar.Set('chart.gutter.left', 35); + bar.Set('chart.colors', ['red']); + bar.Set('chart.title', 'A basic graph with charts in tooltips'); + bar.Set('chart.labels', ['Kev', 'Brian', 'Fred', 'John']); + + // A function which returns the string which is used as every tooltip + bar.Set('chart.tooltips', function () { return '<canvas id="__tooltip__canvas__" width="300" height="200">[No canvas support]</canvas>';}); + + bar.Draw(); + + + /** + * This is the function which ceates the Pie chart (using the custom ontooltip 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('__tooltip__canvas__', pieData[idx]); + pie.Set('chart.key', ['Monday','Tuesday','Wednesday','Thursday']); + pie.Set('chart.align', 'left'); + pie.Set('chart.gutter.top', 10); + pie.Set('chart.gutter.bottom', 10); + pie.Set('chart.gutter.left', 10); + pie.Set('chart.gutter.right', 10); + pie.Set('chart.exploded', [3,3,3,3]); + pie.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + pie.Draw(); + } + + RGraph.AddCustomEventListener(bar, 'ontooltip', myCreatePieChart); + } + </script> + + <p> + 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 <i>ontooltip</i> event to run some code whhich + then creates the Pie chart in the tooltip. + </p> + +</body> +</html>
\ No newline at end of file |