From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- schall/static/RGraph/docs/index.html | 909 +++++++++++++++++++++++++++++++++++ 1 file changed, 909 insertions(+) create mode 100644 schall/static/RGraph/docs/index.html (limited to 'schall/static/RGraph/docs/index.html') diff --git a/schall/static/RGraph/docs/index.html b/schall/static/RGraph/docs/index.html new file mode 100644 index 0000000..116fddb --- /dev/null +++ b/schall/static/RGraph/docs/index.html @@ -0,0 +1,909 @@ + + + + + + RGraph: HTML5 Javascript charts library - documentation + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Documentation and HTML5 examples

+ + + +
+
+ Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please + contact support to discuss your requirements. +
+
+ +
+

Introduction

+ + + + +
+ + +
+

Chart types

+ + +

Basic examples

+ + +
+ +
+ +

Features

+ + + + + +
+ +
+

Miscellaneous

+ + +

On this page:

+ + +
+ + + + + + + +
+
+ + + + +
 
 
+

Benefits of RGraph: HTML5 Javascript charts library

+ +

+ The HTML5 canvas tag is a new tag for HTML5. It allows for two dimensional drawing easily using Javascript. + This makes it perfect for producing charts. Because Javascript runs on your users' computer, none of the load on your web server + normally associated with producing charts is incurred. Not only that but because + of the greater processing power that is typically available on users' computers, they will be much faster. And, + because the code can be both compressed (for example if you're using Apache, mod_gzip will do this automatically for you) and + cached, bandwidth usage can be massively reduced. This makes it economically attractive to employ at the same time as + benefiting your website, ie: +

+ + + +

+ Imagine, you are creating 10,000 charts a day and the data is such that the resulting charts cannot be cached. With the RGraph + library you can reduce that figure to zero. All the processing is done by each individual web browser, much like + showing the HTML that you send to them. So you don't have to send any images, you simply send them the Javascript charts libraries + once. So, much lower bandwidth bills and less strain on your webserver. +

+ +

+ And if that wasn't enough, because the charts are created using Javascript, they will work offline if you view a .html page + on your own PC. Download the archive and see! Useful if you need to do a presentation (for example) and want to use the same + charts as your website. +

+ +
+
+
    +
  • Cross browser support.
    • +
  • 20+ Different base chart types (Examples).
    • +
  • Charts work on and off-line.
    • +
  • Interactive features.
    • +
+
+ +
+
    +
  • Charts are created on the client - no server overhead.
    • +
  • Very easy setup (see Implementing RGraph).
    • +
  • Fully documented.
    • +
  • Very easy to learn.
    • +
+
+
+ + + +
 
 
+

Browser support

+ +

+ Since the charts are produced using HTML5 features (the new canvas tag), client support includes: +

+ + + +

+ The HTML5 canvas tag is part of the HTML5 specification, + and all of the above browsers have some sort of support for it. +

+ +

+ HTML5 canvas & Microsoft Internet Explorer (MSIE)
+ Microsoft Internet Explorer 8 doesn't natively support the HTML5 canvas tag. To support + MSIE8 you will need to use either + Google Chrome Frame or + ExCanvas from Google + (which is included in the RGraph archive). Read more about Internet Explorer compatibility + here. + +

+ + + Starting from the developer preview 3, Microsoft Internet Explorer 9 has full support for + HTML5 canvas. + MSIE 6 and 7 are supported by way of Google Chrome Frame. + +

+ +

+ RGraph and older browsers
+ Older browsers (eg Chrome 1, Firefox 3, Safari 3, Opera 9.5) are supported, however if they don't support the canvas shadow or + text APIs, these will naturally be unavailable. Earlier versions of these browsers may work, but are untested. +

+ +

+ Other devices
+ Other devices (eg mobile devices) may support or may be intending to support the HTML5 CANVAS tag as part of their HTML5 support. Typically + the newer a device or its OS the higher the likelyhood is that it has support for HTML5 canvas. +

+ + +
 
 
+

Improving the performance of your charts

+ +

+ Although performance is excellent, (eg compared to server based charts libraries), you may still want to tune + RGraph further. The biggest thing you can do is use HTTP compression, which reduces the initial download time of the libraries, + but there are a number of things you can do: +

+ + + + A reasonable performance strategy + +

+ Although there's a lot you can do in regards to performance, a few of the points here will suffice for most + websites: + +

+ + The number one thing you should do is compress your libraries. This has multiple benefits and provides by far the most gain, + effectively for free. Secondly, use the minified libraries. Since you can download them here, + you might as well use them. Then we have pre-emptive caching. Since most websites won't show charts on the front page or will + have a login page that is shown before any charts, this effectively eliminates the charts library download. And lastly caching + should be done as a matter of course. There's no reason to keep downloading the same library so even caching for only 30 minutes + (or the duration of an average visit to your website) will produce results. +

+ +

+ General website performance tools

+ + If your aim is to improve your websites performance as a whole then you may be interested in these tools: +

+ + + + +
 
 
+

Implementing RGraph

+ +

+ Getting RGraph up and running is very easy and consists of three steps. If you're having trouble I suggest you get hold of a copy of + Firefox along with Firebug - its + Javascript error console will make debugging your issue much easier. Many problems are down to a library not having been included or + not using the onload event when you need to. You might also benefit from using the Web Developer toolbar + for Firefox. This allows you to easily disable caching, thus eliminating any problems that that causes. You could equally use + the Chrome developer tools (CTRL+SHIFT+J), optionally in docked mode, which also provides a good quality Javascript console. +

+ +
    +
  1. + Include the libraries (put this in your documents <HEAD>): +
    +<script src="RGraph.common.core.js"></script>
+
+<script src="RGraph.common.adjusting.js"></script> <!-- Just needed for adjusting -->
+<script src="RGraph.common.annotate.js"></script>  <!-- Just needed for annotating -->
+<script src="RGraph.common.context.js"></script>   <!-- Just needed for context menus -->
+<script src="RGraph.common.effects.js"></script>   <!-- Just needed for visual effects -->
+<script src="RGraph.common.resizing.js"></script>  <!-- Just needed for resizing -->
+<script src="RGraph.common.tooltips.js"></script>  <!-- Just needed for tooltips -->
+<script src="RGraph.common.zoom.js"></script>      <!-- Just needed for zoom -->
+
+<script src="RGraph.bar.js"></script>              <!-- Just needed for bar charts -->
+<script src="RGraph.bipolar.js"></script>          <!-- Just needed for bi-polar charts -->
+<script src="RGraph.fuel.js"></script>             <!-- Just needed for fuel charts -->
+<script src="RGraph.funnel.js"></script>           <!-- Just needed for funnel charts -->
+<script src="RGraph.gantt.js"></script>            <!-- Just needed for gantt charts -->
+<script src="RGraph.gauge.js"></script>            <!-- Just needed for gauge charts -->
+<script src="RGraph.hbar.js"></script>             <!-- Just needed for horizontal bar charts -->
+<script src="RGraph.hprogress.js"></script>        <!-- Just needed for horizontal progress bars -->
+<script src="RGraph.led.js"></script>              <!-- Just needed for LED charts -->
+<script src="RGraph.line.js"></script>             <!-- Just needed for line charts -->
+<script src="RGraph.meter.js"></script>            <!-- Just needed for meter charts -->
+<script src="RGraph.odo.js"></script>              <!-- Just needed for odometers -->
+<script src="RGraph.pie.js"></script>              <!-- Just needed for pie AND donut charts -->
+<script src="RGraph.radar.js"></script>            <!-- Just needed for radar charts -->
+<script src="RGraph.rose.js"></script>             <!-- Just needed for rose charts -->
+<script src="RGraph.rscatter.js"></script>         <!-- Just needed for rscatter charts -->
+<script src="RGraph.scatter.js"></script>          <!-- Just needed for scatter charts -->
+<script src="RGraph.thermometer.js"></script>      <!-- Just needed for thermometer charts -->
+<script src="RGraph.vprogress.js"></script>        <!-- Just needed for vertical progress bars -->
+<script src="RGraph.waterfall.js"></script>        <!-- Just needed for waterfall charts  -->
+
    +
    2. + +
  2. + Add the canvas tag (put it where you want the chart to appear): +
    +<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas>
+
    +
    3. + +
  3. + Create the chart (since it is using the onload event, you can put this anywhere): + +
    +<script>
+    window.onload = function ()
+    {
+        var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];
+
+        var bar = new RGraph.Bar('myCanvas', data);
+        bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        bar.Set('chart.gutter.left', 35);
+        bar.Draw();
+    }
+</script>
+
    +
    4. +
+ +

+ There's also a very basic example of using RGraph, that does very little. It can be helpful to + illustrate how you can get RGraph up and running. +

+ + +
 
 
+

Suggested structure for RGraph

+ + Suggested structure for RGraph + +

+ The suggested layout structure for the RGraph libraries is shown on the right. The www.example.com folder represents + the root/top level of your website with the javascript directory beneath that. The css and images + folders are shown for + illustrative purposes only. If you follow this layout then your URLs to the RGraph libraries would be: +

+ +

+ http://www.example.com/javascript/rgraph/RGraph.common.core.js
+ http://www.example.com/javascript/rgraph/RGraph.bar.js
+ etc +

+ +

+ By using this structure you make RGraph easy to update should you need to, and also keep all the RGraph libraries in + one, easy to find, place. +

+ +
+ + +
 
 
+

Integration with server side scripting

+ +

+ This is a very easy process, as easy as sending content to the browser. All you need to do is make the data variable + (as in the example below) contain the data you want to be displayed. Eg: +

+ + 
+<script src="RGraph.common.core.js"></script>
+<script src="RGraph.line.js"></script>
+
+<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>
+
+<script>
+    data = [78,16,26,23,25,51,34,64,84,84];
+
+    line = new RGraph.Line("myCanvasTag", data);
+    line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);
+    line.Draw();
+</script>
+
+ +

+ To get the above using PHP you could do this: +

+ + 
<?php
+    // This simply makes a string out of the array of data
+    $myData = join(',', array(78,16,26,23,25,51,34,64,84,84));
+
+    // This prints out the required HTML markup
+    print('<script src="RGraph.common.core.js"></script>' . "\n");
+    print('<script src="RGraph.line.js"></script>' . "\n\n");
+    print('<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>' . "\n\n");
+    print('<script>' . "\n");
+    print('    var data = [' . $myData . '];' . "\n\n");
+    print('    var line = new RGraph.Line("myCanvasTag", data);' . "\n");
+    print('    line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n");
+    print('    line.Draw();' . "\n");
+    print('</script>');
+?>
+
+ +

+ Strictly speaking the var isn't necessary, however if you put the code inside a + function (like window.onload), it's probably best to do so as using var will + make the variable local, and not global. So doing so will help prevent naming clashes. +

+ + + +
 
 
+

Integration with PHP & MySQL

+ +

+ This is a simple matter of formatting what you get back from MySQL into a string, as the MySQL dump and PHP code + below shows (it's based on a database called RGraph_example): +

+ + 
+#
+# Table structure for table `daily_statistics`
+#
+
+CREATE TABLE `daily_statistics` (
+  `st_day` char(9) NOT NULL,
+  `st_statistics` tinyint(4) NOT NULL,
+  UNIQUE KEY `st_day` (`st_day`)
+) ENGINE=MyISAM DEFAULT CHARSET=latin1;
+
+#
+# Dumping data for table `daily_statistics`
+#
+
+INSERT INTO `daily_statistics` VALUES ('Mon', 124);
+INSERT INTO `daily_statistics` VALUES ('Tue', 95);
+INSERT INTO `daily_statistics` VALUES ('Wed', 64);
+INSERT INTO `daily_statistics` VALUES ('Thu', 94);
+INSERT INTO `daily_statistics` VALUES ('Fri', 75);
+INSERT INTO `daily_statistics` VALUES ('Sat', 98);
+INSERT INTO `daily_statistics` VALUES ('Sun', 84);
+
+ + 
+<?php
+    /**
+    * Change these to your own credentials
+    */
+    $hostname = "localhost";
+    $username = "root";
+    $password = "PASSWORD";
+    $database = "RGraph_example";
+    
+    $connection = mysql_connect($hostname, $username, $password) OR die('Could not connect to MySQL: ' . mysql_error());
+    mysql_select_db($database);
+    
+    $result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics");
+    if ($result) {
+    
+        $labels = array();
+        $data   = array();
+    
+        while ($row = mysql_fetch_assoc($result)) {
+            $labels[] = $row["st_day"];
+            $data[]   = $row["st_statistics"];
+        }
+
+        // Now you can aggregate all the data into one string
+        $data_string = "[" . join(", ", $data) . "]";
+        $labels_string = "['" . join("', '", $labels) . "']";
+    } else {
+        print('MySQL query failed with error: ' . mysql_error());
+    }
+?>
+<html>
+<head>
+
+    <!-- Don't forget to update these paths -->
+
+    <script src="libraries/RGraph.common.core.js" ></script>
+    <script src="libraries/RGraph.line.js" ></script>
+
+</head>
+<body>
+    
+    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
+    <script>
+        chart = new RGraph.Line('cvs', <?php print($data_string) ?>);
+        chart.Set('chart.background.grid.autofit', true);
+        chart.Set('chart.gutter.left', 35);
+        chart.Set('chart.gutter.right', 5);
+        chart.Set('chart.hmargin', 10);
+        chart.Set('chart.tickmarks', 'endcircle');
+        chart.Set('chart.labels', <?php print($labels_string) ?>);        
+        chart.Draw();
+    </script>
+
+</body>
+</html>
+
+ +

+ This PHP code provides the data in two strings - $labels_string and $data_string. These variables are then used + in the RGraph code to provide the data and the labels. +

+ +

Remember:

+ + + + +
 
 
+

Making AJAX requests

+ +

+ Note: + It is important that you're careful with types when making AJAX requests. Since the response is initially a string, + and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To + do this you can use the Number() or parseInt() functions. For example: +

+ + 
+<script>
+    num = Number('23');
+    num = parseInt('43');
+</script>
+
+ +

+ Here is a simple function that you could use to get data from your server using AJAX: +

+ + 
+<script>
+    /**
+    * Makes an AJAX call. It calls the given callback (a function) when ready
+    * 
+    * @param string   url      The URL to retrieve
+    * @param function callback A function object that is called when the response is ready, there's an example below
+    *                          called "myCallback".
+    */
+    function AjaxCall (url, callback)
+    {
+        // Mozilla, Safari, ...
+        if (window.XMLHttpRequest) {
+            var httpRequest = new XMLHttpRequest();
+        
+        // MSIE
+        } else if (window.ActiveXObject) {
+            var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+        
+        httpRequest.onreadystatechange = callback;
+        
+        httpRequest.open('GET', url, true);
+        httpRequest.send();
+    }
+
+
+    /**
+    * This sample callback function is called when the data is ready (readyState=4)
+    */
+    function myCallback ()
+    {
+        if (this.readyState == 4 && this.status == 200) {
+            // Everything is good, the response is received
+            alert(this.responseText);
+        }
+    }
+</script>
+
+ +

And you would use it like this:

+ + 
+<script>
+    AjaxCall('http://www.example.com/getSomething.php', myCallback);
+</script>
+
+ +

+ There's an example here that shows updating your chart dynamically. +

+ + + +
 
 
+

Support

+ +

+ If you have a support issue you can send it to the support email address: + support@rgraph.net. You can also follow + @_rgraph on twitter to get notifications of new releases and + notable updates. +

+ +
+
+ + + \ No newline at end of file -- cgit v1.2.1