source: Dev/branches/jQueryUI/client/RGraph/docs/basic_tooltips.html @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.
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.