source: Dev/trunk/RGraph/docs/annotate_persist.html @ 158

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

RGraph
File size: 13.2 KB
Line 
1<?php
2    /**
3    * Save the annotations to a tmp file
4    */
5    if (isset($_POST) && isset($_POST['data'])) {
6        file_put_contents('/tmp/annotation_data', $_POST['data']);
7        exit;
8    }
9
10
11    /**
12    * Load the annotations
13    */
14    if (!empty($_GET['getannotations']) && $_GET['getannotations'] == 12) {// An arbitrary number
15        echo file_get_contents('/tmp/annotation_data');
16        exit;
17    }
18   
19    ob_start('ob_gzhandler');
20?>
21<!DOCTYPE html >
22<html>
23<head>
24    <meta http-equiv="X-UA-Compatible" content="chrome=1">
25    <!--
26        /**
27        * o------------------------------------------------------------------------------o
28        * | This file is part of the RGraph package - you can learn more at:             |
29        * |                                                                              |
30        * |                          http://www.rgraph.net                               |
31        * |                                                                              |
32        * | This package is licensed under the RGraph license. For all kinds of business |
33        * | purposes there is a small one-time licensing fee to pay and for non          |
34        * | commercial  purposes it is free to use. You can read the full license here:  |
35        * |                                                                              |
36        * |                      http://www.rgraph.net/LICENSE.txt                       |
37        * o------------------------------------------------------------------------------o
38        */
39    -->
40    <title>RGraph: Javascript charts and graph library - Making annotations shareable cross browser</title>
41
42    <meta name="keywords" content="rgraph html5 canvas chart docs annotating shareable cross browser" />
43    <meta name="description" content="RGraph: Javascript charts and graph library - Making annotations shareable cross browser" />
44   
45    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
46    <meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
47    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
48
49    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
50    <link rel="icon" type="image/png" href="../images/favicon.png">
51
52    <script src="../libraries/RGraph.common.core.js"></script>
53    <script src="../libraries/RGraph.common.annotate.js"></script>
54    <script src="../libraries/RGraph.common.context.js"></script>
55    <script src="../libraries/RGraph.line.js"></script>
56   
57    <script>
58        /**
59        * The function that loads the annotations from the server
60        */
61        function LoadAnnotations ()
62        {
63            var canvasPosition = RGraph.getCanvasXY(g.canvas);
64            var div = document.createElement('DIV');
65
66            div.style.backgroundColor = 'white';
67            div.style.padding = '3px';
68            div.style.position = 'absolute';
69            div.style.left = canvasPosition[0] + 5 + 'px';
70            div.style.top  = canvasPosition[1] + 5 + 'px';
71            div.style.color = 'gray';
72            div.style.opacity = 1;
73            div.style.border = '2px solid black';
74            div.style.zIndex = 99;
75            div.innerHTML  = 'Loading annotations...';
76            document.body.appendChild(div);
77           
78            div2 = document.createElement('DIV');
79            div2.style.backgroundColor = 'gray';
80            div2.style.opacity = 0.5;
81            div2.style.position = 'absolute';
82            div2.style.left = canvasPosition[0] + 'px';
83            div2.style.top  = canvasPosition[1] + 'px';
84            div2.style.width = g.canvas.width + 'px';
85            div2.style.height = g.canvas.height + 'px';
86            //div2.style.zIndex = 98;
87            document.body.appendChild(div2);
88
89            window.localStorage['__rgraph_annotations_cvs__'] = '';
90            AjaxGet('annotate_persist.html?getannotations=12',
91
92function ()
93{
94    if (this.readyState == 4 && this.status == 200) {
95        window.localStorage['__rgraph_annotations_cvs__'] = this.responseText;
96       
97        RGraph.ReplayAnnotations(g);
98       
99        setTimeout(function () {div.style.opacity = 0.8; div2.style.opacity = 0.4;}, 50);
100        setTimeout(function () {div.style.opacity = 0.6;div2.style.opacity = 0.3;}, 100);
101        setTimeout(function () {div.style.opacity = 0.4;div2.style.opacity = 0.2;}, 150);
102        setTimeout(function () {div.style.opacity = 0.2;div2.style.opacity = 0.1;}, 200);
103        setTimeout(function () {div.style.opacity = 0;div2.style.opacity = 0;}, 250);
104        setTimeout(function () {div.style.display = 'none';div2.style.display = 'none';}, 300);
105    }
106}
107            );
108        }
109
110
111
112        /**
113        * The function that saves annotations to the server
114        */
115        function SaveAnnotations ()
116        {
117
118            var canvasPosition = RGraph.getCanvasXY(g.canvas);
119            var div = document.createElement('DIV');
120
121            div.style.backgroundColor = 'white';
122            div.style.padding = '3px';
123            div.style.position = 'absolute';
124            div.style.left = canvasPosition[0] + 5 + 'px';
125            div.style.top  = canvasPosition[1] + 5 + 'px';
126            div.style.color = 'gray';
127            div.style.opacity = 1;
128            div.style.border = '2px solid black';
129            div.style.zIndex = 99;
130            div.innerHTML  = 'Saving annotations...';
131            document.body.appendChild(div);
132
133            AjaxPost('annotate_persist.html', 'data=' + window.localStorage['__rgraph_annotations_cvs__']);
134           
135            setTimeout(function () {div.style.opacity = 0.8}, 50);
136            setTimeout(function () {div.style.opacity = 0.6}, 100);
137            setTimeout(function () {div.style.opacity = 0.4}, 150);
138            setTimeout(function () {div.style.opacity = 0.2}, 200);
139            setTimeout(function () {div.style.opacity = 0; div.style.display = 'none';}, 250);
140        }
141
142
143
144        /**
145        * Makes an AJAX POST.
146        */
147        function AjaxPost (url, data)
148        {
149            // Mozilla, Safari, ...
150            if (window.XMLHttpRequest) {
151                var httpRequest = new XMLHttpRequest();
152           
153            // MSIE
154            } else if (window.ActiveXObject) {
155                var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
156            }
157           
158            //httpRequest.onreadystatechange = callback;
159           
160            httpRequest.open('POST', url, true);
161            httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
162            httpRequest.send(data);
163        }
164
165        /**
166        * Makes an AJAX call. It calls the given callback (a function) when ready
167        *
168        * @param string   url      The URL to retrieve
169        * @param function callback A function object that is called when the response is ready, there's an example below
170        *                          called "myCallback".
171        */
172        function AjaxGet (url, callback)
173        {
174            // Mozilla, Safari, ...
175            if (window.XMLHttpRequest) {
176                var httpRequest = new XMLHttpRequest();
177           
178            // MSIE
179            } else if (window.ActiveXObject) {
180                var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
181            }
182           
183            httpRequest.onreadystatechange = callback;
184           
185            httpRequest.open('GET', url, true);
186            httpRequest.send();
187        }
188
189
190
191        window.onload = function (e)
192        {
193            /**
194            * This clears the locally stored annotations so that they can be loaded from server
195            */           
196            window.localStorage['__rgraph_annotations_cvs__'] = '';
197
198            g = new RGraph.Line('cvs', [5,6,3,4,8,6,7,5,9]);
199            g.Set('chart.tickmarks', 'endcircle');
200            g.Set('chart.hmargin', 5);
201            g.Set('chart.annotatable', true);
202            g.Set('chart.labels', ['Ben','Olga','Jeff','Indigo','Kev','Pete','Lou','Fred','John']);
203            g.Set('chart.contextmenu', [['Show palette', RGraph.Showpalette], ['Clear', function () {RGraph.Clear(g.canvas);g.Draw();}]]);
204            g.Set('chart.shadow', true);
205            g.Set('chart.linewidth', 1.01);
206            g.Set('chart.ylabels.count', 10);
207            g.Draw();
208           
209            LoadAnnotations();
210           
211            RGraph.AddCustomEventListener(g, 'onannotateend', function (obj) {SaveAnnotations();});
212            RGraph.AddCustomEventListener(g, 'onannotateclear', function (obj) {SaveAnnotations();});
213        }
214    </script>
215
216
217    <script>
218      var _gaq = _gaq || [];
219      _gaq.push(['_setAccount', 'UA-54706-2']);
220      _gaq.push(['_trackPageview']);
221   
222      (function() {
223        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
224        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
225        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
226      })();
227    </script>
228</head>
229<body>
230   
231    <!-- Social networking buttons -->
232        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
233            <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>
234            <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>
235        </div>
236
237        <script>
238            // Opera fix
239            if (navigator.userAgent.indexOf('Opera') == -1) {
240              document.getElementById("social_icons").style.position = 'fixed';
241            }
242        </script>
243    <!-- Social networking buttons -->
244
245    <div id="breadcrumb">
246        <a href="../index.html">RGraph: Javascript charts and graph library</a>
247        >
248        <a href="index.html">Documentation</a>
249        >
250        Making annotations shareable cross browser
251    </div>
252
253    <h1>RGraph: <span>Javascript charts and graph library</span> - Making annotations shareable cross browser</h1>
254
255    <div style="text-align: center">
256        <div class="warning" style="display: inline-block">
257            This example does not work offline - you must use a website. Annotations are removed every five minutes.
258        </div>
259    </div>
260
261    <script>
262        if (RGraph.isIE8()) {
263            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>');
264        }
265    </script>
266
267    <canvas id="cvs" width="600" height="250" style="float: right">[No canvas support]</canvas>
268
269    <p>
270        Combining a little AJAX and some very simple server side scripting, you can easily make an annotation system that can persist
271        across different browsers and computers. You an either use Load/Save buttons to trigger the loading and saving, or like the
272        example to the right you can make use of the custom RGraph onannotateend event to make it happen automatically.
273    </p>
274   
275    <p>
276        This simple example uses a small PHP server side script that loads and saves the annotation data to a file on the server,
277        and that looks like this:
278    </p>
279
280    <br clear="all" />
281
282    <pre class="code">
283&lt;?php
284    $file = '/tmp/annotation_data';
285
286    /**
287    * Save the annotations to a tmp file
288    */
289    if (isset($_POST) && isset($_POST['data'])) {
290        file_put_contents($file, $_POST['data']);
291        exit;
292    }
293
294
295    /**
296    * Load the annotations
297    */
298    if (!empty($_GET['getannotations']) && $_GET['getannotations'] == 1) {
299        $contents = file_get_contents($file);
300        print($contents);
301        exit;
302    }
303?&gt;
304</pre>
305
306    <p>
307        By making the Javascript Save/Load functions repeat themselves every few seconds, you could easily make a presentation/demo system
308        that can be used when paticipants are in differing locations - in a similar fashion to Google Docs - or when you want one persons
309        annotations to be viewable by multiple PCs. On this page  though, the Save function is triggered by the custom RGraph event
310        <i>onannotateend</i>.
311    </p>
312
313</body>
314</html>
Note: See TracBrowser for help on using the repository browser.