Share: Bookmark with delicious tweet this site Post to Facebook

RGraph: HTML5 canvas graph library - Making annotations shareable cross browser

This example does not work offline - you must use a website. Annotations are removed every five minutes.
[No canvas support]

Combining a little AJAX and some very simple server side scripting, you can easily make an annotation system that can persist across different browsers and computers. You an either use Load/Save buttons to trigger the loading and saving, or like the example to the right you can make use of the custom RGraph onannotateend event to make it happen automatically.

This simple example uses a small PHP server side script that loads and saves the annotation data to a file on the server, and that looks like this:


<?php
    $file = '/tmp/annotation_data';

    /**
    * Save the annotations to a tmp file
    */
    if (isset($_POST) && isset($_POST['data'])) {
        file_put_contents($file, $_POST['data']);
        exit;
    }


    /**
    * Load the annotations
    */
    if (!empty($_GET['getannotations']) && $_GET['getannotations'] == 1) {
        $contents = file_get_contents($file);
        print($contents);
        exit;
    }
?>

By making the Javascript Save/Load functions repeat themselves every few seconds, you could easily make a presentation/demo system that can be used when paticipants are in differing locations - in a similar fashion to Google Docs - or when you want one persons annotations to be viewable by multiple PCs. On this page though, the Save function is triggered by the custom RGraph event onannotateend.