source: Dev/trunk/RGraph/docs/external.html @ 134

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

RGraph
File size: 15.5 KB
RevLine 
[77]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    <title>RGraph: Javascript charts and graph library - Integrating RGraph with external libraries</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas charts docs external libraries" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about integrating RGraph with external libraries" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
29
30    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31    <link rel="icon" type="image/png" href="../images/favicon.png">
32
33    <script src="../libraries/RGraph.modaldialog.js" ></script>
34    <script src="../libraries/RGraph.common.core.js" ></script>
35    <script src="../libraries/RGraph.common.context.js" ></script>
36    <script src="../libraries/RGraph.line.js" ></script>
37    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
38   
39    <script>
40        window.onload = function ()
41        {
42            /**
43            * Draw the line chart
44            */
45            var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
46            line.Set('chart.background.barcolor1', 'white');
47            line.Set('chart.background.barcolor2', 'white');
48            line.Set('chart.tickmarks', null);
49            line.Set('chart.hmargin', 10);
50            line.Set('chart.linewidth', 3);
51            line.Set('chart.shadow', true);
52            line.Set('chart.shadow.offset', 2);
53            line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
54            line.Set('chart.title', 'A line chart with context menu');
55
56            // This defines a context menu which shows the dialog. The commented out
57            // bit defines an onclick handler on the background, so that when you
58            // click it (the background), the dialog is hidden.
59            line.Set('chart.contextmenu', [
60                                           ['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);/*ModalDialog.background.onclick = function () {ModalDialog.Close();};*/}],
61                                           null,
62                                           ['Cancel', function () {}]
63                                          ]);
64
65            line.Draw();
66        }
67    </script>
68
69
70    <style>
71        /*
72        * These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
73        * override something which the scripts set, then because of the ordering you may need to use the "! important"
74        * modifier.
75        */
76        .ModalDialog_background {
77        }
78
79        .ModalDialog_dialog {
80            -webkit-box-shadow: gray 0 0 15px ! important;
81            -moz-box-shadow: 0 0 15px gray ! important;
82            box-shadow: 0 0 15px gray ! important;
83        }
84
85        .ModalDialog_topbar {
86        }
87    </style>
88
89    <script>
90      var _gaq = _gaq || [];
91      _gaq.push(['_setAccount', 'UA-54706-2']);
92      _gaq.push(['_trackPageview']);
93   
94      (function() {
95        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
96        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
97        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
98      })();
99    </script>
100
101</head>
102<body>
103
104   
105    <!-- Social networking buttons -->
106        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
107            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
108            <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
109        </div>
110
111        <script>
112            // Opera fix
113            if (navigator.userAgent.indexOf('Opera') == -1) {
114              document.getElementById("social_icons").style.position = 'fixed';
115            }
116        </script>
117    <!-- Social networking buttons -->
118
119
120    <div id="breadcrumb">
121        <a href="../index.html">RGraph: Javascript charts and graph library</a>
122        >
123        <a href="index.html">Documentation</a>
124        >
125        Integrating RGraph with external libraries
126    </div>
127
128    <h1>RGraph: <span>Javascript charts and graph library</span> - Integrating RGraph with external libraries</h1>
129
130    <script>
131        if (RGraph.isIE8()) {
132            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
133        }
134    </script>
135
136    <ul>
137        <li><a href="#msie">Note about Microsoft Internet Explorer and the ModalDialog</a></li>
138        <li><a href="#hiding">Hiding the ModalDialog</a></li>
139        <li><a href="#customising">Customising the ModalDialog</a></li>
140        <li><a href="#integration">ModalDialog integration</a></li>
141        <li><a href="#covering">Covering the scroll bars</a></li>
142    </ul>
143
144    <canvas id="myLine" width="400" height="200" style="float: right">[No canvas support]</canvas>
145
146    <p>
147        This page shows you how you can easily integrate the charts with other external Javascript libraries. This particular example
148        adds a context menu to the chart, of which the only option is to show a login dialog. This could, for example, be used to
149        allow logging in to an admin area.
150    </p>
151   
152    <p>
153        The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a
154        subsequent page loads that takes a few seconds.
155    </p>
156       
157    <p>
158        The ModalDialog was originally an external library, however it's now part of the RGraph package. It's also covered by the
159        RGraph license - so if you have an <a href="licensing.html">RGraph license</a>, then the ModalDialog is part of that.
160    </p>
161
162    <br /><br />
163
164    <pre class="code">
165&lt;script src="RGraph.common.core.js"&gt;
166&lt;script src="RGraph.common.context.js"&gt;
167&lt;script src="RGraph.line.js"&gt;
168&lt;script src="RGraph.modaldialog.js"&gt;
169
170&lt;script&gt;
171    window.onload = function ()
172    {
173        /**
174        * Draw the line chart
175        */
176        var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
177        line.Set('chart.background.barcolor1', 'white');
178        line.Set('chart.background.barcolor2', 'white');
179        line.Set('chart.tickmarks', null);
180        line.Set('chart.hmargin', 10);
181        line.Set('chart.linewidth', 3);
182        line.Set('chart.shadow', true);
183        line.Set('chart.shadow.offset', 2);
184        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
185        line.Set('chart.title', 'A line chart with context menu');
186        <span style="color: green">
187        // This defines a context menu which calls the given function. This function in turn shows the dialog
188        line.Set('chart.contextmenu', [['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);}}]]);
189        </span>
190        line.Draw();
191    }
192&lt;/script&gt;
193
194&lt;!-- This is the popup dialog--&gt;
195    &lt;div id="myDialog" class="modalDialog" style="display: none"&gt;
196        &lt;b&gt;Please login&lt;/b&gt;
197        &lt;p&gt;
198            &lt;table border="0"&gt;
199                &lt;tr&gt;
200                    &lt;td align="right" style="padding-top: 4px"&gt;Email&lt;/td&gt;
201                    &lt;td&gt;&lt;input type="text" size="20" name="email" style="width: 150px" />&lt;/td&gt;
202                &lt;/tr&gt;
203                &lt;tr&gt;
204                    &lt;td align="right" style="padding-top: 4px"&gt;Password&lt;/td&gt;
205                    &lt;td&gt;&lt;input type="password" size="20" name="password" style="width: 150px" /&gt;&lt;/td&gt;
206                &lt;/tr&gt;
207                &lt;tr&gt;
208                    &lt;td colspan="2" align="right"&gt;
209                        &lt;input type="reset" value="Cancel" onclick="ModalDialog.Close()"&gt;
210                        &lt;input type="submit"
211                                  name="submit"
212                                  value="Login &raquo;"
213                                  onclick="alert('This is just an example'); event.stopPropagation()"&gt;
214                    &lt;/td&gt;
215                &lt;/tr&gt;
216            &lt;/table&gt;
217        &lt;/p&gt;
218    &lt;/div&gt;
219&lt;!-- End of dialog --&gt;</pre>
220
221    <p>
222        If you're interested in using this modal dialog, then you'll probably also want the CSS that styles it. This can be found in the
223        &quot;css&quot; directory.
224    </p>
225
226    <a name="msie"></a>
227    <h3>Note about Microsoft Internet Explorer 8 and the ModalDialog</h3>
228   
229    <p>
230        Microsoft Internet Explorer 8 only supports fixed positioning in strict rendering mode, therefore you must specify a DTD
231        when using this browser. Eg:
232    </p>
233   
234    <pre class="code">
235&lt;!DOCTYPE html &gt;
236</pre>
237
238    <a name="hiding"></a>
239    <h3>Hiding the ModalDialog</h3>
240    <p>
241        To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method:
242    </p>
243   
244    <pre class="code">
245&lt;input type="reset" value="Cancel" onclick="ModalDialog.Close()"&gt;
246</pre>
247
248    <a name="customising"></a>
249    <h3>Customising the ModalDialog</h3>
250        <p>
251            You can customise the appearance of the ModalDialog by using three CSS classes, which are documented <a href="css.html">here</a>.
252            This page customises the dialog slightly by changing the shadow X/Y offsets:
253        </p>
254       
255        <pre class="code">
256&lt;style&gt;
257    /*
258    * These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
259    * override something which the scripts set, then because of the ordering you may need to use the "! important"
260    * modifier.
261    */
262   
263    /**
264    * This is the semi-opaque background
265    */
266    .ModalDialog_background {
267    }
268
269
270    /**
271    * This is the dialog itself
272    */
273    .ModalDialog_dialog {
274        -webkit-box-shadow: gray 0 0 15px ! important;
275        -moz-box-shadow: 0 0 15px gray ! important;
276        box-shadow: 0 0 15px gray ! important;
277    }
278
279
280    /**
281    * This is gray bar at the top of the dialog
282    */
283    .ModalDialog_topbar {
284    }
285&lt;/style&gt;
286</pre>
287
288    <a name="integration"></a>
289    <h3>ModalDialog integration</h3>
290        <p>
291            To integrate the ModalDialog look at the sample code above (the key line is where the context menu is defined). The method you should call is <b>ModalDialog.Show(id, width)</b>.
292            The <i>id</i> is the <i>id</i> of the layer to use. Only the <i>.innerHTML</i> is used, not the layer itself, so it can be hidden by
293            setting the display CSS <i>display</i> property to <i>none</i>. The <i>width</i> is a number which is used as the width of the dialog.
294        </p>
295       
296        <p>
297            The only library needed for the ModalDialog to work is <i>RGraph.modaldialog.js</i> - you do not need to use
298            <i>RGraph.common.js</i>. This makes for far smaller download requirements.
299        </p>
300
301    <a name="covering"></a>
302    <h3>Covering the scroll bars</h3>
303        <p>
304            Normally, a regular DIV lives inside the browser and cannot cover the scroll bars. There is however a way to achieve
305            this but it does mean that restructuring your website may be necessary, and it's done by using an IFRAME. The following
306            steps are involved:
307        </p>
308       
309        <ol>
310            <li style="margin-top: 0">The index page of your website creates an IFRAME and sets it to cover the entire window.</li>
311            <li style="margin-top: 0">This IFRAME then loads the website.</li>
312            <li style="margin-top: 0">The DIV then covers the top-most window.</li></li>
313        </ol>
314       
315        <p style="margin-bottom: 50px">
316            There is an example of this technique <a href="iframe-setup.html"><b>here</b></a>
317        </p>
318
319    <!-- This is the popup dialog-->
320
321        <div id="myDialog" class="modalDialog" style="display: none">
322
323            <b>Please login</b>
324            <p>
325                <table border="0">
326                    <tr>
327                        <td align="right" style="padding-top: 4px">Email</td>
328                        <td><input type="text" size="20" name="email" style="width: 150px" /></td>
329                    </tr>
330
331                    <tr>
332                        <td align="right" style="padding-top: 4px">Password</td>
333                        <td><input type="password" size="20" name="password" style="width: 150px" /></td>
334                    </tr>
335                   
336                    <tr>
337                        <td colspan="2" align="right">
338                            <input type="reset" value="Cancel" onclick="ModalDialog.Close()">
339                            <input type="submit" name="submit" value="Login &raquo;" onclick="alert('This is just an example'); event.stopPropagation()">
340                        </td>
341                    </tr>
342                </table>
343            </p>
344        </div>
345
346    <!-- End of dialog -->
347
348</body>
349</html>
Note: See TracBrowser for help on using the repository browser.