source: Dev/trunk/RGraph/docs/basic_tooltips.html @ 195

Last change on this file since 195 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 4.6 KB
Line 
1<?php ob_start('ob_gzhandler') ?>
2<!DOCTYPE html>
3<html>
4<head>
5    <meta http-equiv="X-UA-Compatible" content="chrome=1">
6    <!--
7        /**
8        * o------------------------------------------------------------------------------o
9        * | This file is part of the RGraph package - you can learn more at:             |
10        * |                                                                              |
11        * |                          http://www.rgraph.net                               |
12        * |                                                                              |
13        * | This package is licensed under the RGraph license. For all kinds of business |
14        * | purposes there is a small one-time licensing fee to pay and for non          |
15        * | commercial  purposes it is free to use. You can read the full license here:  |
16        * |                                                                              |
17        * |                      http://www.rgraph.net/LICENSE.txt                       |
18        * o------------------------------------------------------------------------------o
19        */
20    -->
21
22    <title>RGraph: Javascript charts and graph library - A basic example of Pie charts in tooltips</title>
23   
24    <meta name="keywords" content="rgraph javascript charts html5 canvas basic example pie charts tooltips" />
25    <meta name="description" content="RGraph: Javascript charts and graph library -  A basic example of Pie charts in tooltips" />
26
27    <!-- Include the RGraph libraries -->
28    <script src="../libraries/RGraph.common.core.js" ></script>
29    <script src="../libraries/RGraph.common.tooltips.js" ></script>
30    <script src="../libraries/RGraph.bar.js" ></script>
31    <script src="../libraries/RGraph.pie.js" ></script>
32    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
33
34</head>
35
36<body>
37
38    <h1>RGraph: <span>Javascript charts and graph library</span> - A basic example of Pie charts in tooltips</h1>
39
40    <canvas id="myBar" width="1000" height="250">[No canvas support]</canvas>
41
42    <script>
43        window.onload = function ()
44        {
45            /**
46            * This creates the Bar chart
47            */
48            var bar = new RGraph.Bar('myBar', [12,13,16,15]);
49            bar.Set('chart.gutter.left', 35);
50            bar.Set('chart.colors', ['red']);
51            bar.Set('chart.title', 'A basic graph with charts in tooltips');
52            bar.Set('chart.labels', ['Kev', 'Brian', 'Fred', 'John']);
53
54            // A function which returns the string which is used as every tooltip
55            bar.Set('chart.tooltips', function () { return '<canvas id="__tooltip__canvas__" width="300" height="200">[No canvas support]</canvas>';});
56
57            bar.Draw();
58
59
60            /**
61            * This is the function which ceates the Pie chart (using the custom ontooltip RGraph event
62            */
63            function myCreatePieChart(obj)
64            {
65                var canvas  = obj.canvas;
66                var context = obj.context;
67                var id      = obj.id;
68               
69                // This gets the tooltip index from the tooltip (which is stored in the RGraph registry) itself
70                var idx = RGraph.Registry.Get('chart.tooltip').__index__;
71               
72                /**
73                * The Pie chart data. Realistically this would come from a dynamic source,
74                * eg AJAX
75                */
76                var pieData = [
77                               [4,5,3,6],
78                               [8,4,5,2],
79                               [4,3,5,1],
80                               [4,2,1,3]
81                              ];
82               
83                var pie = new RGraph.Pie('__tooltip__canvas__', pieData[idx]);
84                pie.Set('chart.key', ['Monday','Tuesday','Wednesday','Thursday']);
85                pie.Set('chart.align', 'left');
86                pie.Set('chart.gutter.top', 10);
87                pie.Set('chart.gutter.bottom', 10);
88                pie.Set('chart.gutter.left', 10);
89                pie.Set('chart.gutter.right', 10);
90                pie.Set('chart.exploded', [3,3,3,3]);
91                pie.Set('chart.strokestyle', 'rgba(0,0,0,0)');
92                pie.Draw();
93            }
94
95            RGraph.AddCustomEventListener(bar, 'ontooltip', myCreatePieChart);
96        }
97    </script>
98   
99    <p>
100        This is a basic example that shows charts (Pie charts) in tooltips. The canvas element is part of the tooltip
101        HTML code (specified like regular tooltips), and then it uses the <i>ontooltip</i> event to run some code whhich
102        then creates the Pie chart in the tooltip.
103    </p>
104
105</body>
106</html>
Note: See TracBrowser for help on using the repository browser.