From: Russ Handorf Date: Sun, 14 Feb 2016 02:34:23 +0000 (-0500) Subject: initial commit X-Git-Url: http://russells-world.com/code/?p=home-automation.git;a=commitdiff_plain;h=22502eb7a498183fada4a50994fa2bb25e4bb790 initial commit --- 22502eb7a498183fada4a50994fa2bb25e4bb790 diff --git a/README b/README new file mode 100644 index 0000000..6a24292 --- /dev/null +++ b/README @@ -0,0 +1,45 @@ +############################################################################### +# The MIT License (MIT) +# Copyright (c) Russell Handorf +# +# Permission is hereby granted, free of charge, to any person obtaining a copy +# of this software and associated documentation files (the "Software"), to deal +# in the Software without restriction, including without limitation the rights +# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +# copies of the Software, and to permit persons to whom the Software is +# furnished to do so, subject to the following conditions: +# +# The above copyright notice and this permission notice shall be included in +# all copies or substantial portions of the Software. +# +# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +# THE SOFTWARE. +# +############################################################################### + +I've been building a home automation solution over the years. The code within is built to help manage these systems. + +The graphics were generated by Mike Anthony at http://www.mejadesign.com/. They are to be included for this project. + +Hardware: +-Insteon +-Elk M1 Gold +-TED - The Energy Detector + +Software: +-Zoneminder +-Asterisk +-Wview + +I'm leaving out some code for now for you to edit for your own source. Once I lock up mine, I'll upload it; some stuff is just very specific. I've set some account defaults for you, specifically admin/admin in the ISY and zoneminder. There isnt a central config yet... yet. + +Edit your /etc/hosts to be +[IP] isy99 +[IP] zoneminder +[IP] TED +[IP] weather diff --git a/RGraph/LICENSE.txt b/RGraph/LICENSE.txt new file mode 100644 index 0000000..2a4bc6f --- /dev/null +++ b/RGraph/LICENSE.txt @@ -0,0 +1,93 @@ +THE RGRAPH LICENSE VERSION 1.5.4 + +Everyone is permitted to copy and distribute this license document. + +This license applies to any software originating from the www.rgraph.net website. +Such software is herein referred to as the Software. This license covers +modification and distribution of the Software, use of third-party application +programs based on the Software, and development of software which uses the +Software. Note that ExCanvas is covered by the Apache license. + + +SUMMARY + + +A summary of the license is that non-commercial use of the Software is free, +whilst for commercial use there is a one-time fee of £49 (GBP). + + + +GRANTED RIGHTS + + +1. You are granted the non-exclusive rights set forth in this license + provided you agree to and comply with any and all conditions in + this license. Whole or partial distribution of the Software, + signifies acceptance of this license. + + +2. You may copy and distribute the Software in unmodified form + provided that the entire package, including - but not restricted to + - copyright, trademark notices and disclaimers, as released by the + initial developer of the Software, is distributed. See clause (3) + regarding the inclusion of this license document with your software. + + +3. You may develop application programs, reusable components and other + software items that use the original or modified versions of the + Software. You may distribute these programs or components as long + as this license is distributed along with the Software. If you have + purchased an RGraph license you do not need to include this license + document with your software. + + +4. For commercial use you are required to buy a license from the copyright + holder. A commercial license permits you to use any code you wish that + originated from the RGraph website (www.rgraph.net) and also the + PHPGuru website (www.phpguru.org). This license is £49 (UK pounds). + Commercial use incorporates applications, websites (regardless of + whether they sell products or services or simply promote them), + intranets and use in offline materials. + + +5. Non-commercial use (eg personal, charity and educational) is permitted. + Please link back to the RGraph website. Example code as follows: + + + RGraph: HTML5 canvas graph library + + + Alternatively, if you don't wish to link to the RGraph website, you can + buy an RGraph license and you won't need to. + + +LIMITATIONS OF LIABILITY + +In no event shall the initial developers or copyright holders be +liable for any damages whatsoever, including - but not restricted to +- lost revenue or profits or other direct, indirect, special, +incidental or consequential damages, even if they have been advised +of the possibility of such damages, except to the extent invariable +law, if any, provides otherwise. + + +NO WARRANTY + +The Software and this license document are provided AS IS with NO +WARRANTY OF ANY KIND, INCLUDING THE WARRANTY OF DESIGN, +MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. + + +CHOICE OF LAW + +This license is governed by the Laws of England. Disputes shall be +settled by Chelmsford town court. + + +QUESTIONS + +Any questions or queries about this license or its extent should +be directed to licensing@rgraph.net + + + diff --git a/RGraph/css/ModalDialog.css b/RGraph/css/ModalDialog.css new file mode 100644 index 0000000..c9c339c --- /dev/null +++ b/RGraph/css/ModalDialog.css @@ -0,0 +1,90 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + + /** + * Modal Dialog + */ + .modalBg { + position: absolute; + top: 0px; + left: 0px; + filter: Alpha(Opacity=50); + -moz-opacity: 0.5; + background-color: #ddd; + visibility: hidden; + width: expression(document.body.clientWidth); + height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight); + z-index: 100; + } + + .modalDialog { + position: absolute; + top: 0px; + left: 0px; + visibility: hidden; + z-index: 101; + background-color: white; + top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2); + left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2); + border: 1px solid #777; + border-top: 0; + padding: 20px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + } + + .modalDialog .modalDialogHeader { + margin:0; + padding: 0px; + color: #333; + font-weight: bold; + background-color: #ccc; + border: 1px solid #989898; + position: absolute; + top: 0px; + left: -1px; + height: 7px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-bottomright: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-bottom-right-radius: 0; + } + + .modalShadow { + position: absolute; + background-color: black; + top: 0px; + left: 0px; + z-index: 99; + top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2); + left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2); + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + opacity: 0.5; + } + + /** + * This is not part of the core Modal Dialog styles, instead it's just so that the dialog looks + * respectable. + */ + h4 { + font-family: Verdana, Arial; + padding-top: 10px; + } \ No newline at end of file diff --git a/RGraph/css/common.css b/RGraph/css/common.css new file mode 100644 index 0000000..cb2b287 --- /dev/null +++ b/RGraph/css/common.css @@ -0,0 +1,297 @@ +@font-face { + font-family: Delicious; + src: url('/Delicious-Roman.otf') +} + +/** +* Various +*/ +body { + margin: 0px; +} + +a { + text-decoration: none; +} + +code { + background-color: #dedede; + border: 1px dashed #aaaaaa; + padding: 3px; + display: block; + font-family: Monospace; +} + + +/** +* Datagrid stuff +*/ +table.datagrid { + border-collapse: collapse; + margin-left: 30px; +} + +table.datagrid th { + background-color: #ccc; + border: 1px solid #aaa; + padding: 2px; +} + +table.datagrid tr { + background-color: #ddd; +} + +table.datagrid tr.oddrow { + background-color: #eee; +} + +table.datagrid td { + border: 1px solid #aaa; + padding: 3px; +} + + +/** +* Master div +*/ +.master { + font-family: Georgia; +} + + +/** +* Header section +*/ +.header { + margin-right: 10px; + letter-spacing: 2px; + background-image: url(/images/hdrbg.jpg); + margin-left: 10px; +} + +.header h1 { + margin-top: 0px; +} + +.tagline { + font-size: 8pt; + position: relative; + top: -15px; + left: 15px; + letter-spacing: 0px; +} + + +/** +* Top nav +*/ +.topnav { + color: white; + background-color: #314657; /* Old */ + background-color: #2D4B33; + padding: 1px; + padding-left: 10px; +} + +.topnav a { + color: white; +} + + +/** +* Left nav +*/ +.leftnav, +.searchbox { + width: 180px; + color: black; + background-color: #FF5A18; + margin-left: 5px; + margin-top: 10px; + padding: 10px; + padding-top: 0; + padding-bottom: 0; + padding: expression('10px'); + border: 1px solid #B33E11; +} + +.leftnav { + box-shadow: 3px 3px 3px #aaa; + border-radius: 5px; + -moz-box-shadow: 3px 3px 3px #aaa; + -webkit-box-shadow: 3px 3px 3px #aaa; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + width: 180px; + float: left; + hmargin: 5px; +} + +.leftnav h4 { + border-bottom: 1px solid black; +} +.leftnav a { + color: black; +} + +.leftnav ul { + margin-left: -20px; + margin-left: expression('20px'); + list-style-type: square; +} + + +/** +* Main body section +*/ +.mainbody { + margin-left: 220px; +} + +.borderedTable table { + border-collapse: collapse; +} + +.borderedTable th { + background-color: #dddddd; + border: 1px solid #aaaaaa; + font-size: 70%; + padding-left: 3px; + padding-right: 3px; +} + +.borderedTable td { + vertical-align: top; + font-size: 70%; + border: 1px solid #dddddd; +} + +.newsitem { + margin-bottom: 25px; +} + +.newsitem h2, +.newsitem h1 { + display: inline; +} + +.newsitem .date { + font-size: 70%; +} + +p.firstLetter:first-letter { + font-size: 200%; + font-style: italic; + font-weight: bold; + float: left; + padding-right: 3px; +} + +.newsitem p.update { + background-color: #efefef; + border: 1px dashed black; + padding: 5px; +} + + +/** +* Comments +*/ +.comment { + padding: 5px; + margin-bottom: 20px; + font-size: 80%; + background-color: #efefef; + border: 1px dashed #cccccc; +} + +.comment .body { + margin-top: 5px; + padding-left: 7px; +} + +.comment .quoteLink { + text-align: right; + font-size: 90%; +} + + +/** +* Errors +*/ +.error { + color: red; + font-style: italic; +} + + +/** +* Copyright text +*/ +.copyright { + text-align: right; + font-size: 75%; +} + + +/** +* Admin page +*/ +.adminPage table { + font-family: Verdana; + font-size: 10pt; +} + +.adminPage th { + background-color: #dddddd; +} + + +/** +* Tools page +*/ +#toolsPage th, +#toolsPage td { +} + +#toolsPage th { + font-weight: bold; + text-align: right; + white-space: nowrap; + vertical-align: top; + background-color: #ffffcc; +} + +#toolsPage textarea { + height: 200px; + width: 800px; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ffffff, endColorstr=#ffffcc); +} + +#shortcuts th { + +} + +#shortcuts th { + text-align: left; + background-color: #ededed; + padding: 2px; +} + +/** +* Download header/footer +*/ +div#download pre, +div#download pre a { + +} + +/** +* Code +*/ +div.boxout, +pre.code { + border: 2px dashed gray; + padding: 3px; + background-color: #eee; +} \ No newline at end of file diff --git a/RGraph/css/website.css b/RGraph/css/website.css new file mode 100644 index 0000000..827b5fb --- /dev/null +++ b/RGraph/css/website.css @@ -0,0 +1,253 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + +body { + padding-top: 10px; + font-family: Georgia, Arial, Sans-Serif; +} + +pre#code, +code { + display: block; + border: 1px solid #aaa; + padding: 5px; + background-color: #ddd; +} + +#breadcrumb, +#logo { + border: 2px black solid; + background-color: #eee; + padding: 3px; + top: 0; + right: 0; + position: absolute; + margin: 2px; + opacity: 0.8; +} +#breadcrumb a, +#logo a { + text-decoration: none; +} + +th { + text-align: left; + border: 1px solid gray; + background-color: #ddd; + padding: 3px; + vertical-align: top; +} + +td { + vertical-align: top; +} + +ol li { + margin-top: 20px; +} + +ol#implementation li code { + margin-top: 5px; +} + +td.description { + background-color: #eee; + padding: 3px; + border: 1px solid #ddd; +} + +td.chart { + text-align: center; +} + +.example_boxout { + background-color: #eee; + padding: 3px; + border: 1px solid #aaa; +} + +.code { + padding: 5px; + background-color: #eee; + border: 2px dashed gray +} + +/** +* This is semi-transparent box in the top left corner +*/ +div#devtag { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: #999 3px 3px 3px; + -moz-box-shadow: #999 3px 3px 3px; + box-shadow: #999 3px 3px 3px; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135); + position: fixed; + top: 2px; + right: 2px; + width: 145px; + border: 2px solid black; + text-align: center; + font-weight: bold; + font-family: Arial; + background-color: #fdd; +} + +div#devtag a { + font-size: 10px; + text-decoration: none; + color: blue; + opacity: 1; +} + +/** +* This overrides something defined earlier +*/ +ol#colors li { + margin: 0; +} + +/** +* styles lists +*/ +div.list-item { + width: 220px; + display: inline-block; +} + +div.list-item.label { + width: 170px; +} + +legend { + background-color: #efefef; + border: 1px solid #75736e; +} + +body#licensing span { + font-size: 120%; +} + +/** +* The yellow warning box on the front page +*/ +div.warning { + border: 1px solid black; + text-align: center; + background-color: #ffa; + padding: 5px; + margin-top: 5px; + border-radius: 15px; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + -webkit-box-shadow: #aaa 1px 1px 15px; + -moz-box-shadow: #aaa 1px 1px 15px; + box-shadow: #aaa 1px 1px 15px; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135); + z-index: 98; +} + +div.canvasfallback { + border: 2px dashed red; + background-color: #fee; + width: 475px; + height: 150px; + text-align: center; + padding-top: 50px; +} + +/** +* The title "bar" +*/ +div#title { +} + +div#title div#image { + float: left; + margin-right: 15px; +} + +div#title div#text { + padding-top: 5px; + margin-left: 70px; +} + + +div.warning p { + text-align: center; + margin-top: 5px; + margin-bottom: 5px; + font-weight: bold; +} + + +div.description { + border: 1px dashed gray; + background-color: #eee; + font-size: 75%; + padding: 3px; +} + +div#social { + display: inline; + display: inline-block; +} + + +/*************************************************************************************** +* * +* RGraph CSS classes. * +* * +* These allow you to customise how tooltips and context menus will appear. To override * +* the CSS defined in the graph scripts, you may need to use " ! important" like so: * +* * +* font-weight: bold ! important * +* * +* You don't always need to use this, only if you're trying to override something which * +* the script sets. * +* * +***************************************************************************************/ + +.RGraph_png { +} + +.RGraph_tooltip { +} + +.RGraph_contextmenu { +} + +.RGraph_contextmenu_background { +} + +.RGraph_contextmenu_item { +} + +.RGraph_zoom_window { +} + +.RGraph_zoomed_canvas { +} + +.ModalDialog_background { +} + +.ModalDialog_dialog { +} + +.ModalDialog_topbar { +} \ No newline at end of file diff --git a/RGraph/docs/.BC.txt b/RGraph/docs/.BC.txt new file mode 100644 index 0000000..ede1913 --- /dev/null +++ b/RGraph/docs/.BC.txt @@ -0,0 +1,101 @@ + + Backwards compatibility breaks and advisories + =============================================== + + +---------------------------------------------------------------------------------------+ + o [24-12-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [04-12-2010] chart.key.vpos is now silently converted to chart.key.position.y (note that these two properies behave slightly + differently - chart.key.position.y is an absolute coordinate). ALSO; the key has been rewritten, so check that + your graphs are working as you expect + o [04-12-2010] The HBar labels (from chart.labels.above) now have an extra property (chart.labels.above.decimals) which controls + how many decimals are shown. This defaults to 0, and as a result you may need to set this if you're expecting decimals. + + +---------------------------------------------------------------------------------------+ + o [27-11-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [20-11-2010] For the line/bar/scatter, when the X axis is at the bottom and there is a background bar with a + negative start (or it results in a negative end value), you now get a warning. + o [13-11-2010] All line chart labels are now shown, regardless of how many points on the line there are. + o [06-11-2010] The HBar and Scatter have had their scaled handling changed slightly - now if you specify a maximum Y value, + that is what is used. + o [06-11-2010] The API function RGraph.getSCale(max, obj) now takes two arguments - the maximum value and the graph object. + + +---------------------------------------------------------------------------------------+ + o [30-10-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [30-10-2010] The Scatter chart can now only have 1/3/5 labels + o [30-10-2010] The Line chart can now only have 1/3/5 labels + o [23-10-2010] The Bar chart can now only have 1/3/5/10 labels + o [23-10-2010] The default for chart.scale.decimals has changed, as such you may need to specify this: + myScatter.Set('chart.scale.decimals', 0); + o [09-10-2010] Scatter chart ticksize has changed behaviour slightly, you therefore may need to alter it slightly. + + +---------------------------------------------------------------------------------------+ + o [25-09-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [18-09-2010] For IE9 compatibility purposes, the IE8 DirectX shadow has been removed from the ModalDialog. This only affects + MSIE8. The background is still semi-opaque. + o [18-09-2010] The common function RGraph.isIE9() has changed to RGraph.isIE9up(). The old one will continue to work, but + not indefinitely. + o [11-09-2010] The Odometer properties chart.units.pre and chart.units.post have now changed to chart.value.units.pre + and chart.value.units.post. The properties chart.units.post and chart.units.pre are now used for the main + labels. + o [04-09-2010] HBar and Pie charts have been moved to DOM2 event registration for tooltips + o [04-09-2010] The RGraph.number_format() function has had its argument list changed + o [04-09-2010] Now that RGraph is moving to DOM2 event handlers, tooltips will be incompatible with IE8 + + +---------------------------------------------------------------------------------------+ + o [28-08-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [28-08-2010] Removed option to have the labels on the outside of a Meter. Now they're always on the inside of the Meter + and there's always 11 of them (including zero) + o [14-08-2010] Changed the HBar property chart.strokecolor to chart.strokestyle + o [07-08-2010] The Odometer property chart.needle.thickness has been changed to chart.needle.width. Work has been done on the + needle head. + o [07-08-2010] Progress bar has now been split into two different graph types: + o HProgress + o VProgress + o [07-08-2010] Progress bar property chart.color is now chart.colors, and should be an array + o [07-08-2010] Changed default Bipolar colors to just one - green + + +---------------------------------------------------------------------------------------+ + o [31-07-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [17-07-2010] Stepped line charts and their tickmarks have been marginally altered. No final tickmark is now shown (it looks + odd being isolated) + o [17-07-2010] Changed the Odo chart.needle.style to chart.needle.color + o [17-07-2010] The Odo properties chart.start, chart.end and chart.value have all been changed to internal properties: + obj.start, obj.end and obj.value + o [09-07-2010] With the Odometer the old property chart.needle.style has been renamed to be chart.needle.color + o [09-07-2010] The Progress bar has had it's properties chart.max and chart.value changed to class properties, this means + that if you want to make use of these, you will now need to use myProgress.value and myProgress.max. + myProgress being the name of your graph object. + + +---------------------------------------------------------------------------------------+ + o [26-06-2010] | Stable release | + +---------------------------------------------------------------------------------------+ + + o [08-05-2010] The Rose charts "chart.labels" property is now different to the "chart.key" property + o [01-05-2010] The Donut chart is now a variant of the Pie chart (chart.variant = donut) + o [24-04-2010] The radar chart has been renamed to Rose. The library is now called RGraph.rose.js and the constructor has + been renamed. It has also been prettied up marginally and labels have been added. + o [17-04-2010] All charts have had their property "chart.tooltip.effect" renamed to "chart.tooltips.effect". + The Scatter chart has also had its property "chart.tooltip.hotspot" renamed to "chart.tooltips.hotspot" + o [17-04-2010] Default chart.tooltips bar chart property has changed from an empty array to null. + o [17-04-2010] The RGraph.common.js library has now been split into 5 separate files because it had + become far too large. You can read the new implementation details here: + http://www.rgraph.net/docs/index.html#implementation + o [10-04-2010] The "coords" arrays (for each object) have been unified. Now you no longer need to take + into account the margins. What you get in the coords arrays are as they are used on the + graph. + + +---------------------------------------------------------------------------------------+ + o [27-03-2010] | Initial stable release | + +---------------------------------------------------------------------------------------+ \ No newline at end of file diff --git a/RGraph/docs/.CHANGELOG.txt b/RGraph/docs/.CHANGELOG.txt new file mode 100644 index 0000000..34580b6 --- /dev/null +++ b/RGraph/docs/.CHANGELOG.txt @@ -0,0 +1,1277 @@ + 24th December 2010 (STABLE) + ================== + o [ANNOTATING] Annotating has been changed to allow annotating to occur in the gutter + + 18th December 2010 + ================== + o [MSIE] MSIE 9 now uses the double click event to trigger the context menu + o [ZOOM] Added a note about making the zoom in thumdnail mode circular: + http://www.rgraph.net/docs/zoom.html#thumbnail + + 11th December 2010 + ================== + o [API] Added pointer, in the docs, for how to add text to your charts + o [BAR] The Bar chart now converts null values to zero + o [BAR] You can now specify a textual scale with chart.ylabels.specific + o [GANTT] Fixed background bars when specifying an xmin + o [HPROGRESS] Labels can now be on top of the bar as well as the bottom + o [LINE] You can now specify a textual scale with chart.ylabels.specific + o [MISC] Added the RGraph.SetConfig() function - http://www.rgraph.net/docs/setconfig.html + o [MISC] Added chart.title.background to graph types that use a title + o [PIE] Added chart.highlight.style.2d.color - default is a semi-transparent white color + o [PIE] Added chart.tooltips.event + o [SCATTER] Crosshairs readout now works when the X axis is in the center + + 4th December 2010 + ================= + o [GANTT] Added chart.xmin (default is 0) + o [HBAR] Added chart.labels.above.decimals, defaulting to 0. You may need to set this to the number of desired decimals + if you're expecting decimals + o [LICENSING] If you prefer you can now use PayPal instead of Google Checkout to buy an RGraph license: + http://www.rgraph.net/docs/licensing.html#paypal + o [LINE] Fixed a bug with null points still showing tooltips + o [MISC] The key handling has been rewritten. There is now a documentation page about keys: + http://www.rgraph.net/docs/keys.html + o [MISC] Added default key properties to all relevant graph types - the key has been completely rewritten and as such, + you should check your graphs are as you expect. You may neeed to slightly adjust your key coordinates for example. + o [SCATTER] Added option to have vertical bars (much like the horizontal bars option) + o [SKELETON] Added more default properties + o [VPROGRESS] You can now position the labels on the left of the chart instead of the (default) right. + + 27th November 2010 (STABLE) + ================== + o [BAR] When showing 10 Y labels, chart.scale.decimals is respected + o [DOCS] Add an example showing dynamic updating + o [DOCS] Added animation example using jQuery + o [LINE] When showing 10 Y labels, chart.scale.decimals is respected + o [MISC] Improved the jQuery animation example + o [MISC] Removed the "functions as colors" option - this may re-added at a later date + o [SCATTER] When showing 10 Y labels, chart.scale.decimals is respected + o [SKEL] Added lots more default default properties and functionality that common RGraph functionality + uses, for example: chart.resizable. + + 20th November 2010 + ================== + o [API] Documented RGraph.background.Draw(). + o [DOCS] Added note to AJAX section about types + o [DOCS] Added skeleton object which can be used to ease creating new graph types + o [DOCS] Added note to misc docs about debugging your graphs + o [LINE] Fixed line chart tooltips as separate arguments + o [MISC] Minor adjustments to placement and borders + o [MISC] For the line/bar/scatter, when the X axis is at the bottom and there is a background bar with a + negative start (or it results in a negative end value), you now get a warning. + o [MISC] Added animation example using jQuery + o [MSIE] Changed instances of document.all to RGraph.isIE8() + o [RESIZING] Tweaked the positioning a little, so now nothing should move when you resize a canvas + o [SKEL] Added a skeleton file, which can be used as a base when creating new RGraph libraries. + + 13th November 2010 + ================== + o [API] Added RGraph.array_shift() function (removes an element from the beginning of an array) + o [LINE] Added chart.labels.above and chart.labels.above.size (default is 8) + o [LINE] All chart labels are now shown, regardless of how many points on the line there are. + o [LINE] Sets of line points can now be given as one big multi-dimensional array. This may make it easier to use in AJAX, eg: + http://dev.rgraph.net/tests/line.arguments.html + o [LINE] In Google Chrome, the shadow fix is applied by default. An option exists to enable you to turn this off: chart.chromefix + In a few rare cases you will need to turn off shadow blurring (chart.shadow.blur=0) + o [MISC] Added more options for in-graph labels. See http://www.rgraph.net/docs/ingraph.html + o [MISC] Added note about AJAX and types + o [VPROGRESS] Added chart.tooltips.coords.adjust + o [VPROGRESS] Added chart.min + o [VPROGRESS] Added chart.labels.count, chart.min, chart.scale.decimals + + 6th November 2010 + ================= + o [API] RGraph.getScale() now takes the graph object as the second argument + o [BAR] Added chart.labels.above.decimals, defaulting to 0 + o [BAR] Added chart.labels.above.size, which if specified is used as the font size. An example of this and the above change is + here: http://dev.rgraph.net/tests/above.bar.html + o [BIPOLAR] Added chart.gutter.center, which controls the space where the labels are + O [BIPOLAR] Added chart.scale.round + o [DOCS] Added note to API docs about references available + o [HBAR] Added chart.scale.decimals + o [HBAR] Added chart.scale.round + o [HPROGRESS] Added chart.min, for specifying a minimum value and chart.scale.decimals + o [LINE] Y labels can once again be 1/3/5/10 + o [LINE] Added chart.scale.round + o [LINE] chart.outofbounds is now usable in conjunction with chart.ymax + o [LINE] Added chart.chromefix + o [RESIZE] Resize now sets the placeholder DIVs 'position' CSS value as inline-block, thus reducing page re-organisation + o [ROSE] Added chart.scale.decimals + o [ROSE] Added chart.ymax + o [ROSE] Added chart.ymin (There's an example here: http://dev.rgraph.net/tests/rose.ymin.html + o [RSCATTER] Added chart.scale.decimals // If you use the Rscatter, please test this with your graph(s) + o [RSCATTER] Added chart.scale.round // If you use the Rscatter, please test this with your graph(s) + o [RSCATTER] Added chart.ymin // If you use the Rscatter, please test this with your graph(s) + o [SCATTER] Y labels can once again be 1/3/5/10 + o [SCATTER] Added chart.scale.decimals + o [SCATTER] Added chart.scale.round + o [SCATTER] Scatter chart, translating and crosshairs now work when you tell RGraph how you've translated using + chart.tooltips.coords.adjust + o [SCALE] Added chart.scale.round to: bar, bi-polar, line, rscatter, rose, scatter, tradar This means that scales produced are + rounded up, producing rounder values + o [SCALE] Re-added 10 Y labels to Line/Scatter. This may be best used In conjunction with chart.scale.round + o [TRADAR] Added chart.scale.round + + 30th October 2010 (STABLE) + ================= + o [DOCS] The combination example has been changed and extended. It now shows Pie charts in the tooltips, + which can be clicked on. + o [DOCS] Added note about using RGraph.showPNG() without a context menu. + o [DOCS] RGraph.showPNG() has had it's parameter list changed: http://www.rgraph.net/docs/api.html + o [API] Added fix to crosshairs when coordinates are used in conjunction with an X minimum value + + + 23rd October 2010 + ================= + + Important: + The Line (and Scatter chart) chart have been PARTIALLY REVERTED, meaning that the number of labels is again a + choice between 1/3/5. The option to have 10 labels will be re-added, but for positive charts only, and + probably for scales with maximum values over 10. + + o [API] The RGraph.showPNG() function can now accept the canvas to use as an (optional) argument, + allowing you to use the RGraph.showPNG() function with an image, eg: + http://www.rgraph.net/examples/tradar.html (1st graph) + o [BAR] Bar chart can now only have 1/3/5/10 labels + o [GANTT] Borders are now a little thinner (and less blurry) + o [KEY] Rounded key corners now lives behind an option: chart.key.rounded (default is false), also documented this + o [KEY] Filled keys now only cover the key with one layer of color - so transparency works better + o [PNG] URL is now selected by default + o [SCATTER] Box plot coords bug has been corrected + o [SCATTER] The default for chart.scale.decimals has been changed fr0m 0 (zero) to null. You may need to set this now + with: myScatter.Set('chart.scale.decimals', 0); + + 16th October 2010 + ================= + o [LINE] Y axis can now have an arbitrary number of labels: http://dev.rgraph.net/tests/ymin.html + o [LINE] Made addition so that in Chrome a 1px linewidth is changed to 1.01 + o [MISC] Corners on the key (in graph mode) are now curvy + o [MISC] RGraph.showPNG() now shows the data: URL to the image and makes it easy to copy it to the clipboard + + 9th October 2010 + ================ + o [LINE] Changed decimal handling - you may need to specify this: myLine.Set('chart.scale.decimals', 0); + o [LINE] Added chart.outofbounds (default is false) + o [LINE] Added obj.getPoint(e) method which simplifies getting the pertinent point on the line + chart in events (eg the onmousemove event, and now the Line chart uses it) + o [LINE] Line charts can now have custom tickmarks + o [SCATTER] Added facility for custom tickmarks + o [WEBSITE] Fixed favicon path + + 1st October 2010 + ================ + + In October, 25% of all license fees will be donated to Unicef - the International charity for children + + o [BAR] Added .getBar() method. This allows you to easily get the focused/selected bar. There is an example usage here: + o [DOCS] Documentation is no longer dynamic + o [FUNNEL] Shadows can now go upwards (ie any x/y offset is feasible) + o [FUNNEL] Converted this chart type to DOM2 for tooltips + o [GANTT] This chart has been moved to DOM2 for tooltips + o [HPROGRESS] This chart has been moved to DOM2 for tooltips + o [MISC] Colors can now be functions as well as well as strings/gradients. These colors are resolved once, at the start + of the .Draw() method + o [PIE] Documented method .getSegment(). Used for getting the pertinent + segment when the canvas is clicked on (for example), http://www.rgraph.net/docs/pie.html#available.methods + o [ROSE] This chart has been moved to DOM2 for tooltips + o [ROSE] Documented method .getSegment(). Used for getting the pertinent + segment when the canvas is clicked on (for example), http://www.rgraph.net/docs/rose.html#available.methods + o [RSCATTER] This chart has been moved to DOM2 for tooltips + o [SCATTER] This chart has been moved to DOM2 for tooltips + o [SCATTER] Added new properties: chart.yaxispos + chart.xaxis + chart.noendxtick + o [TOOLTIPS] Fixed a tooltip bug that probably only presented itself on the bar chart example page + o [TRADAR] Added chart.tooltips.highlight (default is true) + o [TRADAR] This chart has been moved to DOM2 for tooltips + o [VPROGRESS] This chart has been moved to DOM2 for tooltips + o [XML] Removed XML documentation + + 25th September 2010 (STABLE) + =================== + o [DOCS] Fleshed out the integration example - http://www.rgraph.net/docs/index.html#mysql + o [DOCS] Added note to docs about line chart obj.original_data + + 18th September 2010 + =================== + o [ANNOTATE] Added onannotatestart and onannotateend events + o [CONTEXT] Fixed submenu offset in MSIE 9 + o [DOCS] Added MySQL integration example to integration docs + o [DOCS] Documented how to use a dynamically created canvas with ExCanvas + o [MODALDIALOG] Removed MSIE 8 DirectX shadow from ModalDialog + o [MODALDIALOG] Better MSIE 9 compatibility + o [PIE] Fixed Pie chart sticks for Chrome 6 + o [TOOLTIPS] If Y position is less than 0, tooltips are now shown below the cursor to mitigate this + o [WEBSITE] Added social networking icons to all pages + o [WEBSITE] "Preload" social networking icons + + 11th September 2010 + =================== + o [API] Updated docs for RGraph.Redraw() slightly + o [LINE] Added chart.toltips.highlight + o [MISC] Updated the combined bar/line example + o [ODO] The chart.units.pre and chart.units.post properties have changed to chart.value.units.pre and chart.value.units.post. + The chart.units.pre and chart.units.post properties have changed functionally. + o [ODO] Added chart.needle.extra to allow you to specify extra needles. + o [RSCATTER] Added chart.toltips.highlight + o [SCATTER] Added chart.toltips.highlight + o [SCATTER] Added coordinates readout: chart.crosshairs.coords + chart.crosshairs.coords.fixed + chart.crosshairs.coords.fadeout + chart.crosshairs.coords.labels.x + chart.crosshairs.coords.labels.y + Example: http://dev.rgraph.net/tests/crosshairs.html + o [ZOOM] Much improved the smoothness of the indicator box when in area mode - see http://www.rgraph.net/docs/zoom.html + for an example of area mode + + 4th September 2010 + ================== + o [API] Changed RGraph.number_format() functions arguments + o [API] Added RGraph.getGutterSuggest() function, which is a suggestion based on the left labels (only) + for the chart.gutter setting. + o [API] Added RGraph.showPNG() function, which makes it easy to get images of graphs. This is designed to be + used in conjunction with the context menu, and is therfore defined in the RGraph.common.context.js file. + There's documentation about it here: http://www.rgraph.net/docs/png.html + o [BAR] Added key shadow control + o [BAR] Added chart.scale.point and chart.scale.decimal + o [BIPOLAR] Added chart.scale.point and chart.scale.decimal + o [FUNNEL] Added key shadow control + o [HBAR] Moved to DOM 2 event handler functions + o [HBAR] Added chart.scale.point and chart.scale.decimal + o [LINE] Added key shadow control + o [LINE] Added warning about Chrome 6 shadow bug + o [LINE] Added chart.noyaxis + o [LINE] Added chart.scale.point and chart.scale.decimal + o [MISC] Added RGraph.getGutterSuggest(). See the misc documentation for more detail + o [MSIE] Now that RGraph is moving to DOM2, tooltips on graph libraries that have been changed will not function in MSIE8. + The graphs will still be shown, however tooltips will not function. MSIE9 will still work. + o [ODO] Pointer is now more pointy + o [PIE] Moved to DOM 2 event handler functions + o [ROSE] Added key shadow control + o [RSCATTER] Added key shadow control + o [SCATTER] Added chart.tooltips.coords.adjust + o [SCATTER] Added key shadow control + o [SCATTER] Added chart.scale.point and chart.scale.decimal + o [TRADAR] Added key shadow control + o [WEBSITE] Added code to async page that demonstrates the difference more + + 28th August 2010 + ================ + o [API] Updated the API docs a little with the correct data properties for some graph types + o [DOCS] Added information about AJAX requests to performance section + o [DOCS] Added information about the DOMContentLoaded event to the docs. + o [LINE] Fixed problem with chart.ylabels = false + o [METER] Added arrow head to the Meter + o [METER] Removed outer labels + o [METER] Increased number of labels to 11 + o [MSIE] A few small tweaks to the palette, the scatter chart, the context menu, and tooltips + o [ODO] A few fixes for the Odometer in Chrome 6, and a few minor enhancements to the appearance. + o [WEBSITE] Live site now uses images.rgraph.net for the index page ** REVERTED ** + o [WEBSITE] Social networking icons are now combined into one image. + + 21st August 2010 + ================ + o [HBAR] Added chart.units.ingraph (for when your units are quite long) + o [MISC] Fixed various bugs in circular charts with Chrome 6 + o [MISC] Added note to front page about suitability for Chrome extensions + o [MSIE] Lots more fixes for MSIE 9 + + 14th August 2010 + ================ + o [BAR] Added chart.tooltips.coords.adjust which allows you to adjust tooltip coordinates when you translate + o [HBAR] HBar shadow is now "unified", so you can have an upwards shadow with a large offset and it still looks OK + o [HBAR] "chart.labels.abovebar" are now left aligned if they would go off the end of the canvas + o [HBAR] Fixed a bug with chart.strokecolor - renamed to chart.strokestyle + o [LINE] Added chart.tooltips.coords.adjust (for when you translate() first) + o [LINE] Tweaked filled/stepped line charts - stepped line charts show trailing line again + o [LINE] Tickmarks, as well as a string, can now also be an array of tickmark styles, eg: + http://dev.rgraph.net/tests/test3.html + o [LINE] Added chart.ylabels.invert + o [MISC] You can now specify in-graph labels like this: + line4.Set('chart.labels.ingraph', [6,'July', 3, 'November']); + If you have a lot ofempty spaces, this will help. + o [MISC] Added type property(=common) to common objects + o [ODO] Improved the appearance of the Odometer border + o [SCATTER] Tickmarks are no longer drawn when the ticks are boxplots + o [SCATTER] Added chart.xmin (upgrade cautiously) + o [SCATTER] Boxplots are now usable when the X axis is in the center + + o [NOTE] Chrome 6 appears to have an issue with canvas shadows. Other browsers are fine. A workaround has been added to the + Line chart library, however it won't be a solution for all cases. In these cases, turn off shadow blurring. + + 7th August 2010 + =============== + o [BAR] Changed this graph type over to the DOM2 .addEventListener() for tooltips + o [BAR] Bar chart can now have an arbitrary number of labels + o [BAR] Added chart.ylabels.inside + o [BAR] Labels can now be at any angle + o [BIPOLAR] Changed the default colors to just one - green + o [EVENTS] Added more events: + o onmodaldialog + o onresize + o onadjust + o onannotate + o [HPROGRESS] Multiple segments are now supported + O [HPROGRESS] Added the ability to configure the number of inner tickmarks + o [LINE] Labels can now be at any angle + o [LINE] Changed this graph type to use the DOM2 .addEventListener() for tooltips + o [MISC] Added isRGraph property to common objects + o [MISC] Added chart.title.hpos to all graph libraries + o [MODALDIALOG] Added onmodaldialog event + o [ODO] Outer shadow is now configurable + o [ODO] Inner shadow is now configurable + o [PROGRESS] This has now been split into the HProgress and VProgress + o [SCATTER] Labels can now be at any angle + o [TOOLTIPS] Added contract effect, similar to expand but in reverse + o [TRADAR] Background grid now matches RScatter in terms of width etc + o [VPROGRESS] Multiple segments are now supported + o [VPROGRESS] Added the ability to configure the number of inner tickmarks + + o [NOTE] Upgrading to the new H/VProgress should be done cautiously as they have undergone significant alterations + + 31st July 2010 + ============== + o [MISC] Stable release + o [DOCS] Added CSS class: RGraph_palette + o [DOCS] Added simple example AJAX function to integration documentation: + http://www.rgraph.net/docs/index.html#integration + o [ZOOM] Fixed a fade-in bug with full canvas zoom + + 24th July 2010 + ============== + o [LINE] This chart can now have text at any angle. Other graph types to follow + o [MISC] The minify script now accepts multiple arguments (filenames), + eg. ./minify file1 file2 file3 ... + + 17th July 2010 + ============== + o [BAR] Abovebar labels in GROUPED charts are now formatted + o [BIPOLAR] Moved this to use addeventListener() for events - this is a test case + o [EVENTS] Renamed the RGraph functions RGraph.AddEventListener() and RGraph.FireEvent() + to RGraph..AddCustomEventListener() and RGraph.FireCustomEvent() + o [EVENTS] Added onbeforedraw event which fires at the start of the .Draw() function + o [EVENTS] Added onzoom event to all types of zoom. See docs for details + o [HBAR] Added formatting to above bar labels + o [HBAR] Fixed grouped HBars with shadows going upwards (partially) + o [ODO] Changed a few internal properties. Read more in the docs/.BC.txt file + o [ODO] Changed chart.needle.style to chart.needle.color + o [RSCATTER] Updated test script + o [TRADAR] Added chart.labels.axes - defaults to "nsew" + o [TRADAR] Added chart.ymax + o [BIPOLAR] Implemented chart.xtickinterval. If you specify this, X tickmark spacing is totally down to this setting + o [MISC] Added chart.tooltips.override (see tooltips docs for details) + + 9th July 2010 + ============= + o [API] Added __index__ to tooltip DIVs, which corresponds to the original tooltips array. If you're not using an array of strings + for your tooltips, this is not pertinent + o [API] The RGraph.Tooltip() function now accepts an extra parameter - the index of the tooltip + o [MISC] Introduced event support. There are currently just three events - ontooltip - which naturally fires when + a tooltip is shown, oncontextmenu - which fires when the RGraph context menu is shown and ondraw - which + fires when the .Draw() method is called.. More information is available here: + http://www.rgraph.net/docs/events.html + o [MISC] Added snap tooltip effect for graph types where the tooltips are triggered using the onmousemove event, + ie Line, Rscatter, Scatter and the Tradar + o [MISC] MooTools compatibility fix + o [MISC] Added obj.isRGraph boolean to all graph objects. This is documented on the misc docs page (docs/misc.html) + o [MSIE] MSIE9 compatibility work + o [ODO] You can now use textual labels instead of numbers, eg. N/S/E/W (using chart.labels) + o [ODO] Added chart.zerostart option determining whether the top label is zero or the end value + o [ODO] Fixed a pointer bug + o [ODO] Fixed a rounding issue and added chart.scale.decimals (default is 0) + o [ODO] Colors can now be configured with: chart.green.color, chart.yellow.color, chart.red.color + o [PROGRESS] Changed a few internal properties. Read more in the docs/.BC.txt file + o [TRADAR] Added background diagonal lines (going from the center outwards) + + + 26th June 2010 + ============== + o Stable release + + 18th June 2010 + ============== + o [BAR] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [DOCS] Documentation pages have been reorganised and a contents list added to each page + o [GANTT] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [HBAR] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [LINE] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [SCATTER] Documented grid properties: chart.background.grid.autofit, chart.background.grid.autofit.numhlines, chart.background.grid.autofit.numvlines + o [WEBSITE] Added warning about MSIE versions less than 8 + + 5th June 2010 + ============= + o [HBAR] Added the following properties: chart.title.xaxis + chart.title.yaxis + chart.title.xaxis.pos + chart.title.yaxis.pos + o [ROSE] Slightly increased the area recognised to initiate resizing the Rose (ie the size of the hotspot) + o [TRADAR] Added adjusting to the TRadar + + 29th May 2010 + ============= + o [BAR] Added adjusting + o [ODO] Added gray border effect + o [ODO] Added chart.tickmarks.highlight + o [PROGRESS] Added adjusting + o [ROSE] Added adjusting + o [SCATTER] Added chart.ymin + + 22nd May 2010 + ============= + o [LINE] Added interactive adjustments + + 15th May 2010 + ============= + o [API] Updated the .getSegment() for use with the Rose chart and Donut variant charts + o [API] Added RGraph.array_pad() function + o [BAR] You can now have grouped bar charts with shadows going to the left + o [LINE] Linewidth can now, as well as being a single number, be an array of numbers, one for each line + o [LINE] You can now have labels on the inside of the Y axis as opposed to having them in the gutter + o [MISC] ModalDialog and zoom background DIVs are now much better in regards to page coverage (the semi-opaque background) + o [MISC] Removed RGraph.getPageWidth() and RGraph.getPageHeight() functions + o [MISC] You can now pass a color as the second argument to RGraph.Redraw() which it will use + o [MISC] Resizing the window when zoomed no longer hides the zoom + o [ODO] Little bit of work on pointers and MSIE compatibility + o [ODO] Added "digital" readout option, as shown on the example page + o [PROGRESS] This chart type can now have an "in-bar" indicator + o [PIE] Converted this chart to use RGraph.getSegment() for tooltips + o [ROSE] You can now set the strokestyle + o [ROSE] Converted this chart to use RGraph.getSegment() for tooltips + o [SCATTER] Added chart.line.linewidth and, as with the line, it can be either a number or an array of numbers + o [SCATTER] chart.line.stepped can now, as well as simply true or false, be an array of booleans. This allows you to have + multiple lines, some stepped, some not. + + 8th May 2010 + ============ + o [MISC] You can now have multi-line labels by using the text "\r\n" in your label (without the quotes) + o [MISC] Resizing a graph no longer affects the page layout + o [ROSE] Added labels to this chart + o [ROSE] The Rose chart origin is now the "north" axis + o [WEBSITE] Re-arranged the front page + o [WEBSITE] Removed a lot of examples from the website and made the whole thing a little more streamlined + o [ZOOM] Once visible, you can now double click a zoomed area to expand it to a full size zoom. You can see + this on the line graph on the front page. + + 1st May 2010 + ============ + o [DONUT] This is no longer a seperate class, but now a variant of the Pie chart (chart.variant = donut) + o [MISC] Added note about copying the text in tooltips using Firefox + o [ROSE] Tooltip highlighted area is now "under" the labels (as opposed to "over") + + 25th April 2010 + =============== + o [MISC] Separated out resizing functionality into it's own file - RGraph.common.resizing.js This further reduces the size of + RGraph.common.core.js + o [MISC] In area zoom, you can now left-drag to move the zoom itself around, and right-drag to move the zoomed canvas around inside + the zoom + o [MISC] Added RGraph_zoomed_area CSS class + o [MISC] Added chart.crosshairs.linewidth to bar, line and scatter + o [MISC] You can now have a single level of submenu items with the context menu + o [RADAR] This chart has been renamed to Rose and the appearance enhanced + + 17th April 2010 + =============== + o [BAR] This chart type can now use the onmousemove event for tooltips instead of the onmousedown + o [DOCS] Added tooltips documentation page - this explains tooltips and how you can specify them. There are now 4 methods available. + o [MISC] The zoomed area is now draggable once visible + o [MISC] Split out RGraph.common.js into separate files, consisting of: + o RGraph.common.core.js + o RGraph.common.annotate.js + o RGraph.common.context.js + o RGraph.common.tooltips.js + o RGraph.common.zoom.js + If you don't use any of the interactive features, the core common library is now roughly half the size. See + http://www.rgraph.net/docs/index.html#implementation for details of the new way to implement RGraph + o [MISC] You can now specify the CSS class that tooltips use (using chart.tooltips.css.class). If you have multiple + graphs on one page and want the tooltips to appear differently, this is how to do it + o [MISC] New tooltip effect - "none". Which, as the name implies, doesn't fade or expand. + + 10th April 2010 + =============== + o [MISC] Cleaned up each graphs coords array. If you use the coords arrays, you may need to adjust your numbers slightly. + The new coords may be off for you by one or two chart.margin (it can be hmargin or vmargin depending on your graph type) + o [MISC] Added details of backwards compatibility breaks + o [MISC] New zoom mode - area. You can see this on the front page line graph and on the zoom documentation page + o [MISC] Added resizing capability. Will not work with other dynamic features (except the context menu) + + 3rd April 2010 + ============== + o [BAR] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [BAR] Added chart.title.xaxis + o [BAR] Added chart.title.yaxis + o [BAR] Added chart.title.xaxis.pos + o [BAR] Added chart.title.yaxis.pos + o [GANTT] Adjusted the background grid, adding the required default properties + o [GANTT] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [HBAR] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [LINE] Multiple shadow colors are now facilitated (see example on front page) + o [LINE] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [LINE] Added chart.title.xaxis + o [LINE] Added chart.title.yaxis + o [LINE] Added chart.title.xaxis.pos + o [LINE] Added chart.title.yaxis.pos + o [LINE] Added chart.backdrop, chart.backdrop.alpha and chart.backdrop.size + o [LINE] Shadow color can now be an array of shadow colors. ie. A different one for each line + o [MISC] Added note about installing your own event handlers to misc documentation page + o [MISC] Added RGraph.SetShadow() - a shortcut function for setting the shadow + o [ODO] Added option to not draw the pointer tail + o [ODO] Added chart.needle.type option. It can be "pointer" (default) or "triangle". + o [PROGRESS] Added chart.margin + o [PROGRESS] Added inner tickmarks (chart.tickmarks.inner) + o [PROGRESS] Made examples a bit better + o [SCATTER] Connecting lines can now be stepped (chart.line.stepped) + o [SCATTER] You can now specify the exact X point at which an X label is drawn + o [SCATTER] Added new grid properties: chart.background.grid.autofit + chart.background.grid.autofit.numhlines + chart.background.grid.autofit.numvlines + o [SCATTER] Added chart.title.xaxis + o [SCATTER] Added chart.title.yaxis + o [SCATTER] Added chart.title.xaxis.pos + o [SCATTER] Added chart.title.yaxis.pos + + ++------------------------------------------------------------------------------------------------------------+ +| STABLE RELEASE - 27th March 2010 | ++------------------------------------------------------------------------------------------------------------+ + + + 27th March 2010 + =============== + o [MISC] Just tweaks - nothing major + + 20th March 2010 + =============== + o [MISC] Reverted dark background color for zoom back to the lighter one + o [MODALDIALOG] Reverted the dark background color back to the lighter one + o [METER] Added more feint tickmarks + o [METER] Labels are now angled. This will be an option in the future + o [ODO] Added more feint tickmarks + o [ODO] Labels are now angled. This will be an option in the future + o [ODO] Significant changes to this see the docs page - http://www.rgraph.net/docs/odo.html + + 13th March 2010 + =============== + o [MISC] Removed curvy corner from context menu + o [WEBSITE] Added Google Buzz social networking icon + o [MODALDIALOG] Darkened the background a little. You can set this back if you wish by using the ModalDialog_dialog CSS class + + 6th March 2010 + ============== + o [METER] Documented shadow properties + o [MISC] Added RGraph.getPageWidth() which returns the page width, accommodating browser differences + o [MISC] Added RGraph.getPageHeight() which returns the page height, accommodating browser differences + o [MODALDIALOG] Increased the radius of the corners (ie they're more rounded now) + o [MODALDIALOG] Documented the ModalDialog CSS classes and also added miscellaneous documentation + o [MSIE] Added context menu to the MSIE example + + 27th February 2010 + ================== + o [API] Added information about the coords array. + o [API] Added a little information about dynamically updating your graphs + o [MISC] Zoom in canvas mode now has a dark background option - chart.zoom.background - can be true or false and defaults to true + Note: If you use the full canvas zoom, this will affect you - if you don't like it, you will need to turn it off + o [MISC] Added RGraph_zoomed_canvas CSS class. Also tweaked the default CSS for the two types of zoom + o [MISC] Tweaked the animation example + + 20th February 2010 + ================== + o [DOCS] Added reasonable caching strategy + o [DOCS] Expanded the API docs regarding the data properties + o [LINE] Removed chart.border property. You should use CSS on your canvas element instead. + o [LINE] Added chart.ymin property + o [LINE] Tickmarks are no longer drawn if the tick is outside the Y scale range + o [METER] Added shadow + o [WEBSITE] Removed most tables from the website + o [WEBSITE] Fixed the issue with the front page graphs, Google Chrome and missing text. This was done by NOT using + asynchronous processing. + + 9th February 2010 + ================= + o [PIE] Fixed pie chart sticks with athick white border + o [PIE] Added chart.labels.sticks.color + o [DOCS] Added link anchors to documentation pages, eg: http://www.rgraph.net/docs/bar.html#chart.labels + + 7th February 2010 + ================= + o [BAR] Added ability to specify number of Y labels - 1, 3 or 5 (the default). + o [LINE] Added ability to specify number of Y labels - 1, 3 or 5 (the default). + o [LINE] Added a little missing documentation + o [LINE] Small fix to MSIE arrow style tickmarks + o [MISC] Optimisations to all chart libraries + o [MISC] Added RGraph_zoom_window CSS class - the front page uses it if you want an example + o [SCATTER] Added ability to specify number of Y labels - 1, 3 or 5 (the default). + o [SCATTER] Added a little missing documentation + + 30th January 2010 + ================= + o [BAR] Performance tweaks. + o [DOCS] Made note about using tables for layout and how it can impact negatively on graph speed. + o [DOCS] Documented Pie chart label sticks. + o [LINE] Performance tweaks. + o [MISC] Opera (10.5) now supports the canvas text and shadow APIs + + 23rd January 2010 + ================= + o [LINE] Fix to arrow style tickmarks + o [MISC] Very minor change to tooltips and event handling + o [SCATTER] Added diamond shape tickmarks + + 16th January 2010 + ================= + o [BAR] Documented chart.ylabels + o [CONTEXT] Context menus are now positioned correctly when you specify a DOCTYPE in MSIE + o [LINE] Added and documented chart.ylabels + o [MODAL DIALOG] This is now completely static (when scrolling) in all browsers (Chrome, FF, MSIE, Safari, Opera), (MSIE requires that + you use a doctype. + o [ODO] Improved MSIE support (spurious circles are no longer drawn) + + 9th January 2010 + ================ + o [BAR] Added glass variant + o [BAR] Added sketch variant + o [DOCS] Documented getCanvasXY() function + o [MISC] Links now work in tooltips + o [MISC] Added standard box-shadow: CSS property where necessary + o [MISC] Slight border-radius change to context menu + o [PIE] Added small (optional) label sticks + o [PROGRESS] Added indicator arrows + + 2nd January 2010 + ================ + o [METER] Added this as a new chart type + o [MISC] More optimisations for Meter, Line and Bar charts + o [TRADAR] Added tooltips + o [TRADAR] Added ability to specify offsetx and offsety for labels + + 19th December 2009 + ================== + o [BAR] Added support for MSIE shadows. Shadow blurring is not available though + o [BAR] Fixed dot chart colours not showing correctly in MSIE + o [BIPOLAR] Added support for MSIE shadows. Shadow blurring is not available though + o [FUNNEL] Optimised this chart type a little + o [FUNNEL] Added support for MSIE shadows. Shadow blurring is not available though + o [LINE] Added support for MSIE shadows. Shadow blurring is not available though + o [MISC] The context menu for Safari, Opera and Firefox Mac is now triggered by a double click (left mouse button). + o [MSIE] Tooltips now work (albeit a little unreliably), but this browser is very slow at showing them. Using a doctype will + cause them to be ou of position. + o [PIE] Added support for MSIE shadows. Shadow blurring is not available though + o [PROGRESS] Added support for MSIE shadows. Shadow blurring is not available though + + 12th December 2009 + ================== + o [MSIE] Microsoft Internet Explorer is now supported in a limited fashion. You can see it in action here: + http://www.rgraph.net/docs/msie.html This is not using Google Chrome Frame. + o [TRADAR] Rewrote so that it works with MSIE. This rewrite means that tooltips will be feasible (I'm yet to add them) + o [WEBSITE] Significant reorganisation of website + + 5th December 2009 + ================= + o [API] Added and documented RGraph.Async() function, which can be used to help speed up your pages. There's a page which details it: + http://www.rgraph.net/docs/async.html + o [MISC] Removed text support for Opera. The graphs are still displayed, albeit without text + o [MISC] Changed to object detection in place of specific browser detection for older browsers. This means more + browsers are accounted for. + o [MISC] Added RGraph.getSegment() function, which returns the applicable segment information + (x, y, radius, startAngle, endAngle) + o [SCATTER] Added ability to do Barplots using the Scatter chart. + o [SCATTER] Can now specify the scatter to not display tick marks (be specifying the tickmark as null) + + 28th November 2009 + ================== + o [DOCS] Added RGraph.HideContext() to API documentation. + o [MISC] Simplified logic for showing the context menu. Please test your browser on the website before upgrading as this may + cause regressions. + o [MISC] Fixed slight oddity for zoom which resulted in a small zoom thumbnail + o [MISC] The RGraph website now works with Google Chrome Frame. NB: If you're having a similar problem, ensure the META + tag is in the first 1Kb of the page. + o [MISC] Achieved a degree of Opera compatibility. Please bear in mind that Opera does not yet support the canvas text + or shadow APIs so do not expect to see any shadows on your graphs. Text is simulated however, so the graphs + are still usable in some circumstances however. Also bear in mind that Opera support is buggy. + + 20th November 2009 + ================== + o [MISC] Added new mode for zoom - thumbnail This shows a zoom thumbnail (you must set chart.zoom.mode to thumbnail) instead of + zooming the entire canvas. The line graph on the front page shows an example of it. + o [MISC] Context menu in Mac Firefox is now attached to the left mouse button instead of the right + o [NOTE] Annotations are now persistent in Chrome (dev channel releases at the moment) and Chrome Frame + + 14th November 2009 + ================== + o [ALL] Finished zoom function + o [PIE] Work on linewidth and line color + o [MISC] Changed Safari to use left click for context menu - should elimate the temperamentality + + 8th November 2009 + ================= + o [ALL] Added zoom functionality (This is not finished yet) + o [API] Corrected this regarding graph data + o [MISC] Added RGraph.ClearAnnotations() to API documentation. NB: This function is called when you call RGraph.Clear() + + 31st October 2009 + ================= + o [DOCS] Correct the docs regarding text sizes + o [PIE] Miscellaneous fixes + o [RADAR] Changed to be left aligned + + 25th October 2009 + ================= + o [ALL] Added property: chart.text.font + o [ALL] Added property: chart.text.color + o [ALL] Changed from pixels to points for font sizes (you may need to reduce your font sizes slightly). Default is now 10pt + o [DONUT] Added ability to set key as being in gutter + o [DONUT] Added chart.align for left/center/right aligning the chart + o [PIE] Added chart.align for left/center/right aligning the chart + + 17th October 2009 + ================= + o [BAR] Added new option: chart.axis.color + o [Bipolar] Added new option: chart.axis.color + o [DOCS] Automated generation of API (properties) documentation + o [HBAR] Added new option: chart.axis.color + o [LINE] Added new option: chart.noxaxis + o [LINE] Added new option: chart.axis.color + o [LINE] Reduced default X/Y shadow offset + o [LINE] Added new option: chart.noendtick - useful for when you're generating line charts with Y axes on both sides + o [MISC] Changed "Combining..." page to illustrate combining two line charts + o [MISC] Added XML documentation + o [MISC] Added performance note about combining libraries + o [SCATTER] Added new option: chart.axis.color + + 10th October 2009 + ================= + o [BAR] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [BAR] Changed chart.labels.abovebar to chart.labels.above + o [BAR] Added chart.labels.above to stacked bar charts + o [BIPOLAR] Fixed using chart.xmax + o [BIPOLAR] Added chart.scale.decimals + o [HBAR] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [HBAR] Added chart.labels.above. Not technically "above" the bar (not at all), but it's so named for API compatibility + o [HBAR] Added chart.labels.above to stacked chart + o [LINE] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [PIE] Miscellaeous work + o [SCATTER] Added chart.background.grid.hlines, chart.background.grid.chart.background.grid.vlines and chart.background.grid.border + o [WEBSITE] Added sharing buttons + + 3rd October 2009 + ================ + o [ALL] Charts now clean up events if tooltips are not installed. This means that if tooltips are not being used + the onmousemove/onclick events (depending on the graph library) are reset to null. + o [BAR] 3D effect now works with background grid and bars + o [DOCS] Added API documentation (replaces working.html) + o [MISC] Changed various graphs default background bar colors to white + O [MISC] Removed array_range() function - unused + o [LINE] More (general) work + o [LINE] chart.fillstyle can now be an array as well as a string + o [LINE] Added 3D variant to line chart. + o [MISC] Added minified library archive + + 19th September 2009 + =================== + o [ALL] Added new option - chart.title.color - to all graph types (except the LED) + o [LINE] Slight modification to filled line charts and the (stroke) colour. + o [LINE] Changed stepped line chart so last vertical line is not drawn + o [LINE] Changed the look (for the better) of filled line charts and thick lines + o [LINE] Added option - chart.axesontop - useful in a minority of cases; causes the axes to be + redrawn after the graph + o [LINE] Added "chart.filled.range" option. Used to compare the range/difference between two sets of data. + o [MISC] Fixed negative horizontal bars + o [LINE] Fixed problem with null arguments + o [LINE] Filled line charts now work a little better with negative values + o [PROGRESS] Added chart.tickmarks.color + o [PROGRESS] Added chart.text.color + + 6th September 2009 + ================== + o [ALL] Fixed libraries to work with Prototype.js + o [ALL] Added chart.title.vpos allowing you override and specify the position of the title. This should be a + decimal from 0 to 1. By default it's not used + o [BAR] Can now have Y axis labels in right hand gutter + o [LINE] Can now have Y axis labels in right hand gutter + o [COMMON] Fixed scale generation bug when maximum value is zero (ie all of your values are zero) + + 22nd August 2009 + ================ + o [MISC] Optimisations on various graph libraries + o [MISC] Very minor albeit better HTML5 compliance + o [LINE] You can now specify the Y axis position - left (default) or right + + 8th August 2009 + =============== + o [BAR] Added 3D effect to regular, grouped and stacked charts + o [GANTT] Can now specify background grid width + o [LED] The text is now stripped of right-most whitespace + + 25th July 2009 + ============== + o [MISC] Stop using $() function for better compatibility with outside libraries + o [SCATTER] Support supplying multiple datasets as one big array instead of multiple arrays + o [ALL] Changed all graph types to "new RGraph.xxx()" format + + 3rd July 2009 + ============= + o [DOCS] Misc updates + o [DOCS] Fixed docs regarding default gutter size + o [LINE] Handle null values better + o [LINE] Documented optional different fill colour + o [MISC] Added caching enhancements + o [MISC] Slight change to FixEventObject() so offsetX and offsetY are available in Firefox + o [SCATTER] Allow multiple datasets. Effect is only visible when lines are shown + o [SCATTER] Key can now be shown for multiple lines + + 20th June 2009 + ============== + o [ALL] Code optimisations + o [ALL] Annotations are now persistent in browsers that support HTML5 DOM storage (currently Firefox 3.5 and Safari 4) + o [BAR] Added ability to specify labels above bars on single and grouped bar charts + o [SCATTER] Added ability to show connecting line + + 6th June 2009 + ============= + o [ALL] On graphs that support tooltips, you can now have context menus at the same time as tooltips + o [MISC] Fixes to hiding palette in Chrome + o [MISC] Fixed a palette resizing bug + o [MISC] Changed the number of frames for expand and fade tooltip effects from 5 to 10 - looks a little smoother + o [MISC] Fixed a minor scale bug + o [MISC] Changed name of ShowPalette() function to RGraph.Showpalette() + o [PIE] Fixed minor pie chart bugs with mouse cursor + + 23rd May 2009 + ============= + o [ALL] Documented context menu + o [ALL] Added annotations - useful to highlight interactively, and added example to front page line chart + o [BAR] Added pyramid chart variant + o [BAR] Added arrow chart variant + o [BAR] Added crosshairs + o [FUNNEL] Added tooltips + o [LINE] Added crosshairs + o [LINE] Can now have a context menu at the same time as tooltips + o [MISC] Added annotations mini colour palette + o [SCATTER] Added crosshairs + o [SCATTER] Fixed bug where pre/post units were not being shown + o [SCATTER] Can now have a context menu at the same time as tooltips + + 9th May 2009 + ============ + o [BAR] Can now better control the shadow + o [BAR] Now ymax is exactly that which is used + o [BAR] You can now control the number of decimals that are used + o [BIPOLAR] Added shadow + o [HBAR] Can now better control the shadow + o [HBAR] Added tooltipcapability + o [PIE] Can now better control the shadow + o [LINE] Can now better control the shadow + o [LINE] Reversed order of arguments to the constructor - ie the data - so they are uniform with things like labels and tooltips + o [LINE] Can now have a fill colour that's different to the line colour (see the last example on the lines example page) + o [LINE] Added arrow style tickmarks (filled and not) - look best with a linewidth of 1 or 2 + o [LINE] Number of labels is now independent of number of datapoints, as are number of X tickmarks + The second to last two line chart examples show this in action + o [LINE] Added an interesting example showing off the new independence of labels, datapoints and tickmarks. The ninth + line example (the sin/cos/tan curves) has 361 datapoints but only 5 labels - 361 labels would be a bit much. + o [LINE] Line chart no longer draws in the gutter (see this in action by looking at the above tangent curve example) + o [PROGRESS] Brought shadow into line with the rest of the graphs + o [PROGRESS] Tidied this up a little + o [PROGRESS] Added tooltip capability + o [RADAR] Added tooltip capability + o [DOCS] Added small note about canvas and accessibility + o [MISC] Fixed a few HTML warnings + o [MISC] Cleaned up CSS warnings + o [MISC] Updated license + o [MISC] Slight tweaks to context menu: Specifying a null callback now means that that menu item + will not trigger the rollover effect + o [MISC] Fixed a scale bug where the top value is 5.xxx + o [WEBSITE] Made the line graph and pie chart on the front page a little more interactive + o [WEBSITE] Added a funnel chart to the front page + o [FUNNEL] Added horizontal alignment for labels + + 25th April 1009 + =============== + o [MISC] Changed to .zip format for archive instead of .tar.gz - easier to work with + o [MISC] Fixed issue with "expand" type tooltips & timers + o [MISC] Unified default gutter setting (25px) + o [MISC] Made shadows all point the same way across all graphs + o [MISC] Fixed horizontal background bars so that specifying a value greater than the ymax (or less than the negative ymax) + uses the ymax value instead + o [MISC] ModalDialog fixes for width and height settings on various browsers and DOM modes + o [MISC] Scale is now generated more accurately for *really* tiny values + o [LINE] Performance enhancements regarding scale generation + + 11th April 2009 + =============== + o [MISC] Slight aleration to improve "grow" option of tooltips. Instead of starting at the top and growing downwards, it now + starts in the center and grows outward in all directions + o [MISC] Changed "grow" to "expand" for tooltips + o [ODO] Documented ability to turn off the pointer end + o [DONUT] Added ring-in-ring effect, enabling multiple datasets + o [DONUT] Added option to use in-graph key instead of labels + o [LINE] Changed "tick" style tickmarks to "halftick". "tick" now gives a fullheight tickmark, and also added "endtick" + which gives a full height tick mark at the ends of the lines + o [MISC] Added doctype to all pages and fixed modaldialog accordingly + o [MISC] CSS and DTD fixes across the site + o [MISC] ModalDialog fixes + o [MISC] Add type attribute back to SCRIPT tags - needed for DTD compliance + o [HBAR] Added new graph type - Horizontal Bar chart + + 28th March 2009 + =============== + o [BAR] Added dot chart capability + o [BAR] When mouse is over a hotspot, cursor now changes + o [PIE] When mouse is over a hotspot, cursor now changes + o [LINE] When mouse is over a hotspot, cursor now changes + o [GANTT] When mouse is over a hotspot, cursor now changes + o [DONUT] When mouse is over a hotspot, cursor now changes + o [SCATTER] When mouse is over a hotspot, cursor now changes + o [MISC] Added new effect for tooltips. So now you can have "fade" (default) or "grow" + o [MISC] Added drop shadow to context menu + o [MISC] Resolved Chrome color, shadow and gradient bugs + o [DOCS] Added short section about suggested library layout + o [WEBSITE] Always now show two download links + + 14th March 2009 + =============== + o o------------------------------------------------------------------------------------------------------------------o + | IMPORTANT ! | + | Every single one of the property names has been changed to be a little more unified. The new format is now | + | "chart.xxx" where xxx is the actual name. Some of the names have been changed completely, eg. "chart.text.size", | + | which was formerly "textheight", whilst others only marginally. This was necessary to bring some semblance of | + | uniformity to the RGraph properties across all of the libraries, make it look a bit more "proffessional" and | + | provide plenty of scope for future properties. | + | | + | You should also note that as of this release (14th March 2009) that RGraph has been changed to use the canvas | + | text and shadow APIs. This may mean you needing to upgrade your browser if you want to use the latest version. | + | At the time of writing, this meant Firefox 3.1b2, Safari 4 and Chrome 2. If you don't wish to upgrade your | + | browser, or need Opera support, then you will need to remain on the 28th February 2009 version. | + o------------------------------------------------------------------------------------------------------------------o + o [FUNNEL] Added key ability to Funnel chart + o [FUNNEL] Added shadow for key + o [BAR] Added shadow for key + o [LINE] Added shadow for key + o [RADAR] Added shadow for key + o [TRADAR] Added shadow for key + o [RADAR] Added tick marks to the axes + o [PIE] Added border option. + o [BAR] Added "in graph" static labels, useful for highlighting things + o [LINE] Added "in graph" static labels, useful for highlighting things + o [MISC] Provided easy access to minified copies of the libraries + o [ODO] Added inner and outer shadows + o [BAR] Changed to canvas text & shadow API + o [BIPOLAR] Changed to canvas text & shadow API + o [DONUT] Changed to canvas text & shadow API + o [FUNNEL] Changed to canvas text & shadow API + o [GANTT] Changed to canvas text & shadow API + o [LED] Changed to canvas text & shadow API + o [LINE] Changed to canvas text & shadow API + o [ODO] Changed to canvas text & shadow API + o [PIE] Changed to canvas text & shadow API + o [PROGRESS] Changed to canvas text & shadow API + o [radar] Changed to canvas text & shadow API + o [SCATTER] Changed to canvas text & shadow API + o [TRADAR] Changed to canvas text & shadow API + + 28th February 2009 + ================== + o [MISC] Added performance information about onload + o [BAR] Can now specify Y axis units (both before and after the number) + o [LINE] Can now specify Y axis units (both before and after the number) + o [SCATTER] Can now specify Y axis units (both before and after the number) + o [PROGRESS] Can now specify Y axis units (both before and after the number) + o [BIPOLAR] Can now specify X axis units (both before and after the number) + o [BAR] Fixed scale bug + o [MISC] Added UK pound sign to font set + o [FUNNEL] Added new chart - Funnel chart. Can be used to represent sales processes + o [FUNNEL] Made funnel use canvas shadow API + o [MISC] Changed minification script to work "in-place" NOTE + o [PROGRESS] Made progress use canvas shadow API + o [MISC] Tested RGraph on Safari 4.0 - appears to be fine + o [LINE] Added ability to specify horizontal coloured bars + o [BAR] Added ability to specify horizontal coloured bars + o [SCATTER] Added ability to specify horizontal coloured bars + + 14th February 2009 + ================== + o [PIE] Added tooltips + updated docs to correspond + o [WEBSITE] Added tooltips to Pie on front page + o [LED] Added "counter-like" basic LED grid + o [DONUT] Made donut a proxy to pie chart + o [DONUT] Added tooltips + o [MISC] Moved CSS styles to scripts. You no longer need to define CSS styles unless you wish to override something + o [PIE] Made tooltips for pie use 3D effect. This is optional - it can be the traditional 2D or the new 3D effect + o [SCATTER] Can now have the X axis in the center + o [SCATTER] Added tooltip facility + o [MISC] Consolidated invoice handling + o [MISC] Minor fix to DOM structure of context menu + o [LINE] Can now have combined Line and Bar chart so you can overlay Line graphs on top of Bar charts + o [BAR] Can now have combined Line and Bar chart so you can overlay Line graphs on top of Bar charts + o [MISC] Moved showcase examples to separate pages - showcase.html was doing too much and becoming far too slow + + 31st January 2009 + ================= + o [ODO] Added .beginPath() when starting to draw the Odo - needed for animation + o [MISC] Rewrote ModalDialog + o [GANTT] Corrected gantt chart docs + o [MISC] Context menu is now always the correct width + o [BAR] Added ability to specify X axis labels to be drawn at eith 45 or 90 degrees + o [LINE] Added ability to specify X axis labels to be drawn at eith 45 or 90 degrees + o [SCATTER] Added ability to specify X axis labels to be drawn at eith 45 or 90 degrees + o [BIPOLAR] Added tooltips + o [DOCS] Re-jigged (ever so slightly) docs index layout + o [DOCS] Added info on working with RGraph objects in conjunction with accessing the underlying + canvas/context objects + o [DONUT] Made sure the above was valid + o [PROGRESS] Made sure the above was valid + + 17th January 2009 + ================= + o [MISC] Added licensing FAQ page including invoice mailer + o [MISC] Moved CSS to css subfolder + o [MISC] Renamed modaldialog and removed external fade library + o [MISC] Added example of how to integrate RGraph with external libraries using the ModalDialog + o [MISC] ymax property is no longer deprecated - it can be used to stop the scale changing when animating your graphs. + o [MISC] Added documentation page about animation + o [SCATTER] Added square tick type + o [PIE] Fixed last segments line width + o [MISC] Updated copyright notice + o [DOCS] Added basic example for implementation guidance + o [MISC] Changed test page to use tables instead of divs. This will make it more apparent if something breaks + in the RGraph.getMouseXY() function. + o [ODO] Changed to use 10 labels instead of 8 - should make for nicer scale values. + o [ODO] Made tick marks tie into labels more + + 4th January 2009 + ================ + o [DOCS] Added note about pre-caching + o [SCATTER] Added color example to scatter chart + o [MISC] Fixed tooltips appearing in the wrong place + o [MISC] Removed tooltip shadow layer. Shadows are accomodated for in CSS3 + o [DOCS] CSS class documentation + o [MISC] More work on things working with html5 doctype + o [MISC] Removed shadow layer from tooltips. This will be accomodated in CSS3, and is already by some browsers (MSIE (!), Chrome, + Safari, and the forthcoming FF 3.1) + o [MISC] Ditto for context menus + o [MISC] Changed RGraph.getMouseXY() to be more accomodating + o [WEBSITE] Added favicon.png + o [WEBSITE] Added example of pie chart to front page + o [WEBSITE] Changed front page to use tables instead of divs to tell if tooltips keep working + o [MISC] Overhauled RGraph.getMouseXY() so that it works in spite of being nested in tables. It also works + if you position the canvas absolutely and only specify one of the top or left. Wonderbar! + o [SCATTER] Added ability to specify the color of the tick ie:[x, y, color] It's optional. ** Could do with a key ** + o [DOCS] Added color information + o [DOCS] Added context menu information + o [MISC] Made context menus more XP style + o [GANTT] Customised the example more, showing the completage indicators. + o [GANTT] Events and vertical bars are now defined in the usual way, by using the Set() method + o ]MISC] Added __object__ property to all graph objects + o [MISC] Unified text size at 10 points (and 2 greater for titles). + o [MISC] Added context menus to all graph types + o [MISC] Fixed tooltip widths on front page. And siving in general in Opera + + 20th December 2008 + ================== + o [MISC] Converted all graphs to use dollar ($) function in place of document.getElementById("...") + o [TRADAR] Now defaults to drawing the key out of graph + o [LINE] Now labels are turned off if there's fewer labels than data points (every line) + o [MISC] Added better smaller scales - now goes down to 0.0005 + o [DOCS] Added more details on tooltips and positioning + o [LINE] Added gridwidth property + o [BAR] Added gridwidth property + o [MISC] Removed rotating text example (it's still in the archive - it's just not linked) + o [MISC] More work on scales when decimal values are involved, plus graphs now use thousand seperators to aid readability + o [MISC] More work on tooltips and their positioning. + o [MISC] Added "keyposition" option, which can be either "gutter" or "graph" and determines where the key is drawn + o [MISC] Unified all graphs to use the same "textheight" property for text. + o [MISC] All titles are now drawn two pixels larger than the "textheight" property + o [LINE] Key can now be placed above the actual graph area if desired + o [BAR] Key can now be placed above the actual graph area if desired + o [MISC] Fixes to number formatting, including when there multiple graphs on a page + o [BAR] Changed summary line to default to off + o [BIPOLAR] Scale values now contain thousand separators + o [SCATTER] Scale values now contain thousand separators + o [LINE] Scale values now contain thousand separators + o [BAR] Scale values now contain thousand separators + o [MISC] Updated issues.html with details of the smallest scales + o [SCATTER] Deprecated the ymax property. RGraph.getScale() is now good enough (xMax is bipolar chart equivalent) + o [LINE] Deprecated the ymax property. RGraph.getScale() is now good enough + o [BIPOLAR] Deprecated the xmax property. RGraph.getScale() is now good enough + o [BAR] Deprecated the ymax property. RGraph.getScale() is now good enough + o [MISC] Made RGraph.getScale() return the whole scale (all five values), not just the top value + This means better quality scales can be produced. + o [MISC] Made note about positioning in docs on issues page + o [ODO] Work on Small scale values + o [BIPOLAR] Work on Small scale values + o [BAR] Work on Small scale values + o [LINE] Work on Small scale values + o [MISC] Added tooltip fade in effect using CSS3 opacity + o [BAR] Added tooltip functionality to stacked bar chart + o [BAR] Added tooltip functionality to grouped bar chart + o [MISC] Added gradient to front page graphs + o [TRADAR] Added gradient to bipolar on test page + o [TRADAR] Re-added traditional radar chart. It doesn't work in Opera 9.x, only Opera 10+. Documentation for this also fine tuned + o [MISC] Tidied up RGraph.common.js + o [MISC] Removed drawTextAngle() - RGraph.Text() does this + o [MISC] Added a bar chart with centre X axis to example page + o [GANTT] Fixed Gantt chart title text placement + o [GANTT] Added title text size property + o [WEBSITE] Changed colour of example on website + o [RADAR] Changed key to be the same as the bar/line/tradar + o [DOCS] Lots of link updates + + 5th December 2008 + ================= + o [LINE] Made keys and lines (ie stacked/filled) totally correspond. + o [BAR] Stopped bar chart tooltips redrawing the axes. Not entirely sure why it's doing this, but it seems fine without it. + o [DOCS] Bundled license document with archive + o [DOCS] Documentation and example updates. + o [MISC] Changed index.php to index.html Not earth shattering, but should make it clearer for people where to start, + and also makes the downloaded index.html styled as it should be. + o [WEBSITE] Added Cache-Control: Header + o [WEBSITE] Added link to support group on Google more obvious + o [DOCS] Added list of common issues + o [MISC] Added header into files that didn't have it + o [MISC] Removed CanvasText.enable() - unneccessary + o [ODO] Shortened the Odos pointer + + 28th November 2008 + ================== + o [MISC] Got rid of HTML5 doctypes - they seem to be interfering with tooltip positioning. + If you don't use tooltips, you'll therefore be fine. + o [ODO] Better needle. I think. + o [BAR] Keys for charts are now specified in the same order as the pertaining datasets + o [LINE] Keys for charts are now specified in the same order as the pertaining datasets + o [MISC] Added CSS3 shadows to tooltips + o [GANTT] Fixed bug in Gantt chart textsize property + o [LINE] Finally made shadows 100% accurate (ie tickmarks now have shadows too), including stepped line + o [WEBSITE] Added tooltips to line chart on front page + o [MISC] Fixed release script (check) + o [LINE] Added keys to line & bar chart + o [BAR] Added keys to line & bar chart + o [MISC] o-----------------------------------------------------------------------------------------------------o + | Use unified better getters/setters for all charts. This is a MAJOR update, since it affects all the | + | charts in a fundamental way. For the better. Any update should be done cautiously. But since | + | RGraph is beta, all updates should be done that way. Judging by the RGraph test page though, | + | everything seems fine. | + o-----------------------------------------------------------------------------------------------------o + + 15th November 2008 + ------------------ + o [BAR] Removed animation + o [LINE] Documented stepped line chart + o [LINE] Fixed tick marks + o [LINE] Added ability to specify line chart as being stepped + o [MISC] Documented default values. + o [GANTT] Added gantt chart + o [PROGRESS] Corrected name of Progressbar + o [LINE] Moved the background drawing to RGraph.common.js + o [SCATTER] Moved the background drawing to RGraph.common.js + o [MISC] Tooltips now move to the left of the cursor when it's too far right + o [MISC] Changed print_r() to pr() - less to type + o [MISC] Added GetDays() function for Gantt chart + o [GANT] Added it + o [MISC] Added an RGraph.print_r() method for easier debugging + o [MISC] Added a registry object to the common library to resolve scoping issues and so we don't need to use globals. Globals suck. + o [SCATTER] Added a plus tick style to the scatter chart - added a demo too + o [SCATTER] Fixed a bug in the Scatter graphs background drawing + o [BAR] Moved bar charts DrawBackground() into the RGraph.background class. Should make reuse far easier. + o [BAR] "backgroundGrid" property changed to "grid" + o [MISC] Added a minification script. This script doesn't reduce the scripts to the bare minimum. But it can take 50% off the size (!). + o [LINE] Can now specify colour of shadows for line and bar graphs + o [BAR] Can now specify colour of shadows for line and bar graphs + o [LINE] line chart now has real shadows and so they can be used for lines of any thickness + o [LINE] can now specify shadow offset + o [SCATTER] Fixed background bar boundaries + o [SCATTER] Added plus cross type + o [MISC] Moved background drawing to common library + o [WEBSITE] sitemap.xml Now has correct date which changes correctly when a release is performed CHECK + o [MISC] Tooltip nows store the text in __text__ variable on the tooltip object (.innerHTML changes the HTML when it's set) + + 1st November 2008 + ------------------ + o [BAR] Last bar chart example now uses a gradient + o [MISC] Changed hyphens to be slightly shorter + o [WEBSITE] Changed sitemap to use an update frequency of weekly. Last modified is now updated when a release is performed + o [BAR] Can now specify the grid size on the bar chart + o [LINE] Setting propeties can now be any case, upper or lower + o [MISC] Added RGraph.print_r() function + o [LINE] TickSize now actually has an effect + o [LINE] Added tooltips to line chart + o [WEBSITE] Moved support forum to Google group + o [MISC] Added object registration (for redrawing) + o [BAR] Removed margin from being accounted for in height calculation + o [LINE] Made tickmarks more coherent + o [BAR] Bar chart now uses canvas ID in some, but not all, error messages + o [LINE] Added small drop shadow to line chart + o [WEBSITE] Added example graphs to front page + o [BAR] Added tooltips to line chart + o [WEBSITE] Added more performance related information + o [PIE] Added drop shadow + + 25th October 2008 + ----------------- + o [DOCS[ Added integration section + o [RADAR] Added title to radar + o [RADAR] Added textStyle to radar + o [PIE] Made one of the pie charts use a gradient + o [PROGRESS] Added shadows + o [PROGRESS] Added title + o [ODO] Converted plain colour to radial gradient + o [PIE] Added gutter and title + o [DONUT] Added gutter and title + o [MISC] Fixed comma issue with rendering text + o [MISC] Added something to text bounding box illustrating exactly where the point specified is + o [BIPOLAR] Bipolar middle bit is now 60px wide instead of 50 + o [BAR] Fixed shadow bugettee in Safari, Chrome, Opera + o [ODO] Documented and vastly improved. Made it use a gutter now allowind for a title (implemented) + o [MISC] Added common function, DrawTitle() + o [MISC] Added a Javascript version of the PHP function range() + o [MISC] Added ability to specify a title to the bar chart, line graph and scatter graph. + o [MISC] Changed directory layout slightly + o [MISC] Forum is now ecluded from the tar + o [MISC] Much improved scale auto-generation + o [DOCS] Added code samples to docs pages + o [DOCS] Added section on the front page about performance + o [SCATTER] Many improvements to the scatter graph + o [SCATTER] Much better auto scale generation + o [SCATTER] Made scatter use RGraph common library for text + o [RADAR] Converted to use common library for text + o [LINE] Much improved scale auto-generation + o [LINE] Changed to rounded line ends - not very noticable though + o [LINE] Converted labels to be drawn by the RGraph library + o [BAR] Added optional shadow effect + o [BAR] Removed ability to have X axis at the top. It served no real purpose and only served to complicate the code + o [BAR] Added animation + o [BAR] Much improved scale auto-generation + o [BAR] Converted text functions to use RGraph common library + o [BAR] Can now specify a title for the bar chart + o [BAR] Fixed a bug for Chrome + o [BAR] Fixed minor bugs in bar chart (background bars) + o [BAR] Added grouping property, which defaults to stacked, but can also be grouped, producing what you would + expect (unless you're expecting a chicken. + o [BAR] Added a few warnings concerning bad combinations of axis positions + o [ODO] Added more labels, now at 8 instead of 4 + + 24th September 2008 + ------------------- + o [WEBSITE] Added RSS feed to forum + o [DOCS] Added more documentation + o [ALL] Unified (sort of) the error messages + o [ODO] Added odometer + o [BIPOLAR] Added a bottom gutter for scale to go in + o [BIPOLAR] Added bottom text labels + o [PIE] Made pie chart work without translating + o [TRADAR] Added real radar chart. + o [BAR] Bar chart can now have the X axis in the center, so it now able to represent negative values + o [LINE] Allowed multiple lines + o [LINE] Line chart can now have the X axis in the center, so it now able to represent negative values + o [LINE] Fixed bug in line chart that meant if it was filled the filled line was stopping too short + o [LINE] Made it more obvious (I think) for specifying data when using multiple data sets (ie multiple lines) + + 4th September 2008 + ------------------ + o Various additions including labels on all the graphs \ No newline at end of file diff --git a/RGraph/docs/adjusting.html b/RGraph/docs/adjusting.html new file mode 100644 index 0000000..aa49251 --- /dev/null +++ b/RGraph/docs/adjusting.html @@ -0,0 +1,244 @@ + + + + + + + RGraph: HTML5 canvas graph library - Adjusting your graphs interactively + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Adjusting your graphs interactively

+ + + + [No canvas support] + [No canvas support] + [No canvas support] + [No canvas support] + [No canvas support] + + + +

+ Since 24th May 2010 you have had the ability to adjust your graphs interactively. Currently the Bar chart, Line chart, + Progress Bar, Rose chart and the Tradar have this facility. Some graph types use multiple event handlers and as such + are unlikely to work well with other dynamic features. The Line chart is an example of this, and whilst it does work + with the context menu (and so the full canvas zoom), it is unlikely to work with other dynamic features. +

+ + +

+ At the current time this feature on the Bar and Line charts don't work with X axis in the center. +

+ + +

+ If your intention is to make some sort of interactive console, new HTML5 input types may also be of interest (for example the new range input type + which gives you a "slider bar"). Eg (Chrome/Safari/Opera): +

+ +

+ + +

+ + + \ No newline at end of file diff --git a/RGraph/docs/animation.html b/RGraph/docs/animation.html new file mode 100644 index 0000000..71669dd --- /dev/null +++ b/RGraph/docs/animation.html @@ -0,0 +1,313 @@ + + + + + + + RGraph: HTML5 canvas graph library - Animating your graphs + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Animating your graphs

+ + + +
+ [No canvas support] +
+ +

+ Animating your graphs is a relatively easy affair, whilst not being supported natively as it would only serve to + over-complicate the RGraph libraries. The way to do it is to use + the function RGraph.Clear(canvas), passing it your canvas object that is returned by + document.getElementById(). By default this will cover the canvas in white. You can change this by + passing it the color you want it to use as the second (optional) argument. You could even use a gradient if + you wanted. Then you can simply redraw the entire graph. +

+ +

+ One thing you should note, is that you may have to specify the scale manually, to prevent it from changing + from frame to frame. This can be done by using the chart.ymax property. +

+ +

+ You can review the source of this page if you need further help. Two global variables are set - the number of frames + and the current frame number (which starts at one). The graphs are then drawn with appropriate data + (ie the data multiplied by the frame number over the total number of frames). If the frame number is less than + the total number of frames, the frame number is incremented and the function (window.onload) is called again + after a small delay. +

+ +

Animation using jQuery

+ + +
+ [No canvas support] +
+ + + + +

+ You can if you prefer use an external library for animation, like jQuery. +

+ +

+ The graph to the right is animated using + jQuery. In the example the width is maintained by placing the canvas within a DIV which has the width/height CSS + attributes set. +

+ +

+ In this instance, the + Google hosted jQuery is used. +

+ + +
+
+ + \ No newline at end of file diff --git a/RGraph/docs/annotating.html b/RGraph/docs/annotating.html new file mode 100644 index 0000000..0e7dce3 --- /dev/null +++ b/RGraph/docs/annotating.html @@ -0,0 +1,263 @@ + + + + + + + RGraph: HTML5 canvas graph library - Annotating your graphs + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Annotating your graphs

+ + + +
+ [No canvas support]
+
+ +

+ The annotations feature brings presentation style functionality to RGraph graphs. You can use this feature + for highlighting your graphs if you need to. +

+ + + + +

How do annotations work?

+ +

+ Enabling annotations is a very simple affair, and consists of doing the following: +

+ + 
myGraph.Set('chart.annotatable', true);
+ + +

Browser support

+ +

+ Annotations are supported in all browsers that RGraph works with - Firefox 3.5+, Chrome 2+, Safari 4+, Opera 10.5+ and + MSIE/Google Chrome Frame. They DO NOT however work with MSIE 8/ExCanvas. +

+ + +

What can I use annotations for?

+ +

+ As mentioned you can use it for presentations, highlighting things to yourself or others or just to have fun drawing (!). +

+ + +

Are annotations persistent?

+ +

+ That depends on which browser you're using. The annotation data is stored in the users web browser (not on the web server), + meaning currently (21st March 2010) browser support is limited to Firefox 3.5+, Safari 4+, + Chrome 4+ and Opera 10.5+. MSIE 8 also has the required storage capabilities, but since it doesn't yet support canvas, the point is moot. + The user does not have to + confirm anything for storage to be allowed - try it out on this page by drawing on the graph and then refreshing the page. +

+ + +

How do I show the mini-palette?

+ + +

+ You can show the palette by using the RGraph.Showpalette function shown below as a context menu item: +

+ + 
+myObj.Set('chart.contextmenu', [
+                                ['Show palette', RGraph.Showpalette],
+                                ['Clear', function () {RGraph.Clear(myObj.canvas); myObj.Draw();}]
+                               ]);
+
+ +

+ This code will result in the same context menu as the graph above. +

+ + +

How can I clear the annotations?

+ + You can simply clear the graph and redraw it: + + 
RGraph.Clear(myGraph.canvas); // Clear the graph
+myGraph.Draw();               // Redraw it
+ +

+ In the graph above, there is a context menu that allows you to both clear the graph and also demonstrates the mini-palette + feature available to you. +

+ + +

Replaying annotations when they're off

+ +

+ When annotations are not enabled, any prior annotations that may have been made are not displayed. To show them you need + to use the API function RGraph.ReplayAnnotations(object) after the call to .Draw(). +

+ + \ No newline at end of file diff --git a/RGraph/docs/api.html b/RGraph/docs/api.html new file mode 100644 index 0000000..c6a94f2 --- /dev/null +++ b/RGraph/docs/api.html @@ -0,0 +1,835 @@ + + + + + + + RGraph: HTML5 canvas graph library - API documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - API documentation

+ + + +
+ + + + +

Overview

+ +

+ Working with RGraph objects is purposefully easy, to make them straight forward to integrate into your own scripts if you want to. For any + particular graph type there are a few files required - the common libraries and the graph specific library. Eg: +

+ + 
+<script src="RGraph.common.core.js"></script>
+<script src="RGraph.bar.js"></script>
+
+ +

+ RGraph.common.core.js is a function library that contains a large set of functions that support the graph classes. + Some functions, and sets of functions, have their own files. For example, the zoom functions reside in RGraph.common.zoom.js, + so if you don't need zoom, you don't need this file. + Each of the graph libraries (RGraph.*.js) contains that particular graphs class. If you'd like to see a "bare bones" + implementation, you can look at the basic example. There's also a + skeleton example to make it easier to create new graph types. +

+ + +

Canvas and context references

+ +

+ Each graph object maintains references to the context and canvas as properties. So to get hold of them all you + need to do is this: +

+ + 
+<script>
+    window.onload = function ()
+    {
+        // 1/2 First draw the chart
+        var myBar = new RGraph.Bar('myCanvas', [1,5,8,4,6,3,1,5,7,8,4,6]);
+        myBar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        myBar.Draw();
+    
+        // 2/2 Now get hold of the references
+        var context = myBar.context; // Get hold of a reference to the context
+        var canvas  = myBar.canvas;  // Get hold of a reference to the canvas
+    }
+</script>
+
+ + +

Working with events

+ +

+ When working with events, you may come across the situation where you have a reference to the canvas, but + also need to access the graph object. For this reason the constructor of each object adds a reference to the object to the + canvas and you can access it like this: +

+ + 
+<script>
+    document.getElementById("myCanvas").onclick = function (e)
+    {
+        var src = (RGraph.isIE8() ? event.srcElement) : e.target;
+    
+        // The RGraph object constructors add __object__ to the canvas.
+        var myBar = src.__object__;
+    }
+</script>
+
+ + +

Working with graph coordinates

+ +

+ For most graph types, the coordinates of elements (eg bars, lines etc) are to be found in the class variable obj.coords. + This is usually a multi-dimensional array consisting of the coordinates of those shapes, or of points. As an example the bar + chart maintains the X, Y, width and height of each bar (or sections of bars in a stacked bar chart). The coords array is + usually a flat array, even when you have multiple sets of data. +

+ +

+ By using the RGraph.getMouseXY() function and this array you can determine if a bar was clicked on, or if the mouse is near a + line point etc. +

+ + 
+var myCoords = myBar.coords;
+
+ +

+ Note: Previously the coords array values sometimes included the margin values, and sometimes didn't. As of 17th + April 2010 the values have all been unified to not include the margin values, so the values are as reported. +

+ + +

Working with graph data

+ +

+ Another variable you may need is the data variable. For most graph types, this is where the data is stored. It is usually + untouched, so it is as you supplied to the graph objects constructor. A notable exception to this is filled line charts. + Here the original data is stored in the class variable original_data. The data supplied is modified to produce the stacking + effect. If you need to modify a filled line charts data you will need to change this variable instead. +

+ +

+ Not all graph types use the data variable. For some the name is different so that it makes a little more sense. The + graph types and their associate data variables are listed below1. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Graph typeData variable(s)
Barobj.data
Bi-polarobj.left, obj.right
DonutThis is now a variant of the Pie chart
Funnelobj.data
GanttSee the docs
Horizontal Barobj.data
Horizontal Progress barobj.max, obj.value
LEDobj.text
Lineobj.original_data3
Meterobj.min, obj.max, obj.value
Odometerobj.start, obj.end, obj.value
Pieobj.angles, obj.data
Radial Scatter chartobj.data
Roseobj.max, obj.data
Scatterobj.max, obj.data2
Traditional Radarobj.data, obj.max
Vertical Progress barobj.max, obj.value
+ +
    +
  1. In the table, obj refers to your graph object.
    2. +
  2. For the Scatter chart, each data point is an array of X/Y coordinates, the color and the tooltip for that point.
    3. +
  3. + The Line chart obj.original_data is an aggregation of all the datasets given to the Line chart, so the first + dataset is held in obj.original_data[0], the second in obj.original_data[1] etc. +
    4. +
+ + +

Updating your graphs dynamically

+ +

+ 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>
+
+ +

+ A common request is to be able to update graphs dynamically. This is quite simple and consists of three steps: +

+ +
    +
  1. Get the new data from the server (with an AJAX request for example).
    2. +
  2. Set the data in your graph object. See the above table for the appropriate property to use.
    3. +
  3. Call the .Draw() method again.
    4. +
+ +

+ If you don't need to get data from your server (ie it's all client-side) then you can omit the first step. Also, it may be + sufficient to simply recreate the entire object from scratch. This means that you won't have to alter and + RGraph internal properties - just recreate the graph object and configuration. There's a simple function + you can use for AJAX purposes here. +

+ + + +

Setting properties

+ +

+ To set RGraph properties, ideally you should use each objects setter (there's also a corresponding getter). These functions + accomodate some backwards compatibility changes, so by not using them you run the risk of your graphs not working entirely as + expected. +

+ + 
+myObj.Set('chart.gutter', 25);
+myObj.Get('chart.gutter');
+
+ + +

 

+

References available on RGraph objects

+

+ RGraph stores various references to objects on the canvas (typically) to make getting hold of them easier. There's also a + Registry object in + which references are stored. Typically the objects are named with the format __xxx__, and you can inspect the + objects by using a console(eg the inspector that's part of Google Chrome - CTRL+SHIFT+J). Some examples are: +

+ + + + These are just a sample of what's available, to find more you should use an introspection tool, look at the source, or ask + on the support mailing list. + + + + +

Scale information

+

+ For the Bar, Bipolar, HBar, Line and Scatter charts the scale that is used is stored in the scale class variable. Eg: +

+ + 
+<script>
+    var myBar = new RGraph.Bar('cvs', [56,43,52,54,51,38,46,42,52]);
+    myBar.Draw();
+    
+    var myScale = myBar.scale
+</script>
+
+ + +

Adding text to your graphs

+

+ If you want to add arbitrary text to your graph(s) you can use the API function RGraph.Text(). +

+ + 
+<script>
+    // Draw a basic graph
+    var myObj = new RGraph.Bar('myCanvas', [4,5,5,8,7,6,4,8,5,9]);
+    myObj.Draw();
+    
+    // Draw some text
+    myObj.context.beginPath();
+        size = 12;
+        font = 'Verdana';
+        text = 'Some text!;
+        x    = 10;
+        y    = 10;
+
+        RGraph.Text(myObj.context, font, size, x, y, text);
+    myObj.context.fill();
+</script>
+
+ + +

RGraph functions

+ +

+ This is a list of some of the functions available to you in the RGraph common libraries. + It's not every single one that's available, but is a list of the common ones that you're likely to want to use. Arguments + in square brackets are optional. +

+ + 
+<script src="RGraph.common.core.js"></script>
+
+<script>
+    // Returns 9
+    myArray = [3,2,5,4,9,7,8];
+    max = RGraph.array_max(myArray);
+</script>
+
+ + +

Arrays

+ + + + +

Strings

+ + + + +

Numbers

+ + + + +

Miscellaneous

+ + + + +

Custom RGraph event related functions

+ + + + +

Other

+ +

+ These are functions which are less generic, and used to build the graphs. You may still wish to use them however. +

+ + + + + +

The skeleton file

+

+ The skeleton object + (RGraph.skeleton.js) gives you a base for creating new graph types that + match the RGraph object system (eg getters, setters, RGraph names etc). Example usage of the skeleton object would be: +

+ + 
+<script>
+    var myObj = new RGraph.Skeleton('cvs', [3,3,4,5,3,8,3,2,1,9]);
+    myObj.Set('chart.colors', ['red']);
+    myObj.Draw();
+
+    var colors = myObj.Get('chart.colors');
+</script>
+
+ + +

Questions

+ +

+ If you have a question regarding the API, you can ask it on the + mailing list +

+ + \ No newline at end of file diff --git a/RGraph/docs/async.html b/RGraph/docs/async.html new file mode 100644 index 0000000..bdf4f9c --- /dev/null +++ b/RGraph/docs/async.html @@ -0,0 +1,265 @@ + + + + + + + RGraph: HTML5 canvas graph library - Asynchronous processing + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Asynchronous processing

+ + + +

Waiting for onload event...

+ +

+ + + + + These images are here to pad the page and slow down loading so that the window.onload event is slowed. This makes the + difference far more visible. +

+ + [No canvas support] + + + +

+ Asynchronous processing can speed up the display of your graphs, because the browser gets to your code, sets it + going and then continues on rendering the page. Particularly if you have a weighty page, + it can make quite a difference. The RGraph.Async() function itself is very simple, but because it can make + a significant difference to the speed of your page, it is documented here. There's an example of it to the right. + One thing to remember is to ensure your canvas tag is defined first before you set the function that creates + the graph going. +

+ +

+ Although asynchronous processing can speed up your pages, it can also give the appearance of slower pages due to partial + rendering, (ie your pages render a bit at a time). You therefore will need to experiment to get the best result for you. +

+ +
+ + 
+<script src="RGraph.common.js"></script>
+<script src="RGraph.line.js"></script>
+
+<canvas id="myCanvas" width="300" height="100">[No canvas support]</canvas>
+
+<script>
+    /**
+    * Create the line graph
+    */
+    function CreateLineGraph ()
+    {
+        var line = new RGraph.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]);
+        line.Set('chart.title', 'Sales for Acme Inc.');
+        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        line.Set('chart.hmargin', 10);
+        line.Set('chart.linewidth', 5);
+        line.Set('chart.shadow', true);
+        line.Set('chart.shadow.offsetx', 0);
+        line.Set('chart.shadow.offsety', 0);
+        line.Set('chart.shadow.blur', 15);
+        line.Draw();
+    }
+
+    RGraph.Async(CreateLineGraph);
+</script>
+
+ +

Things to remember

+ + + +

See also

+ + You might also be interested in the alternative, DOMContentLoaded event. + + + \ No newline at end of file diff --git a/RGraph/docs/bar.html b/RGraph/docs/bar.html new file mode 100644 index 0000000..55df870 --- /dev/null +++ b/RGraph/docs/bar.html @@ -0,0 +1,603 @@ + + + + + + RGraph: HTML5 canvas graph library - bar chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Bar chart documentation

+ + +

+ The bar graph, along with the line chart, is probably the most configurable of all the charts available, + simply because it's more common. +

+ +

+ The example file is here. +

+ + + + 
 
+<script>
+    window.onload = function ()
+    {
+        var data = [280,45,133,166,84,259,266,960,219,311];
+    
+        var bar = new RGraph.Bar('myCanvas', data);
+        bar.Set('chart.labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']);
+        bar.Set('chart.gutter', 45);
+        bar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
+        bar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
+        bar.Set('chart.background.grid', true);
+        bar.Set('chart.colors', ['rgba(255,0,0,1)']);
+        bar.Draw();
+    }
+</script>
+
+ + +

Properties

+ +

+ You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg: +

+ +

+ myBar.Set('name', 'value'); +

+ + + + + + +

Background

+chart.background.barcolor1
+ The color of the background bars, (1 of 2).
Default: white

+ +chart.background.barcolor2
+ The color of the background bars, (2 of 2).
Default: white

+ +chart.background.grid
+ Whether to show the background grid or not.
Default: true

+ +chart.background.grid.color
+ The color of the background grid.
Default: #ddd

+ +chart.background.grid.hsize
+ The horizontal background grid size.
Default: 40

+ +chart.background.grid.vsize
+ The vertical background grid size.
Default: 18

+ +chart.background.grid.width
+ The width that the background grid lines are. Decimals (eg 0.5) are permitted.
Default: 1

+ +chart.background.grid.border
+ Determines whether a border line is drawn around the grid.
Default: true

+ +chart.background.grid.hlines
+ Determines whether to draw the horizontal grid lines.
Default: true

+ +chart.background.grid.vlines
+ Determines whether to draw the vertical grid lines.
Default: true

+ +chart.background.grid.autofit
+ Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.
Default: false

+ +chart.background.grid.autofit.numhlines
+ When using autofit this allows you to specify how many horizontal grid lines you want.
Default: 7

+ +chart.background.grid.autofit.numvlines
+ When using autofit this allows you to specify how many vertical grid lines you want.
Default: 20

+ +chart.background.hbars
+ An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: myBar.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]); This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.
Default: null

+ +

Colors

+chart.strokecolor
+ The color of the outline of the bars.
Default: #666

+ +chart.colors
+ An array of the colors of the actual bars.
Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']

+ +

Margins

+chart.hmargin
+ The horizontal margin (in pixels) of the graph.
Default: 5

+ +chart.gutter
+ The gutter of the graph. This is the area outside of the X and Y axis - where the labels go. If you're short on space for your labels, try increasing this.
Default: 25

+ +

Labels and text

+chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size (in points) of the labels.
Default: 10

+ +chart.text.angle
+ The angle of the horizontal text labels (at the bottom of the graph). This can be one of three values - 0, 45 or 90.
Default: 0 (Horizontal)

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.labels
+ An array of the labels to be used on the graph.
Default: An empty array

+ + + chart.labels.above
+ If true, values will be shown above the bars. For regular and stacked bar charts units are included, whereas for + grouped bar charts they're not (usually there isn't enough space for them). +
Default: false

+ + + chart.labels.above.decimals
+ This stipulates how many decimals are used in the above bar labels. +
Default: 0

+ + + chart.labels.above.size
+ The font size of the above bar labels. Useful if you only have a few bars. +
Default: false

+ + +chart.labels.ingraph
+ An array of labels for the graph which are drawn "inside" the graph. If you have 5 data points then this should have a corresponding number of elements, though there is a shorthand available.
Default: null

+ +chart.ylabels
+ Can be true or false and determines whether the chart has Y axis labels.
Default: true

+ +chart.ylabels.count
+ A value that controls how many Y labels there are. Previously (prior to 8th August 2010) this could be 1,3,5. Now it can be any number, but keep in mind that if you use this it may result in decimals.
Default: 5

+ +chart.xlabels.offset
+ This allows you finer grained control over the X label positioning if you need it.
Default: 0

+ +chart.numyticks
+ The number of Y tickmarks. If you have changed the number of Y labels, you may also want to change this to match.
Default: 10

+ + +

Titles

+ + +chart.title
+The title of the graph, if any.
+Default: null

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.xaxis
+ This allows to specify a title for the X axis.
Default: none

+ +chart.title.yaxis
+ This allows to specify a title for the Y axis.
Default: none

+ +chart.title.xaxis.pos
+ This is multiplied with the gutter to give the position of the X axis title.
Default: 0.25

+ +chart.title.yaxis.pos
+ This is multiplied with the gutter to give the position of the Y axis title.
Default: 0.25

+ +

Shadow

+chart.shadow
+ Whether a drop shadow is applied.
Default: false

+ +chart.shadow.color
+ The color of the shadow.
Default: #666

+ +chart.shadow.offsetx
+ The X offset of the shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset of the shadow.
Default: 3

+ +chart.shadow.blur
+ The severity of the shadow blurring effect.
Default: 3

+ +

Scale

+chart.scale.decimals
+ The number of decimal places to display for the Y scale.
Default: 0

+ +chart.scale.point
+ The character used as the decimal point.
Default: .

+ + + chart.scale.round
+ Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.
+ Default: null

+ + +chart.units.pre
+ The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".
Default: none

+ +chart.units.post
+ The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".
Default: none

+ +chart.ymax
+ The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)

+ + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + + +

Interactive features

+chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.tooltips
+ A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.
Default: null

+ +chart.tooltips.effect
+ The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade

+ +chart.tooltips.event
+ This is the event that triggers the tooltips. It can be either onclick or onmousemove.
Default: onclick

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.tooltips.coords.adjust
+ When you translate (to make the best use of space for example) this allows you to adjust the tooltip coordinates accordingly.
Default: [0,0]

+ +chart.crosshairs
+ If true, you will get a crosshair centering on the current mouse position.
Default: false

+ +chart.crosshairs.linewidth
+ This controls the linewidth of the crosshairs.
Default: 1

+ +chart.crosshairs.color
+ The color of the crosshairs.
Default: #333

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +chart.adjustable
+ Defaulting to false, this determines whether your bar chart will be adjustable.
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ +

Miscellaneous

+chart.line
+ Formerly a boolean, this now stipulates a line graph object which is to be drawn on top of the bar chart. You can see an example here.
Default: null

+ +chart.variant
+ This simply stipulates whether you want a regular bar chart, a dot chart, a pyramid chart a 3D chart, a sketch or a glassy chart. Possible values are:The pyramid, dot, arrow, sketch and glass variants are only effective for regular bar charts - not grouped or stacked charts.
Default: bar

+ +chart.xaxispos
+ The position of the X axis. This can be bottom or center.
Default: bottom

+ +chart.axis.color
+ The color of the axes.
Default: black

+ +chart.grouping
+ How the bars are grouped, and it should be one of: grouped or stacked
Default: grouped

+ + + +
 
+

Methods

+ + + obj.getBar()

+ This method makes it easier to get hold of which bar has been clicked on, or hovered over. It returns an array of: + + + An example usage is: + + 
+<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
+
+<script src="RGraph.common.core.js"></script>
+<script src="RGraph.bar.js"></script>
+
+<script>
+    myGraph = new RGraph.Bar('myCanvas', [1.2, 1.3, 1.4, 1.5,6,1.9,2,2.1,2.5]);
+    myGraph.Set('chart.labels', ['John', 'Barry', 'Rich', 'Craig', 'Tom', 'Frank', 'Helen', 'Joyce', 'Fred'])
+    myGraph.Draw();
+
+    RGraph.Register(myGraph);
+    
+    myGraph.canvas.onclick = function (e)
+    {
+        RGraph.Redraw();
+    
+        var canvas  = e.target;
+        var context = canvas.getContext('2d');
+        var obj     = canvas.__object__;
+        var coords  = obj.getBar(e);
+        
+        if (coords) {
+            var top    = coords[1];
+            var left   = coords[2];
+            var width  = coords[3];
+            var height = coords[4];
+            
+            context.beginPath();
+                context.strokeStyle = 'black';
+                context.fillStyle = 'rgba(255,255,255,0.5)';
+                context.strokeRect(top, left, width, height);
+                context.fillRect(top, left, width, height);
+            context.stroke();
+            context.fill();
+        }
+    }
+</script>
+
+ + + + \ No newline at end of file diff --git a/RGraph/docs/bipolar.html b/RGraph/docs/bipolar.html new file mode 100644 index 0000000..0dbcdea --- /dev/null +++ b/RGraph/docs/bipolar.html @@ -0,0 +1,370 @@ + + + + + + + RGraph: HTML5 canvas graph library - Bi-polar chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Bi-polar chart documentation

+ + + +

+ The Bi-polar chart is good for comparing two things side by side. For example sales trends for two separate years, that you + want to compare. +

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var left  = [5,6,8,9,12,13,4,9];
+        var right = [5,8,4,11,15,26,13,16];
+    
+        var bipolar = new RGraph.Bipolar('myBipolar', left, right);
+        bipolar.Set('chart.colors', ['#fff', '#eef', '#ddf', '#ccf', '#bbf', '#bbf', '#aaf', '#99f']);
+        bipolar.Set('chart.margin', 3);
+        bipolar.Set('chart.labels', ['Barry', 'John', 'Fred', 'George', 'Rich', 'Larry', 'John', 'Mike']);
+        bipolar.Set('chart.title.left', '2007');
+        bipolar.Set('chart.title.right', '2008');
+        bipolar.Set('chart.gutter', 35);
+        bipolar.Draw();
+    }
+</script>
+
+ + +

Properties

+ +

+ You can use these properties to control how the chart apears. You can set them by using the Set() method. Eg: +

+ +

+ myBipolar.Set('name', 'value'); +

+ + + + + + +

Margins

+chart.gutter
+ The space given over to the labels.
Default: 25

+ +chart.margin
+ The space above and below each bar.
Default: 2

+ +

Titles

+ +chart.title
+The main title of the chart.
+Default: (An empty string)

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.color
+ The color of the title.
Default: black

+ + +chart.title.left
+ The left title.
Default: An empty string

+ +chart.title.right
+ The right title.
Default: An empty string

+ + +

Colors

+ + + chart.colors
+ An array of colors. These too can be gradients that you make if you wish.
+ Default: ['#fcf', '#00f', '#f00', '#0f0', '#ff0', '#0ff', '#f0f', '#ff6101', '#b401ff', '#e4ff01', '#fb8195', '#ccc']

+ + + chart.strokestyle
+ This is the color used as the stroke style. If you didn't want it, you could set this to rgba(0,0,0,0)
+ Default: #333

+ + +

Labels, text and axes

+chart.xtickinterval
+ The X tick mark interval.
Default: null

+ +chart.axis.color
+ The color of the axes.
Default: black

+ +chart.xmax
+ This allows you to set the maximum X value that the chart uses, instead of it being auto-generated.
Default: null


+ +chart.scale.decimals
+ This allows you to set the precision of the X labels.
Default: null

+ +chart.scale.point
+ The character used as the decimal point.
Default: .

+ +chart.scale.thousand
+ The character used as the thousand separator
Default: ,

+ +chart.labels
+ An array of the graphs labels (they go in the middle).
Default: null

+ +chart.text.size
+ The size of the text used (in points).
Default: 10

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +

Scale

+ + + + chart.scale.round
+ Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.
+ Default: null

+ +chart.units.pre
+ The units that are applied to the X axis labels (these are pre-pended to the number).
Default: none

+ +chart.units.post
+ The units that are applied to the X axis labels (these are appended to the number).
Default: none

+ +

Interactive features

+chart.tooltips
+ A numerically indexed array of tooltips that are shown when a bar is clicked. These can contain HTML.
Default: An empty array

+ +chart.tooltips.effect
+ The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.contextmenu
+ An array of context menu items. Cannot be used in conjunction with tooltips.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Shadow

+chart.shadow
+ Turns the shadow on or off.
Default: false

+ +chart.shadow.color
+ The color of the shadow.
Default: #666

+ +chart.shadow.offsetx
+ The horizontal offset of the shadow.
Default: 3

+ +chart.shadow.offsety
+ The vertical offset of the shadow.
Default: 3

+ +chart.shadow.blur
+ How severe the blurring effect is for the shadow.
Default: 3

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ + + \ No newline at end of file diff --git a/RGraph/docs/color.html b/RGraph/docs/color.html new file mode 100644 index 0000000..6929859 --- /dev/null +++ b/RGraph/docs/color.html @@ -0,0 +1,274 @@ + + + + + + + RGraph: HTML5 canvas graph library - About canvas color definitions + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - About canvas color definitions

+ + + +

+ You will probably want to know the different ways you can define a color. There are a few + ways which you can use, all of which are quite straight-forward. +

+ + + + +
 
+

Named colors

+ +

+ The first, and easiest, is to use named colors. This gives you a range of color values that have been predefined for you. Eg: +

+ + 
myObject.Set('chart.colors', ['red', 'blue']);
+ + +
 
+

Hex values

+ +

+ The next, is straight forward hex values like you can use in normal CSS. These consist of a hash sign, + followed by three or six hexadecimal characters. Eg: +

+ + 
myObject.Set('chart.colors', ['#f00', '#0000ff']);
+ + +
 
+

RGB values

+ +

+ Also as used in CSS, RGB values are the same as what you can use in CSS. Eg: +

+ + 
myObject.Set('chart.colors', ['rgb(255,0,0)', 'rgb(0,0,255)']);
+ + +
 
+

RGBA values

+ +

+ Probably new to most people, is rgba(). Similar to regular rgb() values, but with a fourth value that allows you to specify the + alpha value, which stipulates how transparent the color is. An alpha value of 0 is totally transparent, and a value of 1, is + totally opaque (ie. you can't see through it). With a value of 1, rgba() acts exactly like rgb(). This example gives you red + and blue colors that are semi-transparent: +

+ + 
myObject.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)']);
+ + +
 
+

HSL() values

+ +

+ Also probably quite new to you, are hsl() values. Much like rgb(), but instead of red green and blue, it allows you to specify + the Hue, Saturation and Light values instead. For example: +

+ + 
myObject.Set('chart.colors', ['hsl(255, 100%, 50%)', 'hsl(169, 100%, 50%)']);
+ + +
 
+

HSLA() values

+ +

+ Much like rgb() and rgba(), hsl() has a corresponding hsla() version, which allows you to specify an alpha (transparency) value. + Eg: +

+ + 
myObject.Set('chart.colors', ['hsla(255, 100%, 50%, 0.5)', 'hsla(169, 100%, 50%, 0.5)']);
+ + +
 
+

Linear gradients

+ +

+ Gradients can be used in place of color values. You can create a linear gradient like so: +

+ + 
myGradient = myObject.context.createLinearGradient(0,0,0,250);
+myGradient.addColorStop(0, 'red');
+myGradient.addColorStop(1, 'blue');
+ +

+ This creates a gradient that goes from red to blue. The gradient starts at 0,0, and finishes at 0,250. ie A vertical + gradient. You may not see the whole gradient - that depends on the extent of the shape you're filling. You can use the gradient + in place of a regular color definition. Eg: +

+ + 
myObject.Set('chart.colors', [myGradient]);
+ + +
 
+

Radial gradients

+ +

+ Radial gradients are much like their linear counterparts, but circular, as the name suggests. Eg: +

+ + 
myGradient = myObject.context.createRadialGradient(0,0,0,0,0,100);
+myGradient.addColorStop(0, 'red');
+myGradient.addColorStop(1, 'blue');
+
+ +

+ Instead of four arguments, it takes six - the coordinates of the start point along with the radius, and the coordinates + of the end point, along with the radius. After it has been created, you can treat as you would a linear gradient: +

+ + 
myObject.Set('chart.colors', [myGradient]);
+ + +
 
+

More information

+ +

+ You can read more about CSS3 color definitions here. +

+ + \ No newline at end of file diff --git a/RGraph/docs/combine.html b/RGraph/docs/combine.html new file mode 100644 index 0000000..4aac7c8 --- /dev/null +++ b/RGraph/docs/combine.html @@ -0,0 +1,481 @@ + + + + + + + RGraph: HTML5 canvas graph library - combining bar and line graphs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Combining charts

+ + + + + + +

Combining bar and line charts

+ + [No canvas support] + + + +

+ This is an example of combining Bar and Line charts. It's quite straight-forward, and the code here shows you how it can be achieved. +

+ +

+ If the values for the line and bar result in different Y scales you may need to specify the chart.ymax property for each graph + so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels. +

+ + Tooltips + +

+ You can have tooltips on the Line chart by setting chart.tooltips.highlighting to false, like below. + The order in which you create the graphs is also important, you must define the Bar chart first, and subsequently the Line + chart. +

+ + 
line.Set('chart.tooltips.highlighting', false);
+ +

+ Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the + Bar chart, in the tooltips. +

+ + +

Combining Line charts

+ + + [No canvas support] + + +

+ Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should + be careful with this chart type as it can easily lead to confusion. +

+ +

+ This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up + this chart is below. +

+ +

+ The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines, + you can do this without combining any charts. See the line chart example page +

+ +
+ + 
+<script>
+    window.onload = function
+    {
+        line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
+        line2.Set('chart.hmargin', 10);
+        line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
+        line2.Set('chart.linewidth', 3);
+        line2.Set('chart.shadow', true);
+        line2.Set('chart.shadow.offsetx', 2);
+        line2.Set('chart.shadow.offsety', 2);
+        line2.Set('chart.ymax', 65);
+        line2.Set('chart.units.post', 'l');
+        line2.Set('chart.gutter', 35);
+        line2.Set('chart.noxaxis', true);
+        line2.Set('chart.noendxtick', true);
+        line2.Set('chart.title', 'An example of axes both sides');
+        line2.Draw();
+
+        line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
+        line3.Set('chart.hmargin', 10);
+        line3.Set('chart.linewidth', 3);
+        line3.Set('chart.shadow', true);
+        line3.Set('chart.shadow.offsetx', 2);
+        line3.Set('chart.shadow.offsety', 2);
+        line3.Set('chart.yaxispos', 'right');
+        line3.Set('chart.noendxtick', true);
+        line3.Set('chart.background.grid', false);
+        line3.Set('chart.ymax', 65);
+        line3.Set('chart.colors', ['blue', 'red']);
+        line3.Set('chart.units.pre', '$');
+        line3.Set('chart.gutter', 35);
+        line3.Set('chart.key', ['Cost', 'Volume']);
+        line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
+        line3.Draw();
+    }
+</script>
+
+ + + + \ No newline at end of file diff --git a/RGraph/docs/context.html b/RGraph/docs/context.html new file mode 100644 index 0000000..1e19e79 --- /dev/null +++ b/RGraph/docs/context.html @@ -0,0 +1,368 @@ + + + + + + + RGraph: HTML5 canvas graph library - Context menus + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Context menus

+ + + + + + + +
 
+

What are context menus?

+ +

+ Context menus are what you see when you click your right mouse button. With RGraph, you can specify custom menus + for your graphs if you wish. This way you can define custom actions to be associated with menu items. Context menus are a + very easy way to extend the functionality of your graphs, allowing you to associate presentation style functionality + with them. +

+ +

+ Important: Opera does not allow you to customise the context menu, so with this browser you + should use the left mouse button on the graph, instead of the right. +

+ + +
 
+

What do they look like?

+ + An RGraph context menu + +

+ Context menus look like the image on the right. You can of course customise their look by using stylesheets. The CSS classes + you need to use are RGraph_contextmenu_background, RGraph_contextmenu and RGraph_contextmenu_item. Eg: +

+ +
+ + 
+<style type="text/css">
+    .RGraph_contextmenu {
+    }
+
+    .RGraph_contextmenu_item {
+    }
+
+    .RGraph_contextmenu_background {
+    }
+</style>
+ +

+ The "! important" is not necessary if you're not overriding a style that is set by the graph script. If you're having trouble, + it's a good idea to use it though. +

+ + +
 
+

Can I have multiple levels of menus?

+ +

+ Yes, as of 24th April 2010 you can have a dual level context menu, which can reduce "option overload" in your user interface. + This example defines a simple context menu: +

+ + 
+bar.Set('chart.contextmenu', [
+                              ['Zoom', RGraph.Zoom],
+                              ['Application', [['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]] ],
+                              null,
+                              ['Cancel', function () {}]
+                             ]);
+
+ +

+ As you can see there could easily get to be a lot of arrays, so it may help you during development to structure your code by using + indentation. +

+ + +
 
+

How do I define context menus?

+ +

+ Defining a context menu is quite a simple affair. Eg: +

+ + 
+myBar.Set('chart.contextmenu', [
+                                ['Menu item 1', Callback1],
+                                ['Menu item 2', Callback2]
+                               ]);
+ +

+ As you can see, the value is a two dimension array. The second being an array consisting of a string which is used as the name of the + menu item, and a function object (NOT the function name as a string). The function object is the function called when the menu item is selected. +

+ + +
 
+

Can I have "separators"?

+ +

+ Yes. Simply pass null instead of an array as your menu item. Eg: +

+ + 
+myBar.Set('chart.contextmenu', [
+                                ['Menu item 1', Callback1],
+                                null,
+                                ['Menu item 2', Callback2]
+                               ]);
+ + +
 
+

How do I bypass them?

+ +

+ If for any reason you wish to access the browsers own context menu, you can hold down your CTRL key on your keyboard when you + click, and the canvas context menu will be bypassed. Try it on the graph below by holding your CTRL key whilst right clicking. +

+ + +
 
+

What can I use them for?

+ +

+ Since the context menu items run Javascript functions when selected, you can use them for pretty much + anything you want. For example you could make a presentation system, with the context menu controlling which + graph is shown on the canvas. For example: +

+ +
+ [No canvas support] +
+ + +

Is there an example file that uses the CSS classes?

+ +

+ You can take a look at the bottom of the CSS file for this website. +

+ + +
 
+

Context menus, Macs, Safari, Opera and MSIE 9

+ +

+ Mac Safari, Mac Firefox, Windows Safari and MSIE 9 (beta 1) can have trouble displaying the context menu. So for this reason, for these browsers, + the context menu is attached to a double click of the left mouse button. Opera doesn't support customising the context menu so + this browser also uses a left mouse button double click to trigger the context menu. +

+ + + + + \ No newline at end of file diff --git a/RGraph/docs/css.html b/RGraph/docs/css.html new file mode 100644 index 0000000..4bedc4f --- /dev/null +++ b/RGraph/docs/css.html @@ -0,0 +1,326 @@ + + + + + + + RGraph: HTML5 canvas graph library - available CSS classes + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Available CSS classes

+ + + +

+ This is information about the CSS classes available to you to allow you to customise the appearance of tooltips and + context menus. +

+ + + + +
 
+

RGraph_png

+

+ This controls the appearance of the PNG image which is shown when you use the context menu option RGraph.showPNG(). +

+ + +
 
+

RGraph_palette

+

+ This controls the appearance of the mini-palette that can be used with annotating. +

+ + +
 
+

RGraph_tooltip

+

+ This controls the appearance of tooltips. The default is to have them look like Windows tooltips. +

+ + +
 
+

RGraph_contextmenu

+

+ This controls how context menus appear. The default is similar to the look that Windows XP has. +

+ + +
 
+

RGraph_contextmenu_item

+

+ This controls how individual items on the context menu will appear, for example the default has roughly 25px padding-left + to accomodate the left bar. +

+ + +
 
+

RGraph_contextmenu_background

+

+ This is the Windows XP style left vertical bar. By default this is light grey. +

+ + +
 
+

RGraph_zoom_window

+

+ This is the class to use if you want to customise the mini-zoom window. +

+ + +
 
+

RGraph_zoomed_canvas

+

+ This is the class to use if you want to customise the full canvas zoom. +

+ + +
 
+

RGraph_zoomed_area

+

+ This is the class to use if you want to customise the zoomed area. +

+ + +
 
+

ModalDialog_background

+

+ This class controls the dark semi-opaque background for the ModalDialog. +

+ + +
 
+

ModalDialog_dialog

+

+ This class controls the ModalDialog itself. +

+ + +
 
+

ModalDialog_topbar

+

+ This class controls the top bar for the ModalDialog. You could, for example, use the display CSS property to + hide this if you don't want it. +

+ + +
 
+

Example usage

+

+ Here is an example of using the CSS classes. At the time of writing, some of the items here were only implemented in newer + web browsers: +

+ + 
+<style>
+    .RGraph_png {
+    }
+
+    .RGraph_palette {
+    }
+
+    .RGraph_tooltip {
+    }
+    
+    .RGraph_contextmenu {
+    }
+    
+    .RGraph_contextmenu_background {
+    }
+    
+    .RGraph_contextmenu_item {
+    }
+    
+    .RGraph_zoom_window {
+    }
+    
+    .RGraph_zoomed_canvas {
+    }
+    
+    .RGraph_zoomed_area {
+    }
+    
+    .ModalDialog_background {
+    }
+    
+    .ModalDialog_dialog {
+    }
+    
+    .ModalDialog_topbar {
+    }
+</style>
+
+ + +
 
+

! important

+ +

+ If you're attempting to override default styles, then because of the ordering (ie the script is setting the style AFTER + your own CSS) you may need to use the "! important" modifier, for example: +

+ + 
+<style>
+    .RGraph_tooltip {
+        background-color: white ! important;
+    }
+</style>
+
+ + \ No newline at end of file diff --git a/RGraph/docs/domcontentloaded.html b/RGraph/docs/domcontentloaded.html new file mode 100644 index 0000000..bce4c83 --- /dev/null +++ b/RGraph/docs/domcontentloaded.html @@ -0,0 +1,252 @@ + + + + + + + RGraph: HTML5 canvas graph library - DOMContentLoaded event + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - DOMContentLoaded example

+ + + +

Waiting for onload event...

+ + + + +

+ + + + + These images are here to pad the page and slow down loading so that the window.onload event is slowed. This makes the + difference far more visible. +

+ + [No canvas support] + +

+ The DOMContentLoaded event is an extremely useful event and can make a big impact on the performance of your pages, hence this + example. The DOMContentLoaded event fires when the pages HTML and scripts have loaded, but not necessarily any images or CSS. + This can make a big improvement on the apparent speed of your page(s). +

+ +

+ You can read more about the DOMContentLoaded event on the Mozilla site, here, + and the Microsoft site here. +

+ +
+ + 
+function createGraph(func)
+{
+    if(window.addEventListener) {
+        window.addEventListener('DOMContentLoaded', func, false);
+    } else {
+        document.attachEvent("onDOMContentLoaded", func);
+    }
+}
+
+ +

Browser support

+ +

+ The DOMContentLoaded event is supported by the following browsers: +

+ + + +

See also

+ + You might also be interested in asynchronous graph creation as an alternative. + + + \ No newline at end of file diff --git a/RGraph/docs/donut.html b/RGraph/docs/donut.html new file mode 100644 index 0000000..a7b8c9f --- /dev/null +++ b/RGraph/docs/donut.html @@ -0,0 +1,168 @@ + + + + + + + RGraph: HTML5 canvas graph library - donut chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Donut chart documentation

+ + +

+ The Donut chart was formerly a separate chart, however it's now simply a variant of the Pie chart. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var data = [45,57,48,32];
+    
+        var donut = new RGraph.Pie('myDonut', data);
+        donut.Set('chart.labels', ['Jan', 'Ben', 'Mark', 'Lucy']);
+        donut.Set('chart.linewidth', 5);
+        donut.Set('chart.strokestyle', 'white');
+        donut.Set('chart.tooltips', ['Jan', 'Ben', 'Mark', 'Lucy']);
+        donut.Set('chart.variant', 'donut');
+        donut.Draw();
+    }
+</script>
+
+ + + + + \ No newline at end of file diff --git a/RGraph/docs/downloads b/RGraph/docs/downloads new file mode 100644 index 0000000..2b4a17c --- /dev/null +++ b/RGraph/docs/downloads @@ -0,0 +1,2 @@ + + + + + + + RGraph: HTML5 canvas graph library - Retrieving a PNG of your graph + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Updating your graphs dynamically

+ + + + [No canvas support] + + +

+ The example on the right shows a line chart that automatically updates itself every 250 milliseconds. An ideal + use for this could be showing a networks bandwidth usage, or a servers load value. +

+ +

+ This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a + non-filled chart might be a better choice. +

+ +

+ To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server, + or use AJAX if you want the data stored client-side. +

+ +

+ Be careful of the data types you use to pass the data to RGraph - you should use numbers to represent values, not strings. +

+ +
+ + 
+<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
+
+<script>
+    d1 = [];
+    d2 = [];
+    
+    // Pre-pad the arrays with 100 null values
+    for (var i=0; i< 100; ++i) {
+        d1.push(null);
+        d2.push(null);
+    }
+
+    function getGraph(id, d1, d2)
+    {
+        var graph = new RGraph.Line(id, d1, d2);
+        graph.Set('chart.gutter', 25);
+        graph.Set('chart.background.barcolor1', 'white');
+        graph.Set('chart.background.barcolor2', 'white');
+        graph.Set('chart.title.xaxis', 'Time');
+        graph.Set('chart.filled', true);
+        graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);
+        graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
+        graph.Set('chart.linewidth', 3);
+        graph.Set('chart.ymax', 20);
+        graph.Set('chart.xticks', 25);
+
+        return graph;
+    }
+    
+    function drawGraph (e)
+    {
+        // Clear the canvas and redraw the graph
+        RGraph.Clear(document.getElementById("cvs"));
+        var graph = getGraph('cvs', d1, d2);
+        graph.Draw();
+        
+        // Add some data to the data arrays
+        d1.push(RGraph.random(5, 10));
+        d2.push(RGraph.random(5, 10));
+        
+        // Get rid of the first values of the arrays
+        if (d1.length > 100) {
+            d1 = RGraph.array_shift(d1);
+            d2 = RGraph.array_shift(d2);
+        }
+
+        setTimeout(drawGraph,250);
+    }
+    
+    drawGraph();
+</script>
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/events.html b/RGraph/docs/events.html new file mode 100644 index 0000000..3a91a1e --- /dev/null +++ b/RGraph/docs/events.html @@ -0,0 +1,303 @@ + + + + + + + RGraph: HTML5 canvas graph library - Custom RGraph events + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Custom RGraph events

+ + + + + + +

Introduction

+ +

+ Custom events allow you to easily interact with and extend RGraph for your own purposes. The list of available events is below, + as is an example of how to make use of them with the RGraph.AddCustomEventListener() function. Event handler functions (ie your + functions) are passed a single parameter - the graph object. With this you can get references to the canvas and context. There's + an example of this below. +

+ +
<script>
+    window.onload = function ()
+    {
+        var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56]);
+        line.Set('chart.tooltips', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
+        line.Set('chart.labels', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
+        line.Set('chart.hmargin', 5);
+        line.Set('chart.tickmarks', 'dot');
+        line.Draw();
+
+        /**
+        * This is the call to the RGraph function that registers the event listener
+        * 
+        *      line: The graph object
+        * ontooltip: The name of the event
+        *    myFunc: The function that handles the event
+        */
+        RGraph.AddCustomEventListener(line, 'ontooltip', myFunc);
+    }
+
+    /**
+    * The function that is called when the ontooltip event fires. It is  passed a single parameter - the graph object.
+    * With this you can get the ID and references to the canvas and context:
+    *  o obj.id
+    *  o obj.canvas
+    *  o obj.context
+    */
+    function myFunc(obj)
+    {
+        var id      = obj.id;
+        var canvas  = obj.canvas;
+        var context = obj.context;
+
+        alert('This alert was triggered by the custom ontooltip event');
+    }
+</script>
+
+ + +

Available events

+ +

+ + ontooltip
+ This event fires immediately after a tooltip has been created. This event allows you to easily show graphs in your tooltips (tooltip + effects that involve moving the tooltip, eg. contract, expand & snap, will not function). You + can find the tooltip object in the RGraph registry - RGraph.Registry.Get('chart.tooltip'). Note that if you're testing and + using a function that pauses execution (eg alert()), this will also pause any timers (for animation effects etc). If you want to + avoid this you should use a function that doesn't block execution, eg the Firebug/WebKit function, console.log() (you can use the + cl() shortcut in RGraph). +

+ +

+ + oncontextmenu
+ This event fires immediately after the RGraph context menu is shown. If you want it, you can get at the context menu in the + RGraph registry: RGraph.Registry.Get('chart.contextmenu') Like the ontooltip event, using alert() can + pause the fade in timers, so you should consider using the Firebug/Webkit console.log functions instead. +

+ +

+ + onbeforedraw
+ Much like the ondraw event, however this fires at the start of the .Draw() method, in effect "before" the method. +

+ +

+ + ondraw
+ The ondraw event fires after the .Draw() method has run. Note that the interactive features of RGraph may call the .Draw() + method multiple times - the zoom in area mode is a prime example. + A graph with tooltips is also an example. In this case it would demonstrate that the .Draw() method is called twice (and + hence the ondraw event), whereas the ontooltip event only fires once. + +

+ + Note: The ondraw event is not only fired by its own graph, + but (if you're using tooltips for example), can also be fired by other graphs on the page. +

+ +

+ + onzoom
+ The onzoom event fires whenever the canvas is zoomed. When the zoom is in area and canvas modes this fires once, + but when in thumbnail mode this event is like the onmousemove event in that it fires whenever the mouse is moved. +

+ +

+ + onmodaldialog
+ The onmodaldialog event fires when the ModalDialog is shown. This event is easily replicated yourself, though using this event + may help you to keep your code tidy. This event is utilised slightly differently to the other events: + + 

ModalDialog.AddCustomEventListener('onmodaldialog', function () {alert('Hello world!');});
+

+ +

+ + onresize
+ The onresize event fires when a canvas is resized. It also fires when the canvas is reset to the original size. +

+ +

+ + onadjust
+ The onadjust event fires whenever one of the supported graph types is adjusted. It usually fires in conjunction with the + onmousemove event, and can be blocked by alert(). You therefore may need to use a different function (eg console.log()) + whilst debugging. +

+ +

+ + onannotatestart
+ The onannotatestart event fires at the beginning of the annotating procedure (ie in a similar vein to the onmousedown event). +

+ +

+ + onannotate
+ The onannotate event fires when the graph has been annotated. It fires during the annotate procedure. +

+ +

+ + onannotateend
+ The onannotateend event fires at the end of the annotating procedure (ie in a similar vein to the onmouseup event). +

+ + \ No newline at end of file diff --git a/RGraph/docs/external.html b/RGraph/docs/external.html new file mode 100644 index 0000000..a8b7ca3 --- /dev/null +++ b/RGraph/docs/external.html @@ -0,0 +1,370 @@ + + + + + + + RGraph: HTML5 canvas graph library - Integrating RGraph with external libraries + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Integrating RGraph with external libraries

+ + + + + + [No canvas support] + +

+ This page shows you how you can easily integrate the graphs with other external Javascript libraries. This particular example + attaches a context menu to the graph, of which the only option is to show a login dialog. This could, for example, be used to + allow logging in to an admin area. +

+ +

+ The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a + subsequent page loads that takes a few seconds. +

+ +

+ The ModalDialog was originally an external library, however it's now part of the RGraph package. It's also covered by the + RGraph license - so if you have an RGraph license, then the ModalDialog is part of that. +

+ +

+ + 
+<script src="RGraph.common.core.js">
+<script src="RGraph.common.context.js">
+<script src="RGraph.line.js">
+<script src="RGraph.modaldialog.js">
+
+<script>
+    window.onload = function ()
+    {
+        /**
+        * Draw the line graph
+        */
+        var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
+        line.Set('chart.background.barcolor1', 'white');
+        line.Set('chart.background.barcolor2', 'white');
+        line.Set('chart.tickmarks', null);
+        line.Set('chart.hmargin', 10);
+        line.Set('chart.linewidth', 3);
+        line.Set('chart.shadow', true);
+        line.Set('chart.shadow.offset', 2);
+        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        line.Set('chart.title', 'A line graph with context menu');
+        
+        // This defines a context menu which calls the given function. This function in turn shows the dialog
+        line.Set('chart.contextmenu', [['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);}}]]);
+        
+        line.Draw();
+    }
+</script>
+ +

+ 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 + "css" directory. +

+ + +

Note about Microsoft Internet Explorer 8 and the ModalDialog

+ +

+ Microsoft Internet Explorer 8 only supports fixed positioning in strict rendering mode, therefore you must specify a DTD + when using this browser. Eg: +

+ + 
+<!DOCTYPE html >
+
+ + +

Hiding the ModalDialog

+

+ To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method: +

+ + 
+<input type="reset" value="Cancel" onclick="ModalDialog.Close()">
+
+ + +

Customising the ModalDialog

+

+ You can customise the appearance of the ModalDialog by using three CSS classes, which are documented here. + This page customises the dialog slightly by changing the shadow X/Y offsets: +

+ + 
+<style>
+    /*
+    * These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
+    * override something which the scripts set, then because of the ordering you may need to use the "! important"
+    * modifier.
+    */
+    
+    /**
+    * This is the semi-opaque background
+    */
+    .ModalDialog_background {
+    }
+
+
+    /**
+    * This is the dialog itself
+    */
+    .ModalDialog_dialog {
+        -webkit-box-shadow: gray 0 0 15px ! important;
+        -moz-box-shadow: 0 0 15px gray ! important;
+        box-shadow: 0 0 15px gray ! important;
+    }
+
+
+    /**
+    * This is gray bar at the top of the dialog
+    */
+    .ModalDialog_topbar {
+    }
+</style>
+
+ + +

ModalDialog integration

+

+ 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 ModalDialog.Show(id, width). + The id is the id of the layer to use. Only the .innerHTML is used, not the layer itself, so it can be hidden by + setting the display CSS display property to none. The width is a number which is used as the width of the dialog. +

+ +

+ The only library needed for the ModalDialog to work is RGraph.modaldialog.js - you do not need to use + RGraph.common.js. This makes for far smaller download requirements. + +

+ + + + + + + + + \ No newline at end of file diff --git a/RGraph/docs/funnel.html b/RGraph/docs/funnel.html new file mode 100644 index 0000000..9591adb --- /dev/null +++ b/RGraph/docs/funnel.html @@ -0,0 +1,382 @@ + + + + + + + RGraph: HTML5 canvas graph library - funnel chart documentation + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Funnel chart documentation

+ + +

+ This is a funnel chart. It can be used to illustrate stages of a sales or order fulfillment process, and in doing so highlight any bottlenecks + or steps where large amounts of customers are lost. +

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var funnel = new RGraph.Funnel('funnel1', [100,45,45,26,21,5]);
+        funnel.Set('chart.text.boxed', false);
+        funnel.Set('chart.title', 'Leads through to sales');
+        funnel.Set('chart.labels', ['A', 'B', 'C', 'D', 'E', 'F']);
+        funnel.Set('chart.shadow', true);
+        funnel.Draw();
+    }
+</script>
+
+ + +

Properties

+ +

+ You can use these properties to control how the Funnel chart appears. You can set them by using the Set() method. Eg: +

+ +

+ myFunnel.Set('name', 'value'); +

+ + + + +

Margins

+chart.gutter
+ The gutter of the chart. This is the whitespace area around the chart.
Default: 25

+ +

Colors

+chart.colors
+ These are the colors used for each segment.
Default: ['red', 'green', 'gray', 'blue', 'black', 'white']

+ +

Labels and text

+chart.labels
+ An array of the labels to be used on the graph.
Default: An empty array

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size (in points) of the labels.
Default: 10

+ +chart.text.boxed
+ Whether the text is contained within a white bounding box. In some cases this can help readability.
Default: true

+ +chart.text.halign
+ The horizontal alignment of the text. Can be center or left.
Default: left

+ +

Titles

+chart.title
+ The title of the graph, if any.
Default: null

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.color
+ The color of the title.
Default: black

+ +

Shadow

+chart.shadow
+ Whether a drop shadow is applied to the Funnel chart. The funnel is the first to use the canvas shadow API, and as such they won't be supported on all browsers. Currently only Safari 4+ (possibly earlier versions too), Firefox 3.5+ and Chrome 2+ support canvas shadows.
Default: false

+ +chart.shadow.color
+ The color of the drop shadow.
Default: #666

+ +chart.shadow.blur
+ The severity of the shadow blurring effect.
Default: 3

+ +chart.shadow.offsetx
+ The X offset of the shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset of the shadow.
Default: 3

+ +

Interactive features

+chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.tooltips
+ An array of tooltips for the Funnel chart segments.
Default: null

+ +chart.tooltips.effect
+ The animated effect that tooltips use - fade or expand
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + + +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ + \ No newline at end of file diff --git a/RGraph/docs/gantt.html b/RGraph/docs/gantt.html new file mode 100644 index 0000000..9f3f376 --- /dev/null +++ b/RGraph/docs/gantt.html @@ -0,0 +1,455 @@ + + + + + + + RGraph: HTML5 canvas graph library - gantt chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Gantt chart documentation

+ + + +

+ The Gantt chart can be used to easily represent schedules, making visualising this information far more straightfoward. +

+ + + +

Example

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var gantt = new RGraph.Gantt('gantt');
+        gantt.Set('chart.xmax', 365);
+        gantt.Set('chart.gutter', 35);
+        gantt.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        gantt.Set('chart.title', 'Holiday schedule for Xyz Ltd');
+        gantt.Set('chart.defaultcolor', 'rgba(255,0,0,1)');
+        gantt.Set('chart.tooltips', ["<b>Richard</b><br />Richard is going on holiday to Malta.<br />He'll be away for 28 days.",
+                                     "<b>Fred</b><br />Fred is also going away for 28 days",
+                                     "<b>Barney</b><br />Barney is off work for two weeks",
+                                     "<b>Gloria</b><br />Gloria is off for 3 weeks",
+                                     "<b>Paul</b><br /> Away for 31 days",
+                                     "<b>Harry</b><br />Away for three weeks",
+                                     "<b>Shane</b><br />Away for one week",
+                                     "<b>Barry</b><br />Away for two weeks",
+                                     "<b>Cynthia</b><br />Away for two weeks",
+                                     "<b>Graham</b><br />Away for August and September",
+                                     "<b>Paul</b><br />Away for 31 days"]);
+        gantt.Set('chart.events'[
+                                 [31, 28, null, 'Richard'],
+                                 [31, 28, null, 'Fred'],
+                                 [59, 14, null, 'Barney'],
+                                 [59, 21, null, 'Gloria'],
+                                 [59, 31, null, 'Paul'],
+                                 [80, 21, null, 'Harry'],
+                                 [94, 7, null, 'Shane'],
+                                 [120, 14, null, 'Barry'],
+                                 [130, 14, null, 'Cynthia'],
+                                 [211, 61, null, 'Graham'],
+                                 [334, 31, null, 'Paul'],
+                                ]);
+        gantt.Set('chart.vbars', [
+                                  [0, 31, 'rgba(192,255,192,0.5)'],
+                                  [59, 31, 'rgba(192,255,192,0.5)'],
+                                  [120, 31, 'rgba(192,255,192,0.5)'],
+                                  [181, 31, 'rgba(192,255,192,0.5)'],
+                                  [243, 30, 'rgba(192,255,192,0.5)'],
+                                  [304, 30, 'rgba(192,255,192,0.5)'],
+                                 ]);
+    
+        gantt.Draw();
+    }
+</script>
+
+ +

Properties

+ +

+ You can use these properties to control how the bar graph apears. +

+ + + + + + +

Chart configuration

+ + chart.xmax
+ Required. This determines how many "units" wide the Gantt chart is. For example to represent a year, you would use 365, giving + a granularity of one day.
+ Default: none

+ + + chart.xmin
+ This option can sometimes make using a Gantt chart spread over several pages easier.
+ Default: 0

+ + + +

Background

+chart.background.barcolor1
+ Color of the background bars
Default: white

+ +chart.background.barcolor2
+ Color of the background bars
Default: white

+ +chart.background.grid
+ Whether a grid is shown as part of the background
Default: true

+ +chart.background.grid.color
+ The color of the background grid.
Default: #eee

+ +chart.background.grid.hsize
+ The size of the horizontal grid.
Default: 20

+ +chart.background.grid.vsize
+ The size of the vertical grid.
Default: 20

+ +chart.background.grid.width
+ The line width of the background grid.
Default: 1

+ +chart.background.grid.autofit
+ Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.
Default: false

+ +chart.background.grid.autofit.numhlines
+ When using autofit this allows you to specify how many horizontal grid lines you want.
Default: 7

+ +chart.background.grid.autofit.numvlines
+ When using autofit this allows you to specify how many vertical grid lines you want.
Default: 20

+ +

Margins

+chart.gutter
+ How big the gutter is. This is the top, bottom and right gutters. The left gutter is three times the gutter wide, to accomodate the labels.
Default: 25

+ +

Labels and text

+chart.text.size
+ The size of the text (in points).
Default: 10

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.labels
+ An array of the labels which are applied to the chart.
Default: [] (An empty array)

+ +

Titles

+chart.title
+ The title of the chart.
Default: not set

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +

Interactive features

+chart.tooltips
+ An array of tooltips that are shown when the bars are clicked. They can contain HTML.
Default: [] (An empty array)

+ +chart.tooltips.effect
+ The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.contextmenu
+ An array of context menu items. Cannot be used in conjunction with tooltips.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ +

Miscellaneous

+chart.borders
+ Whether a border is shown on the event bars
Default: true

+ +chart.defaultcolor
+ The default color of bars. If you don't specify a color for the event, this will be used.
Default: white

+ +chart.events
+ An array of event information that is displayed on the gantt. See below for further information.
Default: [] (An empty array)

+ +chart.vbars
+ Vertical bars used for decorative purposes, or for marking something on the chart (an event for example). See below for further information.
Default: [] (An empty array)

+

+ + +

Adding events to your Gantt chart

+ +

+ To add events, you specify them using the chart.events property. You could use the following to set some events on your gantt chart: +

+ + 
gantt.Set('chart.events', [
+                       [31, 28, 75, 'Richard'],
+                       [12, 28, 67, 'Fred'],
+                       [59, 14, 0, 'Barney'],
+                       [59, 21, 5, 'Gloria'],
+                       [46, 31, 94, 'Paul'],
+                       [80, 21, 46, 'Harry'],
+                       [94, 17, 84, 'Shane'],
+                       [34, 14, 32, 'Barry'],
+                       [64, 14, 28, 'Cynthia', 'red', 'yellow'],
+                       [13, 61, 74, 'Graham'],
+                       [84, 31, 16, 'Paul']
+                      ]);
+
+ +

+ The first value is the (zero indexed) start number relative to your chart.xmax. So if you have set your chart.xmax to 62, (to represent + two months), and this value is 31, the start will be the start of the second month. In this case you could give two labels - + ['July', 'August']. +

+ +

+ The second value is the duration. So using the previous example, if you set this to 7, you would have an event lasting a week. +

+ +

+ The third value is the "percentage complete" indicator. This is shown to the right of the event, and is optional - you can + specify null if you wish. +

+ +

+ The fourth value is the label that is used on the left hand side. +

+ +

+ The optional fifth value stipulates the background colour that the bar is. Default is white. +

+ +

+ And the last optional 6th value is the foreground color of the bar. Defaulting to #0c0. +

+ + +

Adding vertical bars to your Gantt chart

+ +

+ You can add decorative vertical bars like so: +

+ + 
gantt.Set('chart.vbars', [
+                    [0, 31, 'rgba(192,255,192,0.5)'],
+                    [59, 31, 'rgba(192,255,192,0.5)'],
+                    [120, 31, 'rgba(192,255,192,0.5)'],
+                    [181, 31, 'rgba(192,255,192,0.5)'],
+                    [243, 30, 'rgba(192,255,192,0.5)'],
+                    [304, 30, 'rgba(192,255,192,0.5)'],
+                   ]);
+
+ +

+ You can use these for decorative purposes, or to mark events/limits. The first value is the start index, as above. + The second value is the unit length, again as above. The third value is the color of the vertical bar. +

+ + + \ No newline at end of file diff --git a/RGraph/docs/hbar.html b/RGraph/docs/hbar.html new file mode 100644 index 0000000..cd30f97 --- /dev/null +++ b/RGraph/docs/hbar.html @@ -0,0 +1,489 @@ + + + + + + + RGraph: HTML5 canvas graph library - horizontal bar chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Horizontal bar chart documentation

+ + + +

+ The horizontal bar graph is a variation on the bar chart which can be useful when you have larger labels, since you have + more space available to you for them. +

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var data = [280,45,133,166,84,259,266,960,219,311];
+    
+        var hbar = new RGraph.HBar('myCanvas', data);
+        hbar.Set('chart.labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']);
+        hbar.Set('chart.gutter', 45);
+        hbar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
+        hbar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
+        hbar.Set('chart.background.grid', true);
+        hbar.Set('chart.colors', ['rgba(255,0,0,1)']);
+        hbar.Draw();
+    }
+</script>
+
+ +

Properties

+ +

+ You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg: +

+ +

+ myHBar.Set('name', 'value'); +

+ + + + + +

Margins

+chart.gutter
+ The gutter of the graph. This is the area outside of the X and Y axis - where the labels go. If you're short on space for your labels, try increasing this.
Default: 25

+ +

Colors

+chart.colors
+ An array of the colors of the actual bars.
Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']

+ +

Background

+chart.background.barcolor1
+ The color of the background bars, (1 of 2).
Default: white

+ +chart.background.barcolor2
+ The color of the background bars, (2 of 2).
Default: white

+ +chart.background.grid
+ Whether to show the background grid or not.
Default: true

+ +chart.background.grid.color
+ The color of the background grid.
Default: #ddd

+ +chart.background.grid.hsize
+ The horizontal background grid size.
Default: 40

+ +chart.background.grid.vsize
+ The vertical background grid size.
Default: 18

+ +chart.background.grid.width
+ The width that the background grid lines are. Decimals (eg 0.5) are permitted.
Default: 0.5

+ +chart.background.grid.border
+ Determines whether a border line is drawn around the grid.
Default: true

+ +chart.background.grid.hlines
+ Determines whether to draw the horizontal grid lines.
Default: true

+ +chart.background.grid.vlines
+ Determines whether to draw the vertical grid lines.
Default: true

+ +chart.background.grid.autofit
+ Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.
Default: false

+ +chart.background.grid.autofit.numhlines
+ When using autofit this allows you to specify how many horizontal grid lines you want.
Default: 14

+ +chart.background.grid.autofit.numvlines
+ When using autofit this allows you to specify how many vertical grid lines you want.
Default: 20

+ +

Labels and text

+chart.labels
+ An array of the labels to be used on the graph.
Default: An empty array

+ + + chart.labels.above
+ This is a boolean which if true, will cause labels to be shown to the right of the bars. (It's called "above" + for API compatibility).
+ Default: false

+ + + chart.labels.above.decimals
+ This is a number which controls how many decimals are shown. It defaults to 0, and since it was added (4th December 2010) + you may need to set this, otherwise no decimals will be shown.
+ Default: 0

+ + +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size (in points) of the labels.
Default: 10

+ +

Titles

+chart.title
+ The title of the graph, if any.
Default: null

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.xaxis
+ This allows to specify a title for the X axis.
Default: none

+ +chart.title.yaxis
+ This allows to specify a title for the Y axis.
Default: none

+ +chart.title.xaxis.pos
+ This is multiplied with the gutter to give the position of the X axis title.
Default: 0.25

+ +chart.title.yaxis.pos
+ This is multiplied with the gutter to give the position of the Y axis title.
Default: 0.5

+ +chart.title.color
+ The color of the title.
Default: black

+ +

Scale and axes

+chart.scale.point
+ The character used as the decimal point.
Default: .

+ +chart.scale.thousand
+ The character used as the thousand separator
Default: ,

+ + + chart.scale.round
+ Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.
+ Default: null

+ + +chart.xmax
+ (Optional) An optional max figure for the X scale.
Default: none (one is calculated)

+ +chart.yaxispos
+ The position of the Y axis. Works with regular and grouped charts. Can be either center or left.
Default: left

+ +chart.axis.color
+ The color of the axes.
Default: black

+ +chart.units.pre
+ The units that the X axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".
Default: none

+ +chart.units.post
+ The units that the X axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".
Default: none

+ +chart.units.ingraph
+ If your units are long, setting this stipulates them to be used for ingraph labels only.
Default: false

+ +

Miscellaneous

+chart.grouping
+ How the bars are grouped, and it should be one of: grouped or stacked
Default: grouped

+ +chart.vmargin
+ The vertical margin that is applied to each individual bar.
Default: 3

+ +chart.strokestyle
+ The color of the outlines of the bars.
Default: black

+ +

Shadow

+chart.shadow
+ Whether a small drop shadow is applied.
Default: false

+ +chart.shadow.color
+ The color of the shadow.
Default: #666

+ +chart.shadow.offsetx
+ The X offset of the shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset of the shadow.
Default: 3

+ +chart.shadow.blur
+ The severity of the shadow blurring effect.
Default: 3

+ + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + +

Interactive features

+chart.contextmenu
+ An array of context menu items. You cannot have context menus AND tooltips, only one or the other. More information on context menus is here.
Default: [] (An empty array)

+ +chart.tooltips
+ An array of tooltips for the chart.
Default: An empty array

+ +chart.tooltips.effect
+ The visual effect used when showing tooltips. Can be either fade or expand.
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ + + \ No newline at end of file diff --git a/RGraph/docs/hprogress.html b/RGraph/docs/hprogress.html new file mode 100644 index 0000000..a5a2e4d --- /dev/null +++ b/RGraph/docs/hprogress.html @@ -0,0 +1,327 @@ + + + + + + + RGraph: HTML5 canvas graph library - horizontal progress bar documentation + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Horizontal Progress bar documentation

+ + + +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var myProgress = new RGraph.HProgess('myProgress', 78, 100);    
+        myProgress.Set('chart.colors', ['red']);
+        myProgress.Draw();
+    }
+</script>
+
+ +

Properties

+ +

+ You can use these properties to control how the progress bar apears. You can set them by using the Set() method. Eg: +

+ +

+ myProgress.Set('name', 'value'); +

+ + + + + +

Chart configuration

+chart.tickmarks
+ Whether the tickmarks are drawn.
Default: true

+ +chart.tickmarks.color
+ The color used for tickmarks.
Default: black

+ +chart.tickmarks.inner
+ This controls whether the bar has inner tickmarks
Default: false

+ +chart.value
+ The indicated value. You don't need to set this because it's one of the arguments to the constructor.

+ +chart.max
+ The maximum value. You don't need to set this because it's one of the arguments to the constructor.

+ +chart.numticks
+ How many tick marks there are.
Default: 10

+ +chart.numticks.inner
+ How many inner tick marks there are.
Default: 50

+ +chart.arrows
+ This stipulates that two indicator arrows are drawn. It works best if you have tickmarks off, and no title.
Default: false

+ +

Margins

+chart.gutter
+ The size of the gutter.
Default: 25

+ +

Colors

+chart.colors
+ The colors of the bar(s). This can be a solid color, or a gradient that you create.
Default: [#0c0]

+ +chart.background.color
+ The background color.
Default: #eee

+ +

Shadow

+chart.shadow
+ Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).
Default: false

+ +chart.shadow.offsetx
+ The X offset of the progress bar shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset of the progress bar shadow.
Default: 3

+ +chart.shadow.color
+ The color of the shadow.
Default: rgba(0,0,0,0.5)

+ +chart.shadow.blur
+ The blurring effect that is applied to the shadow.
Default: 3

+ +

Labels and text

+chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size of the text (in points).
Default: 10

+ +chart.labels
+ Labels that are applied to the graph.
Default: An empty array

+ +

Scale

+chart.units.pre
+ The units that the Y scale is measured in (these are preppend to the number).
Default: none

+ +chart.units.post
+ The units that the Y scale is measured in (these are appended to the number).
Default: none

+ +

Titles

+chart.title
+ The title of the progress bar.
Default: An empty string

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.color
+ The color of the title.
Default: black

+ +

Interactive features

+chart.tooltips
+ An array, albeit one element only. This is shown when the progress bar is clicked on. This can contain HTML.
Default: An empty array

+ +chart.tooltips.effect
+ The animated effect used for showing the tooltip. Can be either fade or expand.
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +chart.adjustable
+ Defaulting to false, this determines whether your progress bar will be adjustable (click the bar and drag it).
Default: false

+ +

Zoom

+chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ + + \ No newline at end of file diff --git a/RGraph/docs/index.html b/RGraph/docs/index.html new file mode 100644 index 0000000..5a368ed --- /dev/null +++ b/RGraph/docs/index.html @@ -0,0 +1,920 @@ + + + + + + + RGraph: HTML5 canvas graph library - documentation + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Documentation

+ + + +

+ The following documentation is available: +

+ +
+

Chart types

+ +
+ +
+

Features

+ +
+ +
+

Miscellaneous

+ + +

On this page:

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

Benefits of HTML5 canvas graphs

+ +

+ HTML5 introduces a new HTML element - the CANVAS tag. This tag allows for two dimensional drawing easily using Javascript. + This makes it perfect for producing graphs. Because Javascript runs on your users computer, none of the stress on your server + normally associated with producing graphs 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, (ie it can save you + money...). +

+ +

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

+ +

+ And if that wasn't enough, because the graphs 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 + graph(s) as your website. +

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

Browser support

+ +

+ Since the graphs are produced using HTML5 features (the new canvas tag), client support is currently: +

+ + + +

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

+ +

+ Canvas & Microsoft Internet Explorer (MSIE)
+ Microsoft Internet Explorer 8 doesn't natively support the HTML5 <canvas> tag. To support + MSIE 8 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 with preview 3 Microsoft Internet Explorer 9 has full support for <canvas>. You can view some screenshots + here. + 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. +

+ + +
 
 
+

Improving the performance of your graphs

+ +

+ Although performance is excellent, (traditionally your webserver has been + producing all of your graphs, and now the client produces them, and typically only one at a time), you may still want to tune + RGraph further. The biggest thing you can do is use 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 graphs on the front page or will + have a login page that is shown before any graphs, this effectively eliminates the graph 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. +

+ +

+ +

+ + +
 
 
+

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.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 graphs -->
+<script src="RGraph.bipolar.js"></script>          <!-- Just needed for bi-polar graphs -->
+<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.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 graphs -->
+<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.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 graphs -->
+<script src="RGraph.tradar.js"></script>           <!-- Just needed for traditional radar charts -->
+<script src="RGraph.vprogress.js"></script>        <!-- Just needed for vertical progress bars -->
+
    +
    2. + +
  2. + Add the canvas tag (put it where you want the graph to appear): +
    +<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas>
+
    +
    3. + +
  3. + Create the graph (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', 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. +

+ +

Common library split (17th April 2010)

+

+ The common library has now been split into separate files. This was because the single common library had become far too large. + If you don't use any of the dynamic features, then you still need to change your code, as RGraph.common.js is now + called RGraph.common.core.js. +

+ + +
 
 
+

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: +

+ +

+ /javascript/rgraph/RGraph.common.core.js
+ /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>
+        graph = new RGraph.Line('cvs', <?php print($data_string) ?>);
+        graph.Set('chart.background.grid.autofit', true);
+        graph.Set('chart.gutter', 17);
+        graph.Set('chart.hmargin', 10);
+        graph.Set('chart.tickmarks', 'endcircle');
+        graph.Set('chart.labels', <?php print($labels_string) ?>);
+        
+        graph.context.translate(12, 0);
+        
+        graph.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 graph dynamically. +

+ + + +
 
 
+

Support forum

+ + + + + + + + + + + + + + + + + + + + + + +
+ Google Groups +
+ Subscribe to RGraph support +
+
+ Email: + +
+
+ Visit this group +
+ RSS Feed + Atom XML Feed +
+ + +

+ Support is available via a Google Groups forum. If you think that the issue you have is common, try the issues + page first, and then try searching the forum in case your question has been answered previously. If that all yields nothing, + post a question to the forum. +

+ +

+ If you want to keep up-to-date on RGraph, then subscribe to the group, as I post update notifications here. You can also follow me on + Twitter. I post update notifications here along with HTML5 related news. +

+ +
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/ingraph.html b/RGraph/docs/ingraph.html new file mode 100644 index 0000000..a97293d --- /dev/null +++ b/RGraph/docs/ingraph.html @@ -0,0 +1,224 @@ + + + + + + + RGraph: HTML5 canvas graph library - In-graph labels + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - In-graph labels

+ + + +
+ +

+ This page shows the various options for in-graph labels. The in-graph labels can be set like this: +

+ + 
obj.Set('chart.labels.ingraph', [,,'Hoolio',,'Olga']);
+ +

+ Or like this if you want to be more specific: +

+ + 
obj.Set('chart.labels.ingraph', [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']);
+ +

+ The array can consist of: +

+ + + +

Example line chart

+ + [No canvas support] + + +

Example bar chart

+ + [No canvas support] + + +

Example bar chart (arrow variant)

+ + [No canvas support] + + + +

Example bar chart (dot variant)

+ [No canvas support] + + + + \ No newline at end of file diff --git a/RGraph/docs/issues.html b/RGraph/docs/issues.html new file mode 100644 index 0000000..0225d81 --- /dev/null +++ b/RGraph/docs/issues.html @@ -0,0 +1,248 @@ + + + + + + + RGraph: HTML5 canvas graph library - Common issues + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Common issues

+ + + + + + + + + + + + + + + + + + + + +
+ Google Groups +
+ Subscribe to RGraph support +
+
+ Email: + +
+
+ Visit this group +
+ + +

+ These are some common issues that you should be aware of. If you're having trouble, you may want to look through these to see + if any apply to you or may be the source of your problem. +

+ + +

Tooltips not working as of the October 2010 release

+ +

+ If you're specifying numbers instead of strings for your tooltips, they will not work any more. Simply cast them to + strings, like this: +

+ + 
+
+// This WILL NOT work any more
+myBar.Set('chart.tooltips', [56, 67, 53]);
+
+
+// Do any of these instead
+myBar.Set('chart.tooltips', ['56', (67).toString(), String(53)]);
+
+ + +

Annotations aren't saved when running locally in Mozilla Firefox

+ +

+ The solution here is to run the graphs using a web server. At this time (March 2010) only Safari, Chrome and Opera + support saving annotations when running locally. +

+ + +

Missing text in Google Chrome

+ +

+ Since one of the Chrome 4 dev releases there has been an issue with Google Chrome 4 and 5, asynchronous processing and not rendering + graph labels. This has been remedied by simply not using asynchronous processing. Because of the tag placement on the front page, + the effect shouldn't be apparent. Other browsers (eg Firefox, Safari, Opera, MSIE) are fine. +

+ + +

Firefox, tooltips and the clipboard

+ +

+ Firefox, tooltips and using the clipboard is a little convoluted. To copy the text in a tooltip you must do the following: +

+ +
    +
  1. Select the text you want with the mouse.
    2. +
  2. Press CTRL+C (it may be a different key combination if you're not using Windows) to copy the text to the clipboard.
    3. +
+ +

+ Note: Recent versions of Firefox 4 (from beta 6 onwards) appear to work as expected, and you can copy text with the mouse as normal. +

+ +

Shadows in Google Chrome and the line chart

+ +

+ Shadows in recent versions of Google Chrome are somewhat broken. Firefox, MSIE, Opera and Safari are fine. The reason for this + error is a combination of factors it seems - shadow blurring and line width. Fixes have been added to allow shadow blurring and + a 1 pixel linewidth, though some graph types may still be affected. +

+ + + + + \ No newline at end of file diff --git a/RGraph/docs/keys.html b/RGraph/docs/keys.html new file mode 100644 index 0000000..ee26238 --- /dev/null +++ b/RGraph/docs/keys.html @@ -0,0 +1,211 @@ + + + + + + + RGraph: HTML5 canvas graph library - Examples of keys + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Examples of keys

+ +
+ [No canvas support] + [No canvas support] +
+ +

+ As of 4th December 2010 the code that produces the keys has been rewritten. There are two variants of keys available, + a horizontal one designed to sit in the gutter, and a vertical one that is designed to sit on top of (ie over) the graph. +

+ +

+ The actual positioning is now configurable though, so you could have a horizontal key and position it to sit on top + of the chart. +

+ +

Key properties

+ +

+ The available key properties and their defaults are listed below (some graph types have slightly different defaults to + suit): +

+ + + + + + \ No newline at end of file diff --git a/RGraph/docs/led.html b/RGraph/docs/led.html new file mode 100644 index 0000000..da51561 --- /dev/null +++ b/RGraph/docs/led.html @@ -0,0 +1,230 @@ + + + + + + + RGraph: HTML5 canvas graph library - LED Grid documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - LED Grid documentation

+ + + +

+ The LED grid can be used to represent simple letters and numbers. +

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var led = new RGraph.LED('myCanvas', '456461');
+        led.Set('chart.dark', '#666');
+        led.Set('chart.light', 'rgba(255,255,255,1)');
+        led.Draw();
+    }
+</script>
+
+ +

Properties

+ +

+ You can use these properties to control how the LED grid apears. +

+ + + + + +

Chart configuration

+chart.dark
+ Color of the darkened (ie unlit) lights
Default: #eee

+ +chart.light
+ Color of lit lights
Default: #f66

+ +chart.background
+ The color of the background.
Default: white

+ +

Interactive features

+chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ + + \ No newline at end of file diff --git a/RGraph/docs/licensing.html b/RGraph/docs/licensing.html new file mode 100644 index 0000000..8190e8a --- /dev/null +++ b/RGraph/docs/licensing.html @@ -0,0 +1,258 @@ + + + + + + + RGraph: HTML5 canvas graph library - Licensing FAQs + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Licensing FAQs

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

+ If you have any questions regarding licensing, these are some FAQs that should help answer them. +

+ +

FAQs

+ + + + + + + + + +
+ Do I need to buy a license?

+ For commercial/business use yes, you need a license to use RGraph. RGraph is not free software. + For non-commercial use (eg personal, charity and educational), RGraph is freely usable and you + don't need to buy a license though. You can read the license itself + here. +
+ + +

 

+ + + How much is a license?

+ A license is a one-time fee of £49 (UK pounds). That's roughly $70 (US dollars) at + the time of writing. + + + +

 

+ + Where can I read the license?

+ The license is further down this page. + +

+ + +

 

+ What does the license cover?

+ The RGraph license covers RGraph as a whole. Excepting ExCanvas, all code that you find in the RGraph archive is + covered by the RGraph license. The license also covers code that I've written that is available from phpguru.org. + This is a mainly + PHP focused website, but also plays host to a fair amount of Javascript too. So if your development language of choice is not PHP, + you may still find something of use there.

+ +

+ + +

 

+ Can you send me an invoice?

+ Of course, simply go here: http://www.rgraph.net/invoice.html, enter your email + address and you'll be sent an invoice that you can use for tax purposes. + +

+ + +

 

+ Can I use PayPal?

+
+
+ + + + +
+
+ Yes, you can use PayPal if you prefer. Please use the PayPal button shown here to start the process. + +

+ + + +

 

+

Contact

+

+ If you have a question about RGraph licensing, you can send it to licensing@rgraph.net + or you can order directly using Google Checkout. +

+ + +

 

+

License

+ +

+ The license text: +

+ + + + \ No newline at end of file diff --git a/RGraph/docs/line.html b/RGraph/docs/line.html new file mode 100644 index 0000000..049da0d --- /dev/null +++ b/RGraph/docs/line.html @@ -0,0 +1,745 @@ + + + + + + + RGraph: HTML5 canvas graph library - line chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Line chart documentation

+ + + +

+ The line chart, along with the bar chart, is probably the most configurable of all the charts available. +

+ +

+ The example file is here. +

+ + + + 
+<script>
+    window.onload = function ()
+    {
+        var data = [10,4,17,50,25,19,20,25,30,29,30,29];
+    
+        var line = new RGraph.Line("myLine", data);
+        line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
+        line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
+        line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
+        line.Set('chart.colors', ['rgba(255,0,0,1)']);
+        line.Set('chart.linewidth', 2);
+        line.Set('chart.filled', true);
+        line.Set('chart.hmargin', 5);
+        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        line.Set('chart.gutter', 40);
+        line.Draw();
+    }
+</script>
+
+ + +

Properties

+ +

+ You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg: +

+ +

+ myLine.Set('name', 'value'); +

+ + + + + +

Background

+chart.background.barcolor1
+ The color of the background bars (1 of 2).
Default: rgba(0,0,0,0)

+ +chart.background.barcolor2
+ The color of the background bars (2 of 2).
Default: rgba(0,0,0,0)

+ +chart.background.grid
+ Whether to show the background grid or not.
Default: true

+ +chart.background.grid.color
+ The color of the background grid.
Default: #eee

+ +chart.background.hbars
+ An array of information stipulating horizontal colored bars. You can use these to indicate limits. Eg: myLine.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]); This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.
Default: null

+ +chart.background.grid.hsize
+ The horizontal size of the grid.
Default: 25

+ +chart.background.grid.vsize
+ The vertical size of the grid.
Default: 25

+ +chart.background.grid.width
+ The width of the background grid.
Default: 1

+ +chart.background.grid.border
+ Determines whether a border line is drawn around the grid.
Default: true

+ +chart.background.grid.hlines
+ Determines whether to draw the horizontal grid lines.
Default: true

+ +chart.background.grid.vlines
+ Determines whether to draw the vertical grid lines.
Default: true

+ +chart.background.grid.autofit
+ Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.
Default: false

+ +chart.background.grid.autofit.numhlines
+ When using autofit this allows you to specify how many horizontal grid lines you want.
Default: 7

+ +chart.background.grid.autofit.numvlines
+ When using autofit this allows you to specify how many vertical grid lines you want.
Default: 20

+ +chart.backdrop
+ When enabled this specifies that the line(s) will have a backdrop effect. You can control the transparency with the other backdrop settings).
Default: false

+ +chart.backdrop.size
+ This controls the size/extent of the backdrop effect.
Default: 30

+ +chart.backdrop.alpha
+ This controls how much transparency the backdrop effect has. It can go from 0 - 1.
Default: 0.2

+ +

Labels and text

+ + + chart.labels.above
+ Whether the values are shown in labels drawn above the line.
+ Default: false

+ + + chart.labels.above.size
+ The size of the labels which are drawn above the line.
+ Default: 8

+ + + chart.labels
+ An array of the X labels for the graph.
+ Default: [] (An empty array)

+ + +chart.labels.ingraph
+ An array of labels for the graph which are drawn "inside" the graph. If you have 5 data points then this should have a corresponding number of elements, though there is a shorthand available.
Default: null

+ +chart.ylabels
+ Can be true or false and determines whether the chart has Y axis labels.
Default: true

+ +chart.ylabels.invert
+ Reverses the Y axis so that 0 is at the top, instead of the bottom.
Default: false

+ +chart.ylabels.count
+ A value (1, 3 or 5) that controls how many Y labels there are.
Default: 5

+ +chart.ylabels.inside
+ This controls whether the Y labels are drawn inside the Y axis or not. If your labels are large, this may help.
Default: false

+ +chart.ylabels.inside.color
+ If the Y labels are to be drawn inside the Y axis, this is used as the background color.
Default: rgba(255,255,255,0.5)

+ +chart.xlabels.inside
+ This controls whether the X labels are drawn inside the X axis or not. By using this you can significantly reduce the size of the gutter needed.
Default: false

+ +chart.xlabels.inside.color
+ If the X labels are to be drawn inside the X axis, this is used as the background color.
Default: rgba(255,255,255,0.5)

+ +chart.text.size
+ The size of the text (in points).
Default: 10

+ +chart.text.angle
+ The angle of the horizontal text labels (at the bottom of the graph). Previously this could be 0, 45 or 90, but now (31st July 2010) this can be any angle.
Default: 0 (Horizontal)

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +

Margins

+chart.gutter
+ The gutter of the graph. This is the bit of the graph that the labels are in.
Default: 25

+ +chart.hmargin
+ The size of the horizontal margin. This is on the inside of the axes.
Default: 0

+ +

Colors

+chart.colors
+ An array of line colors.
Default: ['#f00', '#0f0', '', '#00f', '#f0f', '#ff0', '#0ff'] 9

+ +chart.colors.alternate
+ Set this to true if you want your line color(s) to be alternated. See note
Default: false

+ +chart.fillstyle
+ A single color or an array of colors that filled line charts will use.

Important: This used to be a string, and still can be, but can now also be an array.
Default: null

+ +chart.filled
+ Whether the area under the graph is filled or not. This looks best when there is no horizontal margin.
Default: false

+ +chart.filled.range
+ This is useful for indicating a range. Exactly two datasets are required, with the space between them filled. This is useful for indicating a range.The line chart examples page demonstrates this in action.
Default: false

+ +

Shadow

+chart.shadow
+ If true a shadow will be applied to the line.
Default: false

+ +chart.shadow.color
+ The color of the shadow. As well as a single color definition, this can also be an array of colors. This means that if you have multiple lines on your chart, each can have a different shadow color.
Default: rgba(0,0,0,0.5)

+ +chart.shadow.offsetx
+ The X offset in pixels for the shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset in pixels for the shadow.
Default: 3

+ +chart.shadow.blur
+ The severity of the shadow blurring effect.
Default: 3

+ +

Interactive features

+chart.tooltips
+ These are tooltips for the line(s). It should be an array of tooltips. If you have multiple lines, simply pass multiple arrays to the Set() method.
Default: [] (An empty array)

+ +chart.tooltips.effect
+ The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade

+ +chart.tooltips.coords.adjust
+ If you translate() before drawing your graph to reduce wasted space, the coords used for tooltips may need adjusting by how much you translate() by. This setting is how to do it. It should be an array of the X/Y adjustments. There's an example of this on the misc documentation page.
Default: [0,0]

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.tooltips.highlight
+ If you don't want/need the graph to be highlighted and thus avoid redrawing, (eg When combining charts), then set this to false.
Default: true

+ +chart.crosshairs
+ If true, you will get a crosshair centering on the current mouse position.
Default: false

+ +chart.crosshairs.linewidth
+ This controls the linewidth of the crosshairs.
Default: 1

+ +chart.crosshairs.color
+ The color of the crosshairs.
Default: #333

+ +chart.contextmenu
+ An array of context menu items. Unlike the bar chart, you CAN have context menus at the same time as tooltips. More information on context menus is here.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only color allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +chart.adjustable
+ Defaulting to false, this determines whether your graph will be adjustable (click a point and drag it).
Default: false

+ +

Titles

+chart.title
+ The title of the chart.
Default: none

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.xaxis
+ This allows to specify a title for the X axis.
Default: none

+ +chart.title.yaxis
+ This allows to specify a title for the Y axis.
Default: none

+ +chart.title.xaxis.pos
+ This is multiplied with the gutter to give the position of the X axis title.
Default: 0.25

+ +chart.title.yaxis.pos
+ This is multiplied with the gutter to give the position of the Y axis title.
Default: 0.25

+ + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + +

Scale

+chart.units.post
+ The units (if any) that the Y axis is measured in (gets appended to the number)
Default: none

+ +chart.units.pre
+ The units (if any) that the Y axis is measured in (gets preppended to the number)
Default: none

+ +chart.scale.decimals
+ Determines the precision of the numbers used as the scale.
Default: 0

+ +chart.scale.point
+ The character used as the decimal point.
Default: .

+ + + chart.scale.thousand
+ The character used as the thousand separator
Default: ,

+ + + chart.scale.round
+ Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.
+ Default: null

+ + +chart.ymin
+ The optional minimum Y scale value. If not specified then it will be zero.
Default: null

+ + + chart.ymax
+ The optional maximum Y scale value. If not specified then it will be calculated.
+ Default: null (It's calculated)

+ + chart.outofbounds
+ Normally, out-of-bounds values are not drawn. By setting this to true you can change this behaviour.
+ Default: false

+ + +

Axis properties

+chart.xticks
+ The number of X tickmarks.
Default: null (linked to number of datapoints)

+ +chart.ticksize
+ The size of the tick marks. This only affects certain styles of tickmarks.
Default: 3

+ +chart.tickdirection
+ Whether the ticks are above or below the axis.
Default: -1 (-1 is below, 1 is above)

+ +chart.axis.color
+ The color of the axes.
Default: black

+ +chart.xaxispos
+ The position of the X axis. It can be either bottom or center.
Default: bottom

+ +chart.yaxispos
+ Specifies the Y axis position. Can be left or right.
Default: left

+ +chart.axesontop
+ A minor option, this sets the axes to be redrawn after the graph has been drawn. This is only useful in a certain set of circumstances - the graph is filled and the line width is small.
Default: false

+ +chart.noaxes
+ Whether the axes are drawn
Default: false (the axes ARE drawn)

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ +

Miscellaneous

+chart.tickmarks
+ What kind of tickmarks to use on the graph. This can be:

Note that "arrow" and "filledarrow" look better with a thinner (1 or 2) linewidth setting. Also note that now (10th August 2010) as well as a string, this can be an array of different tickmark styles.
Default: null

+ +chart.tickmarks.dot.color
+ This is the color of the BORDER around the dot/borderedcircle style tickmarks.
Default: #fff

+ +chart.stepped
+ Draws the line as stepped. Useful for showing stock performance for example.
Default: false

+ +chart.linewidth
+ The width of the line (ie the actual line on the line graph). Note: If your line is stepped and filled, and you don't want a trailing line indicating the last value, you can set this to zero.
Default: 1

+ +chart.variant
+ At present this can only be 3d, and gives a small 3D effect.
Default: null

+

+ + chart.chromefix
+ Since version 6, Chrome has had a shadow bug, which becomes apparent when you use shadow blurring. This value defaults + to true and means that RGraph will skirt the bug with a small fix.
Default: true

+ +

+ + + +

Methods

+ + + obj.getPoint()

+ This method makes it easier to get hold of which point on the Line chart has been hovered over. It returns an array of: + + + + An example usage is: + + 
+<canvas id="cvs" width="600" height="300">[No canvas support]</canvas>
+
+<script src="RGraph.common.core.js"></script>
+<script src="RGraph.line.js"></script>
+
+<script>
+    myGraph = new RGraph.Line('cvs', [10,4,2,4,1]);
+    myGraph.Set('chart.hmargin', 10);
+    myGraph.Set('chart.tickmarks', 'endcircle');
+    myGraph.Set('chart.labels', ['Fred','John','Kev','Lou','Pete']);
+    myGraph.Draw();
+
+
+    RGraph.Register(myGraph);
+    
+    myGraph.canvas.onmousemove = function (e)
+    {
+        RGraph.FixEventObject(e);
+
+        var canvas  = e.target;
+        var context = canvas.getContext('2d');
+        var obj     = e.target.__object__;
+      
+        // This is the new method which simplifies getting coordinates
+        var point = obj.getPoint(e);
+      
+      
+        if (point) {
+            
+            canvas.style.cursor = 'pointer';
+            
+            // Is this the same tooltip as the one (if any) that's already being shown
+            if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == point[3]) {
+                return;
+            }
+
+            // Start afresh
+            RGraph.Redraw();
+
+            // Show the tooltip
+            RGraph.Tooltip(canvas, obj.Get('chart.labels')[point[3]], e.pageX, e.pageY, point[3]);
+
+            // Highlight the point
+            context.strokeStyle = 'gray';
+            context.fillStyle = 'white';
+            context.beginPath();
+            context.moveTo(point[1], point[2]);
+            context.arc(point[1], point[2], 2, 0, 6.26, 0);
+            context.stroke();
+            context.fill();
+            
+            return;
+        }
+        
+        canvas.style.cursor = 'default';
+    }
+    
+    window.onclick = function ()
+    {
+        RGraph.Redraw();
+    }
+</script>
+
+ + +

Combining the Line and Bar charts

+ +

+ You can combine the Bar and Line charts with a bit of magic. It's actually quite easy to do. Find out more here. + In the same vein, you can have Y axes on both the left and right. +

+ + + +

Alternative colors

+ +

+ Instead of a string stipulating the color, each element of the colors array can itself be a two element array, + stipulating the up color, and the down color. To use alternating colors you must also stipulate the alternate property: +

+ + + 
+myLine.Set('chart.colors.alternate', true);
+myLine.Set('chart.colors', ['red', ['blue', 'yellow'], 'green]);
+
+ + +

Custom tickmarks

+

+ If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark, + enabling you to draw the tickmark yourself. For example: +

+ + 
+<script>
+    line.Set('chart.tickmarks', myTick);
+
+    /**
+    * The function that is called once per tickmark, to draw it
+    * 
+    * @param object obj   The graph object
+    * @param array  data  The entire line data
+    * @param number value The individual points value
+    * @param number index The current index, in the data array
+    * @param number x     The X coordinate
+    * @param number y     The Y coordinate
+    * @param string color The color of the line
+    * @param number prevX The previous X coordinate
+    * @param number prevY The previous Y coordinate
+    */
+    function myTick (obj, data, value, index, x, y, color, prevX, prevY)
+    {
+        // Draw your custom tick here
+    }
+</script>
+
+ + \ No newline at end of file diff --git a/RGraph/docs/meter.html b/RGraph/docs/meter.html new file mode 100644 index 0000000..212edfc --- /dev/null +++ b/RGraph/docs/meter.html @@ -0,0 +1,344 @@ + + + + + + + RGraph: HTML5 canvas graph library - meter documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Meter documentation

+ + + +

+ This is the Meter chart. Similar to half the Odometer. The difference is purely visual, but may well be more suited to + a control panel type application. +

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var meter = new RGraph.Meter('myCanvas', 50, 100, 60);
+        meter.Set('chart.contextmenu', [
+                                        ['Show palette', RGraph.Showpalette],
+                                        ['Clear annotations', function () {RGraph.Clear(meter.canvas); meter.Draw();}],
+                                        null,
+                                        ['Cancel', function () {}]
+                                       ]);
+        meter.Set('chart.annotatable', true);
+        meter.Set('chart.label.position', 'inside');
+        meter.Set('chart.title', 'A sample measurement');
+        meter.Set('chart.title.vpos', 0.5);
+        meter.Set('chart.units.post', 'k');
+        meter.Set('chart.red.start', 0);
+        meter.Set('chart.red.end', 3);
+        meterSet('chart.yellow.start', 3);
+        meter.Set('chart.yellow.end', 6);
+        meter.Set('chart.green.start', 6);
+        meter.Set('chart.green.end', 10);
+        meter.Draw();
+    }
+</script>
+
+

Properties

+ +

+ You can use these properties to control how the Meter apears. You can set them by using the Set() method. Eg: +

+ +

+ myMeter.Set('name', 'value'); +

+ + + + + +

Margins

+chart.gutter
+ The gutter of the graph.
Default: 25

+ +

Colors

+chart.border.color
+ The color of the outline (including tickmarks).
Default: black

+ +chart.green.start
+ The value that the green area should begin at.
Default: 35% of the maximum value

+ +chart.green.end
+ The value that the green area should end at.
Default: The maximum value

+ +chart.green.color
+ The color of the green area, (can be any color)..
Default: #207A20

+ +chart.yellow.start
+ The value that the yellow area should begin at.
Default: 10% of the maximum value

+ +chart.yellow.end
+ The value that the yellow area should end at.
Default: 35% of the maximum value

+ +chart.green.color
+ The color of the yellow area, (can be any color)..
Default: #D0AC41

+ +chart.red.start
+ The value that the red area should begin at.
Default: The minimum value

+ +chart.red.end
+ The value that the red area should end at.
Default: 10% of the maximum value

+ +chart.red.color
+ The color of the red area, (can be any color)..
Default: #9E1E1E

+ +

Labels and text

+chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size (in points) of the labels.
Default: 10

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +

Titles

+chart.title
+ The title of the graph, if any.
Default: null

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +

Scale

+chart.units.pre
+ The units that the labels are measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".
Default: none

+ +chart.units.post
+ The units that the labels are measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".
Default: none

+ +

Interactive features

+chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively).
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only color allowed for annotations.
Default: black

+ +

Shadow

+chart.shadow
+ If true a shadow will be applied to the meter.
Default: false

+ +chart.shadow.color
+ The color of the shadow.
Default: rgba(0,0,0,0.5)

+ +chart.shadow.offsetx
+ The X offset in pixels for the shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset in pixels for the shadow.
Default: 3

+ +chart.shadow.blur
+ The severity of the shadow blurring effect.
Default: 3

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ +

Miscellaneous

+chart.linewidth
+ The width of the outline of the Meter.
Default: 2

+

+ + \ No newline at end of file diff --git a/RGraph/docs/misc.html b/RGraph/docs/misc.html new file mode 100644 index 0000000..4e80d8b --- /dev/null +++ b/RGraph/docs/misc.html @@ -0,0 +1,668 @@ + + + + + + + RGraph: HTML5 canvas graph library - Miscellaneous + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Miscellaneous documentation

+ + + + + + +
 
 
+

Canvas fallback content and visually impaired users

+ +

+ When using the canvas element you should be aware of the accessibility of your graphs, for example where vision limited users are + concerned. Screen readers, for example, may not be able to convert a graph into something that is reasonable, so you should + consider + doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example + would be to put a table of data inside the canvas tag that the graph on the canvas represents. Doing this goes a long way + towards making the data available to everyone. You might also wish to consider using the full canvas + zoom or the resizing feature to enable people to enlarge the graph. +

+ + +
 
 
+

Upper and lower limits for horizontal bars

+ +

+ If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower + limits of the graph, whatever they may be, you can specify null for the value determining how far they extend. For cases where + the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the + bottom, you can simply specify an arbitrary length (eg -999999). Eg: +

+ + 
myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);
+ + +
 
 
+

Setting the canvas width and height

+ +

+ To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas + will be scaled, and not enlarged, to fit the new width/height. Eg: +

+ + 
<canvas id="myCanvas" width="200" height="100">[No canvas support]<canvas>
+ +

+ + +
 
 
+

RGraph and older browsers

+ +

+ Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text + or shadow APIs these will naturally be unavailable. The graphs will still be drawn, though without shadows or text. +

+ + +
 
 
+

RGraph and Microsoft Internet Explorer

+ +

+ You can now use RGraph with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of <canvas> support to MSIE). + Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native <canvas> + support. You can see some screenshots of it here. +

+ + +
 
 
+

Debugging tips

+ +

+ If you're having a hard time debugging your graph, try these: +

+ + + + + + +
 
 
+

Inspecting an RGraph graph

+ +

+ To help when debugging your RGraph graphs and canvas elements, you can use you browsers built in debugging tools. + An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot + of these tools (in docked mode) here. To view these + tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via + the __object__ property. +

+ + + +
 
 
+

Double click context menus

+ +

+ Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button), + not the right, in order to make it more reliable. +

+ + + +
 
 
+

Adding your own event handlers

+ +

+ Because each RGraph object exposes the canvas element (the same as what you get from document.getElementById()), + you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could + do this: +

+ + 
+<script>
+    var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
+    myBar.Draw();
+
+    myBar.canvas.onclick = function ()
+    {
+    }
+</script>
+
+

+ But what if, for example, you're using an RGraph feature which + uses the event handler that you need? In this case you can use the standard DOM method addEventListener(). This will add + your new event handler without replacing any existing one (ie the one installed by RGraph). For example: +

+ + 
+<script>
+    var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
+    myBar.Draw();
+
+    function myFunc ()
+    {
+    }
+
+    myBar.canvas.addEventListener('click', myFunc, false)
+</script>
+
+ + + +
 
 
+

Carriage returns and newlines in labels

+ +

+ You can put carriage returns in your labels by using the string \r\n. This means your labels will span multiple lines. + Like so: +

+ + 
myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)
+ + + +
 
 
+

Why is the Traditional Radar chart so called?

+ +

+ Historical reasons. There used to be two Radar charts in RGraph - the TRadar and an older one called the Pseudo radar chart. + The Pseudo Radar chart was converted into the Rose chart. Renaming the TRadar will only cause problems and there's no pressing + reason to do so, so for the moment it remains the TRadar chart. +

+ + + +
 
 
+

Character set issues

+ +

+ If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct + character set that the browser should use. In PHP you can do this with the header() function (which, as the + name suggests, sends a HTTP header): +

+ + 
<?php
+    header("Content-Type: text/html; charset=ISO-8859-1");
+?>
+ +

+ If you use Apache, you could use the header directive, though this may be overridden by other directives, + eg AddDefaultCharset. +

+ + +
 
 
+

How to identify an RGraph object

+ +

+ Because identity can sometimes be a tricky affair, there are a few RGraph properties that you can use to check whether an object + is an RGraph object: +

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

Static Y axis

+ + + + + A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the RGraph libraries itself, it can be + achieved with a little HTML, like the graph shown. The HTML and the script to achieve this is documented in the source + of this page. It involves placing an extra canvas above the graph with the Y axis drawn on it. This canvas doesn't + move when the main canvas scrolls left and right. + +

+ + Note: Because Firefox doesn't support the event.offsetX and event.offsetY properties, and they have to be simulated, + scrolling and tooltips in this case and this browser doesn't work. + + + + + +
+
+ + + + + +
 
 
+

Reducing white space

+ + + + + +

+ If the labels that you have require a large gutter you can reduce the amount of wasted space by using the standard 2D + context method translate(). This effectively moves the coordinate system so that (0,0) is no longer in the top + left corner, but whereever you put it. For example if you translate by (15,-15), the origin will then be 15 pixels right and + 15 pixels up compared to where it was. +

+ +

+ Because the coordinate system is being changed things that rely on coordinates, eg tooltips, will be affected. For this reason + there is the property chart.tooltips.coords.adjust which you can use to tell RGraph that you've translated and the + tooltip coordinates will be adjusted appropriately. +

+ + 
+// This moves the graph to the right by 15px, and up by 15px. Do this before the call to .Draw()
+myObject.context.translate(15,-15);
+
+ + + +
+ + + +
 
 
+

In-graph labels

+ +

+ As well as an array of strings, like this: +

+ + 
obj.Set('chart.labels.ingraph', ['First label','Second label']);
+ +

+ The string can also be an array, consisting of color and placement information, like this: +

+ + 
obj.Set('chart.labels.ingraph', ['First label',['Second label', 'red', 'yellow', -1, 50] ]);
+ + +

+ You can read more information about this here. +

+ + +
 
 
+

Shorthand for in-graph labels

+

+ Instead of providing a full array of null elements for in-graph labels which may get a little unwieldy, + you can instead specify an integer that specifies how many elements to skip. Like this: +

+ + 
line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);
+ +
+
+ + +
 
 
+

DOM2 Event handlers

+

+ All the graphs have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to + be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the graphs will still be + drawn, albeit without tooltips. +

+ + + +
+ + +
 
 
+

Gutter suggestion function

+

+ RGraph now contains a function (RGraph.getGutterSuggest()) that will provide a simple suggestion for the gutter setting. This function is based on the + left gutter and labels and should be considered an approximate value. +

+ +
+ + + + +
 
 
+

Data types

+

+ If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this + when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests. +

+ + + + + +
 
 
+

Creating your own Graph type

+

+ If you wish to create your own graph type, there is a skeleton file + here that you can use as a starting point. + This file contains the bare bones of an RGraph object, such as the .Get() and .Set() methods, as well as examples + of common properties. +

+ + +
 
 
+

Known issues

+ +

+ There's a few known issues documented here +

+ + +

+ + \ No newline at end of file diff --git a/RGraph/docs/msie.html b/RGraph/docs/msie.html new file mode 100644 index 0000000..8db59c2 --- /dev/null +++ b/RGraph/docs/msie.html @@ -0,0 +1,306 @@ + + + + + + RGraph: HTML5 canvas graph library - Microsoft Internet Explorer support + + + + + + + + + + + + + + + + + + + + + + + + +

+ +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Microsoft Internet Explorer (MSIE) support

+ + + +

+ +

+ Microsoft Internet Explorer 9 + +

+ Starting from preview 3, Internet Explorer 9 has support for canvas, including the text and shadow APIs. It also + benefits from hardware acceleration, and quick rendering times. You can see some screenshots + here. +

+
+ +
+ + [No canvas support] + + + + + + +

Introduction

+ +

+ As of December 2009 RGraph now works partially with Internet Explorer without Google Chrome Frame. + Graphs are rendered as VML. You are still recommended to use + Google Chrome Frame to get the best results. + The interactive features are unlikely to work correctly. RGraph only works with Microsoft + Internet Explorer 8. +

+ +

+ Thanks go to everyone involved with the ExCanvas project for providing the ExCanvas library. +

+ + +

Getting hold of ExCanvas

+ +

+ Google ExCanvas is distributed with RGraph in the "excanvas" directory. There is a minified gzip compressed version, along + with the original. +

+ + +

Caveats

+ + + + +

Google Chrome Frame

+

+ Instead of ExCanvas you can also use Google Chrome Frame. This basically turns Internet Explorer into Google Chrome, and fully + supports RGraph. Since it involves a plugin installation, this is a better option if you can fully influence the users PC. If you + can fully influence the users PC however, a better option might be to simply use one of the browsers with native + support. +

+ + +
+ + + +

Using a dynamically created canvas

+

+ If you're creating your canvas dynamically there is an extra step that you must perform to allow it to be recognised by + ExCanvas: +

+ + 
+var canvas = document.createElement('CANVAS');
+    canvas.id = 'cvs';
+    canvas.width = 600;
+    canvas.height = 250;
+    canvas.style.border = '1px dashed black';
+document.body.appendChild(canvas);
+
+G_vmlCanvasManager.initElement(canvas);
+
+ + + +
+
+
+ + + + + \ No newline at end of file diff --git a/RGraph/docs/odo.html b/RGraph/docs/odo.html new file mode 100644 index 0000000..fe6dcb2 --- /dev/null +++ b/RGraph/docs/odo.html @@ -0,0 +1,346 @@ + + + + + + + RGraph: HTML5 canvas graph library - Odometer documentation + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Odometer documentation

+ + + +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        // ID, MINIMUM, MAXIMUM, INDICATED VALUE
+        var odo = new RGraph.Odometer('myOdo', 0, 100, 18);
+        
+        odo.Set('chart.green.max', 75);
+        odo.Set('chart.red.min', 90);
+        odo.Set('chart.label.area', 50);
+        odo.Set('chart.needle.thickness', 2);
+    
+        odo.Draw();
+    }
+</script>
+
+ + + +

Properties

+ +

+ You can use these properties to control how the bar graph apears. You can set these properties using the Set() method. +

+ + + + + +

Chart configuration

+chart.value.text
+ Controls whether the value is indicated as a text label in the center of the dial.
Default: false

+ +chart.value.units.pre
+ The pre units used on the textual value.
Default: nothing (An empty string)

+ +chart.value.units.post
+ The post units used on the textual value.
Default: nothing (An empty string)

+ +chart.border
+ This controls the gray border of the Odometer.
Default: false

+ +chart.tickmarks.highlighted
+ This controls whether the tickmarks are highlighted in red/yellow/green.
Default: false

+ +chart.zerostart
+ If you want the top value on your chart to be zero instead of the maximum value, set this to true.
Default: false

+ +

Margins

+chart.gutter
+ The width of the area outside the odometer.
Default: 25

+ +

Colors

+chart.green.max
+ This is the point at which the green area ends.
Default: 75% of the maximum value

+ +chart.red.min
+ This is the point at which the red area starts. The yellow area is between the green and red areas.
Default: 90% of the maximum value

+ +

Labels and text

+chart.labels
+ Instead of using computed numbers, which uses the maximum value, you can specify the Odometer to use textual labels instead, with this option.
Default: null

+ +chart.label.area
+ The width of the area that labels are put in.
Default: 35

+ +chart.text.size
+ The size of the text (in points).
Default: 10

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +

Needle

+chart.needle.width
+ How thick the needle is.
Default: 2

+ +chart.needle.color
+ The color that is applied to the needle.
Default: black

+ +chart.needle.head
+ This controls whether the arrow head on the end of the needle is displayed.
Default: true

+ +chart.needle.type
+ This determines which type of needle is used. It can be pointer or triangle.
Default: pointer

+ +chart.needle.extra
+ With this you can specify a number of extra pointers that will be drawn on the Odometer. An example would be a meter that's used to show upload and download data. An example use:
odo.Set('chart.needle.extra', [[16, 'red'], [24, 'blue']]);

Default: [] (An empty array)

+ +

Title

+chart.title
+ The title text.
Default: no title set

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +

Shadow

+chart.shadow.inner
+ Whether a drop shadow is applied to the inner circle of the Odometer
Default: false

+ +chart.shadow.outer
+ Whether a drop shadow is applied to the whole Odometer.
Default: false

+ +

Interactive features

+chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ +

Scale

+chart.units.pre
+ The units that the value is measured in. This string is displayed BEFORE the actual value, allowing you to specify values such as "$50".
Default: none

+ +chart.units.post
+ The units that the value is measured in. This string is displayed AFTER the actual value, allowing you to specify values such as "50ms".
Default: none

+ +chart.scale.decimals
+ The number of decimal places to display for the labels.
Default: 0

+

+ + + \ No newline at end of file diff --git a/RGraph/docs/pie.html b/RGraph/docs/pie.html new file mode 100644 index 0000000..ee53f12 --- /dev/null +++ b/RGraph/docs/pie.html @@ -0,0 +1,498 @@ + + + + + + + RGraph: HTML5 canvas graph library - Pie chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Pie chart documentation

+ + + +

+ The pie chart can be used, for example, to represent something that is akin to percentages. ie A set of data that + should be taken as part of a whole. +

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var data = [564,155,499,611,322];
+    
+        var pie = new RGraph.Pie('myPie', data);
+        pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
+        pie.Set('chart.linewidth', 5);
+        pie.Set('chart.stroke', '#fff');
+        pie.Draw();
+    }
+</script>
+
+ + + + +

Properties

+ +

+ You can use these properties to control how the pie chart looks. You can set them by using the Set() method. Eg: +

+ +

+ myPie.Set('name', 'value'); +

+ + + + + +

Margins

+chart.gutter
+ The gutter of the graph (for text labels).
Default: 25

+ +

Colors

+chart.colors
+ Colors to be used for the pie segments.
Default: ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'rgb(255,255,0)', 'rgb(0,255,255)', 'red', 'pink', 'black', 'white']

+ +chart.strokestyle
+ The color of the seperating lines. By setting this to your background color, and setting the linewidth to approx. 5, it will make the pie chart look "exploded".
Default: #999

+ +

Labels and text

+chart.text.size
+ The size of the text (in points).
Default: 10

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.labels
+ An array of labels to be used for the chart.
Default: [] (an empty array)

+ +chart.labels.sticks
+ Stipulates that small sticks for the labels are shown. The example page has an example of this.
Default: false

+ +chart.labels.sticks.color
+ Sets the color of the label sticks.
Default: #aaa

+ +

Titles

+chart.title
+ The title of the pie chart.
Default: none

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +

Shadows

+chart.shadow
+ Whether a simple shadow effect is applied.
Default: false

+ +chart.shadow.color
+ The color of the shadow.
Default: rgba(0,0,0,0.5)

+ +chart.shadow.blur
+ The severity of the shadow blurring effect.
Default: 3

+ +chart.shadow.offsetx
+ The X offset of the shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset of the shadow.
Default: 3

+ +

Interactive features

+ + + chart.tooltips
+ An array of tooltips, starting from the middle right (ie east) axis, and going clockwise sequentially.
+ Default: [] (An empty array)

+ + + chart.tooltips.event
+ This can be onclick or onmousemove and determines which event is used for tooltips.
+ Default: onclick

+ + + chart.tooltips.effect
+ The animated effect used for showing tooltips. Can be either fade or expand.
+ Default: fade

+ + + chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
+ Default: RGraph_tooltip

+ + + chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more + information on the tooltips documentation page
+ Default: null

+ + + +chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ + + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + + +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ +

Scale

+chart.units.pre
+ The units that the value is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50" and is only used if chart.value.text is true.
Default: none

+ +chart.units.post
+ The units that the value is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms" and is only used if chart.value.text is true.
Default: none

+ +

Miscellaneous

+chart.align
+ Whether to left, center or right align the pie chart.
Default: center

+ +chart.linewidth
+ By setting this to roughly 5, and setting the strokestyle to the same colour as your background colour,you will get a segment separation effect.
Default: 1

+ +chart.variant
+ This can be either pie (the default) or donut. Setting this to donut is how you get a donut chart.
Default: pie

+ +chart.value.text
+ Set this to true if you want the value displayed in text beow the center of the pointer.
Default: false

+ + + chart.highlight.style
+ Can be either 2d or 3d and determines which style of segment highlighting is used in + conjunction with tooltips.
+ Default: 2d

+ + + chart.highlight.style.2d.color
+ When 2D highlighting for tooltips is used, this controls the color of the highlighting.
+ Default: rgba(255,255,255,0.5)

+ + + +
 
+

Methods

+ + RGraph.getSegment()

+ + RGraph.getSegment() makes it easy to determine which segment of the Pie chart was clicked on. It provides: + + + + 
+<script>
+    RGraph.Register(myGraph);
+    
+    myGraph.canvas.onclick = function (e)
+    {
+        RGraph.FixEventObject(e);
+        RGraph.Redraw();
+
+        var canvas  = e.target;
+        var context = canvas.getContext('2d');
+        var obj     = canvas.__object__;
+        var segment = RGraph.getSegment(e);
+        
+        if (segment) {
+            context.fillStyle = 'rgba(255,255,255,0.5)';
+            context.beginPath();
+                
+                // Angles are provided in degrees, so convert them to radians
+                segment[3] /= 57.29;
+                segment[4] /= 57.29;
+            
+                context.moveTo(segment[0], segment[1]);
+                context.arc(segment[0], segment[1], segment[2], segment[3], segment[4], 0);
+            context.stroke();
+            context.fill();
+            
+            e.stopPropagation();
+        }
+    }
+    
+    window.onclick = function (e)
+    {
+        RGraph.Redraw();
+    }
+</script>
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/png.html b/RGraph/docs/png.html new file mode 100644 index 0000000..1c4c676 --- /dev/null +++ b/RGraph/docs/png.html @@ -0,0 +1,249 @@ + + + + + + + RGraph: HTML5 canvas graph library - Retrieving a PNG of your graph + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Retrieving a PNG of your graph

+ + + + + +
+ Get PNG + [No canvas support] +
+ + +

+ RGraph provides an easy way to get a PNG image of your graph. This allows you to + easily save the image locally to use in (for example) a document, spreadsheet or presentation. +

+ +

+ Originally, the function was designed to be used with a context menu, so it is located in the RGraph.common.context.js. + Now though, you do not have to use the function with a context menu, and can instead pass in the canvas as the optional argument. There's an + example of its usage on the first Tradar example. +

+ +
+ +

Include the context menu code:

+ 
<script src="../libraries/RGraph.common.context.js" ></script>
+ +

Add the context menu:

+ 
+myGraph.Set('chart.contextmenu', [
+                                  ['Get PNG', RGraph.showPNG],
+                                  null,
+                                  ['Cancel', function () {}]
+                                 ]);
+ +

Using the function without a context menu

+ +

+ If you want to use the function with a piece of text (or an image) as the "link", optionally positioned over the canvas, you can pass + the canvas into the function as an argument, along with the event object. +

+ + 
+<!-- This CSS positions the link over the top right of the canvas -->
+<style>
+    span#png_link {
+        position: absolute;
+        left: 450px;
+        top: 30px;
+        border: 1px black solid;
+        padding: 1px;
+        background-color: #eee;
+        cursor: pointer;
+    }
+</style>
+
+<div style="position: relative">
+    <span id="png_link" onclick="RGraph.showPNG(myCanvas, event)">Get PNG</span>
+    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
+</div>
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/released.txt b/RGraph/docs/released.txt new file mode 100644 index 0000000..c82ed8a --- /dev/null +++ b/RGraph/docs/released.txt @@ -0,0 +1,416 @@ +This version released on: Fri, 24 Dec 2010 12:51:38 +0000 + +A RGraph +A RGraph/RGraph_ChromeExtension_sample.zip +A RGraph/tests.old +A RGraph/tests.old/ramon.html +A RGraph/tests.old/animated_meter.html +A RGraph/tests.old/context.html +A RGraph/tests.old/zoom.html +A RGraph/tests.old/kwong.html +A RGraph/tests.old/clear.html +A RGraph/tests.old/key.html +A RGraph/tests.old/getPoint.html +A RGraph/tests.old/grafica.html +A RGraph/tests.old/lots-of-points.html +A RGraph/tests.old/above.bar.html +A RGraph/tests.old/set.config.html +A RGraph/tests.old/getSegment.html +A RGraph/tests.old/ralphoid.html +A RGraph/tests.old/pointers.html +A RGraph/tests.old/test4.html +A RGraph/tests.old/scatter_crosshairs.html +A RGraph/tests.old/test6.html +A RGraph/tests.old/browsers.html +A RGraph/tests.old/smoothing.html +A RGraph/tests.old/null.values.html +A RGraph/tests.old/scale2.html +A RGraph/tests.old/boxplots.html +A RGraph/tests.old/sparklines.html +A RGraph/tests.old/getGutterSuggest.html +A RGraph/tests.old/ymin.html +A RGraph/tests.old/scatter_yvalues.html +A RGraph/tests.old/tooltips.html +A RGraph/tests.old/crosshairs.html +A RGraph/tests.old/ajax.html +A RGraph/tests.old/rose.ymin.html +A RGraph/tests.old/gantt-xmin.html +A RGraph/tests.old/scale.html +A RGraph/tests.old/tickmarks.html +A RGraph/tests.old/noxaxis.html +A RGraph/tests.old/ingraph.labels.html +A RGraph/tests.old/animated_line.html +A RGraph/tests.old/line.arguments.html +A RGraph/tests.old/msie.html +A RGraph/tests.old/ie-events.html +A RGraph/tests.old/chrome-text.html +A RGraph/tests.old/trends.html +A RGraph/tests.old/3D-effect.html +A RGraph/tests.old/out-of-bounds.html +A RGraph/tests.old/resize.html +A RGraph/tests.old/mfrancis.html +A RGraph/tests.old/rscatter.ymin.html +A RGraph/tests.old/scatter_vbars.html +A RGraph/tests.old/test3.html +A RGraph/tests.old/smallrunedex.html +A RGraph/tests.old/getBar.html +A RGraph/tests.old/scatter.html +A RGraph/tests.old/log-scale.html +A RGraph/tests.old/kwong2.html +A RGraph/tests.old/highlight.html +A RGraph/tests.old/shadows.html +A RGraph/tests.old/missing.html +A RGraph/tests.old/animated_rose.html +A RGraph/tests.old/scale3.html +A RGraph/robots.txt +A RGraph/scripts +A RGraph/scripts/makedocs.sh +A RGraph/scripts/generate_xml.php +A RGraph/scripts/diff.sh +A RGraph/scripts/makexml.sh +A RGraph/scripts/generate_docs.php +A RGraph/scripts/tests.php +A RGraph/scripts/release.sh +A RGraph/scripts/index.html +A RGraph/scripts/minify +A RGraph/docs +A RGraph/docs/hprogress.html +A RGraph/docs/meter.html +A RGraph/docs/gantt.html +A RGraph/docs/.BC.txt +A RGraph/docs/async.html +A RGraph/docs/tradar.html +A RGraph/docs/color.html +A RGraph/docs/animation.html +A RGraph/docs/.CHANGELOG.txt +A RGraph/docs/odo.html +A RGraph/docs/external.html +A RGraph/docs/context.html +A RGraph/docs/zoom.html +A RGraph/docs/downloads +A RGraph/docs/adjusting.html +A RGraph/docs/css.html +A RGraph/docs/ingraph.html +A RGraph/docs/vprogress.html +A RGraph/docs/.htaccess +A RGraph/docs/licensing.html +A RGraph/docs/hbar.html +A RGraph/docs/combine.html +A RGraph/docs/pie.html +A RGraph/docs/tooltips.html +A RGraph/docs/setconfig.html +A RGraph/docs/domcontentloaded.html +A RGraph/docs/dynamic.html +A RGraph/docs/png.html +A RGraph/docs/forum +A RGraph/docs/funnel.html +A RGraph/docs/line.html +A RGraph/docs/rscatter.html +A RGraph/docs/zoom_thumbnail.html +A RGraph/docs/bipolar.html +A RGraph/docs/donut.html +A RGraph/docs/resizing.html +A RGraph/docs/misc.html +A RGraph/docs/msie.html +A RGraph/docs/.TODO.txt +A RGraph/docs/annotating.html +A RGraph/docs/events.html +A RGraph/docs/bar.html +A RGraph/docs/led.html +A RGraph/docs/scatter.html +A RGraph/docs/index.html +A RGraph/docs/forums +A RGraph/docs/rose.html +A RGraph/docs/api.html +A RGraph/docs/keys.html +A RGraph/docs/issues.html +A RGraph/docs/examples +A RGraph/css +A RGraph/css/common.css +A RGraph/css/ModalDialog.css +A RGraph/css/website.css +A RGraph/css/index.html +A RGraph/css/.htaccess +A RGraph/analog.css +A RGraph/downloads +A RGraph/example-images +A RGraph/example-images/gauge.png +A RGraph/example-images/fuel.png +A RGraph/invoice.html +A RGraph/LICENSE.txt +A RGraph/screenshots +A RGraph/screenshots/led.png +A RGraph/screenshots/bar.png +A RGraph/screenshots/scatter.png +A RGraph/screenshots/rose.png +A RGraph/screenshots/meter.png +A RGraph/screenshots/hprogress.png +A RGraph/screenshots/hbar.png +A RGraph/screenshots/tradar.png +A RGraph/screenshots/pie.png +A RGraph/screenshots/gantt.png +A RGraph/screenshots/odo.png +A RGraph/screenshots/rscatter.png +A RGraph/screenshots/line.png +A RGraph/screenshots/funnel.png +A RGraph/screenshots/bipolar.png +A RGraph/screenshots/donut.png +A RGraph/screenshots/vprogress.png +A RGraph/sitemap.xml +A RGraph/tests +A RGraph/tests/_pie.html +A RGraph/tests/_odo.html +A RGraph/tests/eric.html +A RGraph/tests/chrome6-shadow.html +A RGraph/tests/_rscatter.html +A RGraph/tests/_line.html +A RGraph/tests/css-2D-transforms.html +A RGraph/tests/_bipolar.html +A RGraph/tests/thermometer +A RGraph/tests/thermometer/RGraph.thermometer.js +A RGraph/tests/thermometer/index.html +A RGraph/tests/_vprogress.html +A RGraph/tests/thomas.html +A RGraph/tests/border-radius.html +A RGraph/tests/_bar.html +A RGraph/tests/_scatter.html +A RGraph/tests/scatter_animated.html +A RGraph/tests/GetHeight.html +A RGraph/tests/_hprogress.html +A RGraph/tests/_hbar.html +A RGraph/images +A RGraph/images/barg2.png +A RGraph/images/barg4.png +A RGraph/images/analogo.gif +A RGraph/images/twitter.png +A RGraph/images/barg8.png +A RGraph/images/barc1.gif +A RGraph/images/bara32.png +A RGraph/images/barg2.gif +A RGraph/images/bare32.png +A RGraph/images/bard16.png +A RGraph/images/barg4.gif +A RGraph/images/bari32.png +A RGraph/images/barh16.png +A RGraph/images/barg8.gif +A RGraph/images/html2.png +A RGraph/images/alex.png +A RGraph/images/bard2.png +A RGraph/images/sqg.png +A RGraph/images/bara32.gif +A RGraph/images/bard4.png +A RGraph/images/barh1.png +A RGraph/images/bare32.gif +A RGraph/images/bard16.gif +A RGraph/images/bard8.png +A RGraph/images/bari32.gif +A RGraph/images/barh16.gif +A RGraph/images/html2.gif +A RGraph/images/download-stable-sml.png +A RGraph/images/bard2.gif +A RGraph/images/bard4.gif +A RGraph/images/barh1.gif +A RGraph/images/bard8.gif +A RGraph/images/bara2.png +A RGraph/images/bara4.png +A RGraph/images/bare1.png +A RGraph/images/bara8.png +A RGraph/images/bari2.png +A RGraph/images/bari4.png +A RGraph/images/bari8.png +A RGraph/images/download.png +A RGraph/images/bara2.gif +A RGraph/images/download-beta-sml.png +A RGraph/images/bara4.gif +A RGraph/images/bare1.gif +A RGraph/images/favicon.ico +A RGraph/images/icons_combined.png +A RGraph/images/reddit.png +A RGraph/images/bard32.png +A RGraph/images/bara8.gif +A RGraph/images/barc16.png +A RGraph/images/bari2.gif +A RGraph/images/barh32.png +A RGraph/images/bari4.gif +A RGraph/images/barg16.png +A RGraph/images/context.png +A RGraph/images/bari8.gif +A RGraph/images/barb1.png +A RGraph/images/.htaccess +A RGraph/images/barf2.png +A RGraph/images/chrome_logo.png +A RGraph/images/barf4.png +A RGraph/images/bard32.gif +A RGraph/images/barj1.png +A RGraph/images/barc16.gif +A RGraph/images/introspection.png +A RGraph/images/border-radius.png +A RGraph/images/barh32.gif +A RGraph/images/barf8.png +A RGraph/images/barg16.gif +A RGraph/images/sq0.png +A RGraph/images/sq2.png +A RGraph/images/coins.jpg +A RGraph/images/sq4.png +A RGraph/images/barb1.gif +A RGraph/images/facebook.png +A RGraph/images/sq6.png +A RGraph/images/png.icon.png +A RGraph/images/sq8.png +A RGraph/images/barf2.gif +A RGraph/images/barf4.gif +A RGraph/images/barj1.gif +A RGraph/images/barf8.gif +A RGraph/images/favicon.png +A RGraph/images/barc2.png +A RGraph/images/barc4.png +A RGraph/images/barg1.png +A RGraph/images/barc8.png +A RGraph/images/structure.png +A RGraph/images/barc2.gif +A RGraph/images/stumble.png +A RGraph/images/barc32.png +A RGraph/images/barc4.gif +A RGraph/images/barg1.gif +A RGraph/images/barb16.png +A RGraph/images/barg32.png +A RGraph/images/barc8.gif +A RGraph/images/download-beta.png +A RGraph/images/barf16.png +A RGraph/images/barj16.png +A RGraph/images/bard1.png +A RGraph/images/barc32.gif +A RGraph/images/barh2.png +A RGraph/images/barb16.gif +A RGraph/images/barh4.png +A RGraph/images/barg32.gif +A RGraph/images/barf16.gif +A RGraph/images/barh8.png +A RGraph/images/barj16.gif +A RGraph/images/rss.png +A RGraph/images/merry-christmas-snowman.png +A RGraph/images/bard1.gif +A RGraph/images/barh2.gif +A RGraph/images/barh4.gif +A RGraph/images/barh8.gif +A RGraph/images/bara1.png +A RGraph/images/bare2.png +A RGraph/images/friendfeed.png +A RGraph/images/bare4.png +A RGraph/images/bari1.png +A RGraph/images/logo.png +A RGraph/images/bare8.png +A RGraph/images/bara1.gif +A RGraph/images/unicef.png +A RGraph/images/barb32.png +A RGraph/images/bara16.png +A RGraph/images/bare2.gif +A RGraph/images/googlegroups.png +A RGraph/images/bare4.gif +A RGraph/images/bari1.gif +A RGraph/images/barf32.png +A RGraph/images/bare16.png +A RGraph/images/bn.personal.png +A RGraph/images/bare8.gif +A RGraph/images/barj32.png +A RGraph/images/bari16.png +A RGraph/images/barb2.png +A RGraph/images/bn.business.png +A RGraph/images/barb4.png +A RGraph/images/barf1.png +A RGraph/images/barb32.gif +A RGraph/images/bara16.gif +A RGraph/images/barb8.png +A RGraph/images/buy.png +A RGraph/images/barj2.png +A RGraph/images/barf32.gif +A RGraph/images/atom.png +A RGraph/images/bare16.gif +A RGraph/images/barj4.png +A RGraph/images/barj32.gif +A RGraph/images/sq1.png +A RGraph/images/bari16.gif +A RGraph/images/barj8.png +A RGraph/images/sq3.png +A RGraph/images/sq5.png +A RGraph/images/barb2.gif +A RGraph/images/sq7.png +A RGraph/images/barb4.gif +A RGraph/images/barf1.gif +A RGraph/images/sq9.png +A RGraph/images/barb8.gif +A RGraph/images/download-stable.png +A RGraph/images/analogo.png +A RGraph/images/delicious.png +A RGraph/images/barj2.gif +A RGraph/images/barj4.gif +A RGraph/images/barj8.gif +A RGraph/images/index.html +A RGraph/images/barc1.png +A RGraph/images/rss_big.png +A RGraph/images/buzz.png +A RGraph/captcha.html +A RGraph/favicon.png +A RGraph/excanvas +A RGraph/excanvas/EXCANVAS-LICENSE.txt +A RGraph/excanvas/excanvas.compressed.js +A RGraph/excanvas/excanvas.original.js +A RGraph/excanvas/.htaccess +A RGraph/excanvas/HTACCESS-SAMPLE +A RGraph/info.txt +A RGraph/index.html +A RGraph/404.html +A RGraph/.htaccess +A RGraph/libraries +A RGraph/libraries/RGraph.skeleton.js +A RGraph/libraries/RGraph.line.js +A RGraph/libraries/RGraph.funnel.js +A RGraph/libraries/RGraph.rscatter.js +A RGraph/libraries/RGraph.bipolar.js +A RGraph/libraries/RGraph.vprogress.js +A RGraph/libraries/RGraph.common.annotate.js +A RGraph/libraries/RGraph.led.js +A RGraph/libraries/RGraph.common.tooltips.js +A RGraph/libraries/RGraph.bar.js +A RGraph/libraries/RGraph.scatter.js +A RGraph/libraries/RGraph.rose.js +A RGraph/libraries/RGraph.common.zoom.js +A RGraph/libraries/RGraph.common.context.js +A RGraph/libraries/RGraph.hprogress.js +A RGraph/libraries/RGraph.hbar.js +A RGraph/libraries/RGraph.meter.js +A RGraph/libraries/RGraph.modaldialog.js +A RGraph/libraries/RGraph.gantt.js +A RGraph/libraries/RGraph.pie.js +A RGraph/libraries/RGraph.tradar.js +A RGraph/libraries/index.html +A RGraph/libraries/.htaccess +A RGraph/libraries/RGraph.common.core.js +A RGraph/libraries/RGraph.common.adjusting.js +A RGraph/libraries/RGraph.common.resizing.js +A RGraph/libraries/RGraph.odo.js +A RGraph/examples +A RGraph/examples/meter.html +A RGraph/examples/hprogress.html +A RGraph/examples/hbar.html +A RGraph/examples/showcase.html +A RGraph/examples/pie.html +A RGraph/examples/gantt.html +A RGraph/examples/tradar.html +A RGraph/examples/odo.html +A RGraph/examples/basic.html +A RGraph/examples/text.html +A RGraph/examples/line.html +A RGraph/examples/funnel.html +A RGraph/examples/rscatter.html +A RGraph/examples/bipolar.html +A RGraph/examples/donut.html +A RGraph/examples/vprogress.html +A RGraph/examples/led.html +A RGraph/examples/bar.html +A RGraph/examples/scatter.html +A RGraph/examples/index.html +A RGraph/examples/rose.html +A RGraph/examples/.htaccess +A RGraph/common.php +Exported revision 1358. diff --git a/RGraph/docs/resizing.html b/RGraph/docs/resizing.html new file mode 100644 index 0000000..53af352 --- /dev/null +++ b/RGraph/docs/resizing.html @@ -0,0 +1,212 @@ + + + + + + + RGraph: HTML5 canvas graph library - Resizing your graphs + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Resizing your graphs

+ + + + [No canvas support] + +

 

+ +

+ RGraph has the facility to allow you to resize your graphs. This is new as of 10th April 2010. Because of the + numerous events it has to install code on, it is unlikely to work with other dynamic features. The context + menu does though, and now that tooltips use DOM2 events, so do they. It can be useful if you are, + for example, doing a presentation and need to enlarge the graph. +

+ +

+ All you need to do to enable it is set chart.resizable to true. There are certain caveats that you should be aware of though: +

+ +
+ + + + + \ No newline at end of file diff --git a/RGraph/docs/rose.html b/RGraph/docs/rose.html new file mode 100644 index 0000000..e965c3b --- /dev/null +++ b/RGraph/docs/rose.html @@ -0,0 +1,442 @@ + + + + + + + RGraph: HTML5 canvas graph library - rose chart documentation + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Rose chart documentation

+ + + +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var data = [41,37,16,3,3];
+    
+        var rose = new RGraph.Rose('myRose', data);
+        rose.Set('chart.labels', ['MSIE 7 (41%)',
+                                  'MSIE 6 (37%)',
+                                  'Firefox (16%)',
+                                  'Safari (3%)',
+                                  'Other (3%)']);
+        rose.Draw();
+    }
+</script>
+
+ + + + +

Properties

+ +

+ You can use these properties to control how the Rose chart appears. You can set them by using the Set() method. Eg: +

+ +

+ myRose.Set('name', 'value'); +

+ + + + + + +

Margins

+chart.gutter
+ The gutter used on the chart
Default: 25

+ +

Colors

+chart.colors
+ An array of colors to be used by the chart.
Default: ['rgb(255,0,0)', 'rgb(0,255,255)', 'rgb(0,255,0)', 'rgb(127,127,127)', 'rgb(0,0,255)', 'rgb(255,128,255)']

+ +chart.colors.alpha
+ Instead of using rgba(), you can use color definitions such as red along with this setting to add transparency.
Default: null

+ +

Labels and text

+chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size of the text (in points).
Default: 10

+ +chart.labels
+ The labels, if any, for the graph.
Default: none

+ +chart.labels.axes
+ This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)
Default: nsew

+ +chart.labels.position
+ This can be either center or edge and determines the position of the labels.
Default: center

+ +

Titles

+chart.title
+ The title of the chart.
Default: none

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ + +

Axis properties

+ chart.ymax
+ This can be set to control the maximum value of the scale. It's so called to maintain a degree of API compatibility across graph libraries.
Default: null

+ + +

Scale

+ + + chart.scale.round
+ Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.
+ Default: null

+ + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + + +

Interactive features

+chart.tooltips
+ An array of tooltips. You can use HTML if you so wish.
Default: [] (An empty array)

+ +chart.tooltips.effect
+ The tooltip effect used. Can be either fade or expand.
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +chart.adjustable
+ Defaulting to false, this determines whether your rose chart will be adjustable (click the edge of a segment and drag to adjust it).
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ + + +
 
+

Methods

+ + RGraph.getSegment()

+ + RGraph.getSegment() makes it easy to determine which segment of the Rose chart was clicked on. It provides: + + + + 
+<script>
+    RGraph.Register(myGraph);
+    
+    myGraph.canvas.onclick = function (e)
+    {
+        RGraph.FixEventObject(e);
+        RGraph.Redraw();
+
+        var canvas  = e.target;
+        var context = canvas.getContext('2d');
+        var obj     = canvas.__object__;
+        var segment = RGraph.getSegment(e);
+        
+        if (segment) {
+            context.fillStyle = 'rgba(255,255,255,0.5)';
+            context.beginPath();
+                
+                // Angles are provided in degrees, so convert them to radians
+                segment[3] /= 57.29;
+                segment[4] /= 57.29;
+            
+                context.moveTo(segment[0], segment[1]);
+                context.arc(segment[0], segment[1], segment[2], segment[3], segment[4], 0);
+            context.stroke();
+            context.fill();
+            
+            e.stopPropagation();
+        }
+    }
+    
+    window.onclick = function (e)
+    {
+        RGraph.Redraw();
+    }
+</script>
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/rscatter.html b/RGraph/docs/rscatter.html new file mode 100644 index 0000000..e72ee56 --- /dev/null +++ b/RGraph/docs/rscatter.html @@ -0,0 +1,370 @@ + + + + + + RGraph: HTML5 canvas graph library - Radial scatter chart documentation + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Radial scatter chart documentation

+ + + +

+ The Radial scatter graph is, as the name suggests, a circular variant of the scatter graph. +

+ +

+ The example file is here. +

+ + 
 
+<script>
+    window.onload = function ()
+    {
+        var data = [
+                    [15,53,'red'],
+                    [45,63,null, 'The tooltip'],
+                    [48,45,'green'],
+                    [52,38],
+                    [51,61]
+                   ];
+
+        var rscatter= new RGraph.Rscatter('myCanvas', data);
+        rscatter.Set('chart.labels', ['NE','E','SE','S','SW','W','NW','N']);
+        rscatter.Set('chart.gutter', 35);
+        rscatter.Draw();
+    }
+</script>
+
+ +

Properties

+ +

+ You can use these properties to control how the chart appears. You can set them by using the Set() method. Eg: +

+ +

+ myRscatter.Set('name', 'value'); +

+ + + + + +

Margins

+chart.gutter
+ The gutter of the graph. This is the area outside of the X and Y axis - where the labels go. If you're short on space for your labels, try increasing this.
Default: 25

+ +

Labels and text

+chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size (in points) of the labels.
Default: 10

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.labels
+ The labels, if any, for the graph.
Default: none

+ +chart.labels.axes
+ This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)
Default: nsew

+ +chart.labels.position
+ This can be either center or edge and determines the position of the labels.
Default: center

+ +

Titles

+chart.title
+ The title of the graph, if any.
Default: null

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ + + + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + + +

Interactive features

+chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.tooltips.effect
+ The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade

+ +chart.tooltips.event
+ This is the event that triggers the tooltips. It can be either onclick or onmousemove.
Default: onclick

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ +

+ + + \ No newline at end of file diff --git a/RGraph/docs/scatter.html b/RGraph/docs/scatter.html new file mode 100644 index 0000000..c269758 --- /dev/null +++ b/RGraph/docs/scatter.html @@ -0,0 +1,683 @@ + + + + + + + RGraph: HTML5 canvas graph library - scatter graph documentation + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Scatter graph documentation

+ + + +

+ A scatter graph. Used to represent many data points over a period of time. For example, events occurring in a given year. +

+ +

+ The example file is here. +

+ + + + 
+<script>
+    window.onload = function ()
+    {
+        var data = [
+                    [67,78,null, 'The winner!'], [67,40,'red'], [58,12], [78,56], [365,90], [360,300], [320,150], [15,45],
+                    [16,43], [84,12], [67,89,'green'], [90,23,'green'], [23,80], [80,66], [55,66], [88,12], [43,45], [61,12],
+                    [15,89], [13,16]
+                   ];
+        var sg = new RGraph.Scatter('myScatter', data);
+        sg.Set('chart.background.barcolor1','rgba(255,255,255,1)');
+        sg.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
+        sg.Set('chart.grid.color', 'rgba(238,238,238,1)');
+        sg.Set('chart.gutter', 30);
+        sg.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        sg.Set('chart.xmax', 365); // Important!
+        sg.Draw();
+    }
+</script>
+
+ +

+ As you can see each mark on the Scatter chart is made by supplying an array of up to 4 elements: +

+ + + +

+ If you wish to specify a tooltip, but not a color (ie use the default color instead), you can pass null instead of a color. +

+ + + +

Properties

+ +

+ You can use these properties to control how the Scatter apears. You can set them by using the Set() method. Eg: +

+ +

+ myScatter.Set('chart.xmax', 365); +

+ + + + + +

Background

+chart.background.barcolor1
+ The color of the background bars.
Default: rgba(0,0,0,0)

+ +chart.background.barcolor2
+ The color of the background bars.
Default: rgba(0,0,0,0)

+ +chart.background.grid
+ Whether to show the background grid or not.
Default: true

+ +chart.background.grid.color
+ The color of the background grid.
Default: #eee

+ + + chart.background.hbars
+ An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: + + 
myScatter.Set('chart.background.hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);
+ + This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the + starting point and the height.
+ Default: null

+ + chart.background.vbars
+ An array of vertical bar information. They're specified like his: + 
myScatter.Set('chart.background.vbars', [[0, 181, 'rgba(0,255,0,0.5)']]);
+ Default: null

+ + +chart.background.grid.border
+ Determines whether a border line is drawn around the grid.
Default: true

+ +chart.background.grid.hlines
+ Determines whether to draw the horizontal grid lines.
Default: true

+ +chart.background.grid.vlines
+ Determines whether to draw the vertical grid lines.
Default: true

+ +chart.background.grid.autofit
+ Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.
Default: false

+ +chart.background.grid.autofit.numhlines
+ When using autofit this allows you to specify how many horizontal grid lines you want.
Default: 7

+ +chart.background.grid.autofit.numvlines
+ When using autofit this allows you to specify how many vertical grid lines you want.
Default: 20

+ +

Labels and text

+chart.labels
+ An array of the X labels for the graph.
Default: [] (An empty array)

+ +chart.ylabels
+ A boolean (true or false) that controls whether the graph has Y labels.
Default: true

+ +chart.ylabels.count
+ A value (1, 3 or 5) that controls how many Y labels there are.
Default: 5

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size of the text (in points).
Default: 10

+ +chart.text.angle
+ The angle of the horizontal text labels (at the bottom of the graph). This can be one of three values - 0, 45 or 90.
Default: 0 (Horizontal)

+ +

Margins

+chart.gutter
+ The gutter on the graph (the area outside of the axes).
Default: 25

+ +

Axis properties

+chart.xmax
+ The maximum X axis value you wish to set. For example if you're displaying products sold in a year, you might use 365.
Default: none - must be supplied

+ +chart.ymax
+ The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)

+ +chart.ymin
+ The optional minimum Y scale value. If not specified it will be zero.
Default: null

+ +chart.ticksize
+ The size of the tickmarks.
Default: 3

+ +chart.tickmarks
+ The style of the tickmarks. Can be: cross, plus, circle, diamond, square or null (no tickmarks).
Default: cross

+ +chart.xticks
+ This controls whether the X axis tickmarks are drawn.
Default: true

+ +chart.noendxtick
+ Whether to draw an end X tick. Usually used when combining Scatter charts
Default: false

+ +chart.xaxis
+ This controls whether the X axis is drawn.
Default: true

+ +chart.xaxispos
+ Where the X axis should be drawn. Can be either center or bottom.
Default: bottom

+ +chart.yaxispos
+ Where the Y axis should be drawn. Can be either left or right.
Default: left

+ +chart.yaxispos
+ Where the Y axis should be drawn. Can be either left or right.
Default: left

+ +chart.axis.color
+ The color of the axes.
Default: black

+ +chart.noaxes
+ If this is set to true, no axes will be drawn.
Default: false

+ +

Titles

+chart.title
+ The title of the scatter graph.
Default: none

+ + +chart.title.background
+The background color (if any) for the title.
+Default: null

+ + +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.xaxis
+ This allows to specify a title for the X axis.
Default: none

+ +chart.title.yaxis
+ This allows to specify a title for the Y axis.
Default: none

+ +chart.title.xaxis.pos
+ This is multiplied with the gutter to give the position of the X axis title.
Default: 0.25

+ +chart.title.yaxis.pos
+ This is multiplied with the gutter to give the position of the Y axis title.
Default: 0.25

+ + +

Scale

+chart.scale.decimals
+ The number of decimal places to display for the Y scale.
Default: 0

+ +chart.scale.point
+ The character used as the decimal point.
Default: .

+ +chart.scale.thousand
+ The character used as the thousand separator
Default: ,

+ + + chart.scale.round
+ Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.
+ Default: null

+ + +chart.units.pre
+ The units (if any) that the Y axis is measured in (these are preppended to the number).
Default: none

+ +chart.units.post
+ The units (if any) that the Y axis is measured in (these are appended to the number).
Default: none

+ + +

Interactive features

+ +

+ Note: Unlike other charts, the Scatter chart tooltips are specified as part of the data array. See above. +

+ + + chart.tooltips.effect
+ The animated effect used for showing tooltips.
+ Default: fade

+ + +chart.tooltips.hotspot
+ This controls the size of the hotspot on the chart for tooltips.
Default: 3

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.tooltips.coords.adjust
+ If you translate() before drawing your graph to reduce wasted space, the coords used for tooltips may need adjusting by how much you translate() by. This setting is how to do it. It should be an array of the X/Y adjustments. There's an example of this on the misc documentation page.
Default: [0,0]

+ +chart.crosshairs
+ If true, you will get a crosshair centering on the current mouse position.
Default: false

+ +chart.crosshairs.linewidth
+ This controls the linewidth of the crosshairs.
Default: 1

+ +chart.crosshairs.color
+ The color of the crosshairs.
Default: #333

+ +chart.crosshairs.coords
+ If true, this will show the coordinates that the crosshairs are currently over.
Default: false

+ +chart.crosshairs.fixed
+ If true, this makes the coordinates static (attached), instead of following the pointer around.
Default: false

+ +chart.crosshairs.fadeout
+ If true, when you move your mouse off of the canvas the coordinates will fade out.
Default: false

+ +chart.crosshairs.labels.x
+ Instead ox X and Y, you can specify more meaningful labels.
Default: X

+ +chart.crosshairs.labels.y
+ Instead ox X and Y, you can specify more meaningful labels.
Default: Y

+ +chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: null

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: #000

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Line properties

+chart.line
+ Whether to show a connecting line (like in the sixth example).
Default: false

+ +chart.line.colors
+ The colors of the lines connecting the tick marks.
Default: ['green', 'red']

+ +chart.line.shadow.color
+ The color of the lines shadow (if any).
Default: rgba(0,0,0,0) (invisible)

+ +chart.line.shadow.offsetx
+ The X offset of the lines shadow.
Default: 3

+ +chart.line.shadow.offsety
+ The Y offset of the lines shadow.
Default: 3

+ +chart.line.shadow.blur
+ The severity of the line shadows blurring effect.
Default: 2

+ +chart.line.stepped
+ Like the line chart, Scatter chart lines can be stepped by setting this to true
Default: false

+ + + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + + + + +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+ +

Miscellaneous

+chart.defaultcolor
+ This is the default color of tick marks, which is used if a color isn't given.
Default: #000

+ +chart.boxplot.width
+ This stipulates the default width of boxes. For more on boxplots, see here.
Default: 8

+

+ + +

Box plots

+ +

+ Instead of a single Y value, you have the ability to specify an array of 5, 6, 7 or 8 values, which will be used to make a box plot. + The example page shows a box plot. These values are (in order): + +

+ + 
+<script>
+    scatter8 = new RGraph.Scatter('scatter8', [
+                                               [10,[1,1,16,24,24, 'red', 'green']],
+                                               [105,[5,10,15,25,25, 'red', 'green']],
+                                               [125,[10,15,25,35,45, 'red', 'green']],
+                                               [325,[10,15,25,35,45, 'red', 'green', 30]]
+                                              ]);
+    scatter8.Set('chart.title', 'An example of a boxplot');
+    scatter8.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']);
+    scatter8.Set('chart.xmax', 365);
+    scatter8.Set('chart.ymax', 50);
+    scatter8.Set('chart.boxplot.width', 12); // The default width
+    scatter8.Draw();
+</script>
+
+

+ + + +

Specific points for labels on the X axis

+ +

+ Instead of a simple string which is used as the label, each entry of the chart.labels array can be a two element array + consisting of the label, and the X value that the label should be placed at. For example: +

+ + 
+scatter.Set('chart.labels', [
+                             ['Quarter 1', 0],
+                             ['Quarter 2', 90],
+                             ['Quarter 3', 181],
+                             ['Quarter 4', 273]
+                            ]);
+
+ + + + +

Custom tickmarks

+ +

+ If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark, + enabling you to draw the tickmark yourself. For example: +

+ + 
+<script>
+    line.Set('chart.tickmarks', myTick);
+
+    /**
+    * The function that is called once per tickmark, to draw it
+    * 
+    * @param object obj   The graph object
+    * @param object data  The graph data
+    * @param number x     The X coordinate
+    * @param number y     The Y coordinate
+    * @param number xVal  The X value
+    * @param number yVal  The Y value
+    * @param number xMax  The maximum X scale value
+    * @param number xMax  The maximum Y scale value
+    * @param string color The color of the tickmark
+    */
+    function myTick (obj, data, x, y, xVal, yVal, xMax, yMax, color)
+    {
+        // Draw your custom tick here
+    }
+</script>
+
+ + +

Note about colors and the key

+ +

+ If you're using a key you may need to set chart.line.colors to allow it to use the correct colors. For example: +

+ + 
myObj.Set('chart.line.colors', ['red','green','blue']);
+ + \ No newline at end of file diff --git a/RGraph/docs/setconfig.html b/RGraph/docs/setconfig.html new file mode 100644 index 0000000..ca056bd --- /dev/null +++ b/RGraph/docs/setconfig.html @@ -0,0 +1,206 @@ + + + + + + + RGraph: HTML5 canvas graph library - API documentation + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - The RGraph.SetConfig() function

+ + + + +
+ A graph showing RGraph.SetConfig()
+ [No canvas support] +
+ + + +

+ Instead of using a number of .Set() calls, you may find that using the RGraph.SetConfig() method more to your tastes. The + method is an alternative to setting the configuration of your graph. It can also facilitate reuse better, so that the + appearance of all of your websites charts is the same. There's an example of its use below: +

+ +
+ + 
+<script>
+    window.onload = function ()
+    {
+        /**
+        * This configuration could be stored in a central configuration file, making its reuse easier. You could also have
+        * several different configurations that you pick and choose from depending on the requirements. Values in
+        * subsequent calls to .SetConfig() will overwrite previous ones.
+        */
+        var config = {
+                      'chart.colors':                  ['red', 'green'],
+                      'chart.labels':                  ['John','Fred','June','Charles','Lou', 'Olga'],
+                      'chart.title.yaxis':             'Amount',
+                      'chart.title.yaxis.pos':         -0.2,
+                      'chart.title.xaxis':             'Person',
+                      'chart.background.grid.autofit': true
+                     }
+        var bar = new RGraph.Bar('cvs', [48,56,52,49,43,51]);
+        RGraph.SetConfig(bar, config);
+        bar.context.translate(20,-20);
+        bar.Draw();
+    }
+</script>
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/tooltips.html b/RGraph/docs/tooltips.html new file mode 100644 index 0000000..94864a7 --- /dev/null +++ b/RGraph/docs/tooltips.html @@ -0,0 +1,587 @@ + + + + + + + RGraph: HTML5 canvas graph library - Tooltips + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Tooltips

+ + + +
+ [No canvas support]
+ Tooltip effect: + +
+ + + + + + +

Introduction

+ +

+ Tooltips are a very effective and straight forward way to extend your graphs and add more information to them, without overloading + the user. +

+ + +

What can they hold?

+ +

+ At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See below + for information on showing graphs in tooltips. +

+ + +

How can I specify them?

+ +

+ You can specify them by including the tooltips code and then using the chart.tooltips property. For example: +

+ +
    +
  1. + Include the RGraph libraries. + 
    +<script src="RGraph.common.core.js"></script>
+<script src="RGraph.common.tooltips.js"></script>
+<script src="RGraph.line.js"></script>
+
    +
    2. + +
  2. + Define your graph and set the tooltips property. + 
    +<script>
+    window.onload = function ()
+    {
+        var line = new RGraph.Line('cvs', [64,34,26,35,51,24]);
+        line.Set('chart.tooltips', ['<b>Winner!</b><br />John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
+        line.Set('chart.tooltips.effect', 'expand');
+        line.Set('chart.gutter', 30);
+        line.Set('chart.hmargin', 10);
+        line.Set('chart.linewidth', 2);
+        line.Set('chart.shadow', true);
+        line.Set('chart.shadow.offsetx', 0);
+        line.Set('chart.shadow.offsety', 0);
+        line.Set('chart.shadow.color', 'green');
+        line.Set('chart.shadow.blur', 25);
+        line.Set('chart.colors', ['green']);
+        line.Set('chart.tickmarks', 'circle');
+        line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
+        line.Draw();
+    }
+</script>
+
    +
    3. +
+ + +

What can I specify?

+ +

+ The tooltips that you specify are usually strings (which can contain HTML). They can however also be functions which are called when they're about + to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify + one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish. + These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip + text. So to summarise: +

+ + + + +

Can I show graphs in tooltips?

+ + [No canvas support] + +

+ You can, and with the custom event support that RGraph has (as of 10th July 2010), it's reasonably easy. Simply attach your function that + creates the graph to the ontooltip event. This allows the tooltip HTML to be created and added to the page + so that the code that creates the graph can run. The sequence is: +

+ +
    +
  1. Specify the HTML for the tooltip as normal (including the <canvas> tag).
    2. +
  2. Use the ontooltip RGraph event so that a function is called when a tooltip is shown.
    3. +
  3. This function should subsequently create the graph.
    4. +
+ +

+ The tooltip DIV is to be found in the RGraph registry - RGraph.Registry.Get('chart.tooltip'). And if you want it the + numerical zero indexed count of the tooltip is to be found in the __index__ property: + RGraph.Registry.Get('chart.tooltip').__index__ +

+ + 
+<script src="RGraph.common.core.js" ></script>
+<script src="RGraph.common.tooltips.js" ></script>
+<script src="RGraph.bar.js" ></script>
+<script src="RGraph.line.js" ></script>
+
+<style>
+    .RGraph_tooltip {
+        background-color: white ! important;
+    }
+</style>
+
+<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
+
+<script>
+    window.onload = function ()
+    {
+        labels = ['Gary','Pete','Lou','Ned','Kev','Fred'];
+
+        bar = new RGraph.Bar("cvs", [4.5,28,13,26,35,36]);
+        bar.Set('chart.tooltips', function (idx) {return labels[idx] + 's stats<br/><canvas id="__tooltip_canvas__" width="400" height="150">[No canvas support]</canvas>';});
+        bar.Set('chart.hmargin', 10);
+        bar.Set('chart.tickmarks', 'endcircle');
+        bar.Set('chart.colors', ['blue']);
+        bar.Set('chart.ymax', 100);
+        bar.Set('chart.gutter', 30);
+        bar.Set('chart.labels', labels);
+        bar.Draw();
+        
+        RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);
+    }
+      
+
+    
+    /**
+    * This is the function that is called by the ontooltip event to create the tooltip charts
+    * 
+    * @param obj object   The graph object
+    */
+    function CreateTooltipGraph(obj)
+    {
+        // This data could be dynamic
+        var line  = new RGraph.Line('__tooltip_canvas__', [5,8,7,6,9,5,4,6,3,5,4,4]);
+        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+        line.Set('chart.gutter', 20);
+        line.Set('chart.hmargin', 5);
+        line.Set('chart.tickmarks', 'endcircle');
+        line.Set('chart.background.grid.autofit', true);
+        line.Draw();
+    }
+    
+</script>
+
+ +

+ If you want to see more source code, simply view the source of this page and look at the code that creates the bar chart. +

+ +
+ + +

Can I customise the appearance of tooltips?

+ +

+ Yes. You can either use the default CSS class RGraph_tooltip, or you can specify a specific CSS class that a + graphs tooltips should use with the property chart.tooltips.css.class. The two graphs on this page have + different looking tooltips by using this method - the line graph uses the default look, whilst the bar chart + overrides the CSS class name and sets it to bar_chart_tooltips_css. For example: +

+ + 
bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');
+ + 
+<style>
+    .bar_chart_tooltips_css {
+        background-color: white ! important;
+        border: 2px solid black ! important;
+        padding: 3px;
+    }
+</style>
+
+ +

+ You can read more about RGraph CSS classes here. +

+ + +

What tooltip effects are available?

+ +

+ These effects are available to you: +

+ + + +

+ All of them are as their names imply. fade is a straight forward fade in effect, expand is another effect + which expands outward from the center of the tooltip, contract is like the expand effect but in reverse, snap is an effect which can be used in a limited set of circumstances + and "snaps" to the current mouse position and none is simply no effect at all. The default effect used + by all graph types is fade. Note: If you're showing canvases in your tooltips then the expand, contract and snap + effects will not work - you must use fade or none. +

+ +

+ Note: The snap effect is only available to graph types where the tooltip is triggered using the onmousemove event. + Currently this means the Line chart, Rscatter graph, Scatter graph and Tradar chart. It can also + be negatively effected when using multiple graphs on one page. +

+ + + +

Tooltips, the clipboard and Firefox

+ +

+ If you're using Firefox, there's a note about tooltips and the clipboard (ie copying text) on the issues page. +

+ + +

Can I override the tooltip function?

+ +

+ You can by stipulating chart.tooltips.override. This should be a function object that handles everything with regard + to showing the tooltip. Highlighting the graph is still done for you - the override function is only concerned with showing + the tooltip. The override function is passed these arguments: +

+ + + +

+ Note: Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the + RGraph.getTooltipText('id:xxx') function. +

+ + 
+<script>
+    function tooltip_override (canvas, text, x, y, idx)
+    {
+        alert('In tooltip override function...');
+    }
+    myObj.Set('chart.tooltips.override', tooltip_override);
+</script>
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/tradar.html b/RGraph/docs/tradar.html new file mode 100644 index 0000000..4837931 --- /dev/null +++ b/RGraph/docs/tradar.html @@ -0,0 +1,398 @@ + + + + + + + RGraph: HTML5 canvas graph library - Traditional radar chart documentation + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Traditional radar chart documentation

+ + + +

+ A traditional radar chart. +

+ +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var data = [3, 3, 41, 37, 16];
+    
+        var tradar = new RGraph.Tradar('myTradar', data);
+        tradar.Set('chart.background.circles', true);
+        tradar.Set('chart.color', 'rgba(255,0,0,0.5)');
+        tradar.Set('chart.circle', 20);
+        tradar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
+        tradar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
+        tradar.Set('chart.key', ['Market share', 'A made up figure']);
+        tradar.Draw();
+    }
+</script>
+
+ + +

Properties

+ +

+ You can use these properties to control how the chart apears. You can set these properties by using the Set() method. Eg: +

+ +

+ myTradar.Set('color', 'rgba(255,0,0,0.5)'); +

+ + + + + +

Margins

+chart.gutter
+ The gutter that the chart uses. This is effectively the margin.
Default: 25

+ +

Colors

+chart.color
+ The color of the radar chart.
Default: rgba(255,0,0,0.5)

+ +

Title

+chart.title
+ The title, if any, of the chart.
Default: Not set

+ +chart.title.color
+ The color of the title.
Default: black

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +

Labels and text

+chart.labels
+ The labels to use for the chart.
Default: An empty array

+ +chart.labels.axes
+ This controls the axes that show the scale labels. Each letter stands for the appropriate axis (North, South, East and West)
Default: nsew

+ +chart.labels.offsetx
+ The X pixel offset for the labels.
Default: 10

+ +chart.labels.offsety
+ The Y pixel offset for the labels.
Default: 10

+ +chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size of the text (in points).
Default: 10

+ + +

Scale

+ chart.ymax
+ The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)

+ + + chart.scale.round
+ Whether to round the maximum scale value up or not. This will produce slightly better scales in some instances.
+ Default: null

+ + +

Miscellaneous

+chart.background.circles
+ Whether to draw the grey background circles.
Default: true

+ +chart.linewidth
+ The width of the outline.
Default: 1

+ +chart.circle
+ What value to draw a circle at. Defaults to zero (off). You could use this to represent a threshold of some sort.
Default: 0

+ +chart.circle.fill
+ What color to fill the circle with.
Default: red

+ +chart.circle.stroke
+ What color to stroke (ie The outline) the circle with.
Default: black

+ + + + + + + +

Key

+ + + chart.key
+ An array of key information.
+ Default: [] (An empty array)

+ + + chart.key.background
+ The color of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
+ Default: white

+ + + chart.key.position
+ Determines the position of the key.Either graph (default), or gutter.
+ Default: graph

+ + chart.key.position.x
+ This allows you to specify a specific X coordinate for the key.
+ Default: null

+ + chart.key.position.y
+ This allows you to specify a specific Y coordinate for the key.
+ Default: null

+ + chart.key.position.gutter.boxed
+ If you have the key in gutter mode (ie horizontal), this allows you to give a background color.
+ Default: true

+ + + chart.key.shadow
+ Whether a small drop shadow is applied to the key.
+ Default: false

+ + + chart.key.shadow.color
+ The color of the shadow.
+ Default: #666

+ + + chart.key.shadow.blur
+ The extent of the blurring effect used on the shadow.
+ Default: 3

+ + + chart.key.shadow.offsetx
+ The X offset of the shadow.
+ Default: 2

+ + + chart.key.shadow.offsety
+ The Y offset of the shadow.
+ Default: 2

+ + chart.key.rounded
+ This controls whether the corners of the key (in graph mode) are curved. If the key is gutter mode, this has no effect.
+ Default: false

+ + chart.key.color.shape
+ This can be square, circle or line and controls how the color indicators in the key appear.
+ Default: square

+ + + + + + + + +

Interactive features

+chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.tooltips
+ A numerically indexed array of tooltips that are shown when a hotspot is hovered over. These can contain HTML.
Default: An empty array

+ +chart.tooltips.effect
+ The visual effect used when showing tooltips. Can be either fade or expand.
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ +chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
Default: null

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +

Zoom

+chart.zoom.mode
+ Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas

+ +chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.thumbnail.width
+ When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.thumbnail.height
+ When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ + \ No newline at end of file diff --git a/RGraph/docs/vprogress.html b/RGraph/docs/vprogress.html new file mode 100644 index 0000000..9bcd2e7 --- /dev/null +++ b/RGraph/docs/vprogress.html @@ -0,0 +1,363 @@ + + + + + + + RGraph: HTML5 canvas graph library - progress bar documentation + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Vertical Progress bar documentation

+ + + +

+ The example file is here. +

+ + 
+<script>
+    window.onload = function ()
+    {
+        var myProgress = new RGraph.VProgess('myProgress', 78, 100);    
+        myProgress.Set('chart.colors', ['red']);
+        myProgress.Draw();
+    }
+</script>
+
+ +

Properties

+ +

+ You can use these properties to control how the progress bar apears. You can set them by using the Set() method. Eg: +

+ +

+ myProgress.Set('name', 'value'); +

+ + + + + +

Chart configuration

+chart.tickmarks
+ Whether the tickmarks are drawn.
Default: true

+ + + chart.labels.count
+ This controls how many labels there are. +
Default: 10

+ + +chart.tickmarks.color
+ The color used for tickmarks.
Default: black

+ + +chart.tickmarks.inner
+ This controls whether the bar has inner tickmarks
Default: false

+ + + chart.value
+ The indicated value. You don't need to set this because it's one of the arguments to the constructor.
+ Default: none (An argument to the constructor) +

+ + + chart.min
+ The minimum value. Setting a minimum value allows to show a more detailed progress bar.
+ Default: 0

+ + + chart.max
+ The maximum value. You don't need to set this because it's one of the arguments to the constructor.

+ + +chart.numticks
+ How many tick marks there are.
Default: 10

+ +chart.numticks.inner
+ How many inner tick marks there are.
Default: 50

+ +chart.arrows
+ This stipulates that two indicator arrows are drawn. It works best if you have tickmarks off, and no title.
Default: false

+ +

Margins

+chart.gutter
+ The size of the gutter.
Default: 25

+ +

Colors

+chart.color
+ The color of the bar. This can be a solid color, or a gradient that you create.
Default: #0c0

+ +chart.background.color
+ The background color.
Default: #eee

+ +

Shadow

+chart.shadow
+ Whether the progress bar has a shadow. This uses the canvas shadow API and therefore is only supported on Chrome 2, Safari 3.1 and Firefox 3.1 (and above).
Default: false

+ +chart.shadow.offsetx
+ The X offset of the progress bar shadow.
Default: 3

+ +chart.shadow.offsety
+ The Y offset of the progress bar shadow.
Default: 3

+ +chart.shadow.color
+ The color of the shadow.
Default: rgba(0,0,0,0.5)

+ +chart.shadow.blur
+ The blurring effect that is applied to the shadow.
Default: 3

+ +

Labels and text

+chart.text.font
+ The font used to render the text.
Default: Verdana

+ +chart.text.color
+ The color of the labels.
Default: black

+ +chart.text.size
+ The size of the text (in points).
Default: 10

+ + + chart.labels
+ Labels that are applied to the graph.
Default: An empty array

+ + + chart.labels.position
+ Can be left or right and controls which side the labels are positioned on.
+ Default: right

+ + + +

Scale

+ chart.units.pre
+ The units that the Y scale is measured in (these are preppend to the number).
Default: none

+ + + chart.units.post
+ The units that the Y scale is measured in (these are appended to the number).
Default: none

+ + + chart.scale.decimals
+ This stipulates how many decimal places there are. +
Default: 0

+ + + +

Titles

+chart.title
+ The title of the progress bar.
Default: An empty string

+ +chart.title.hpos
+ This allows you to completely override the horizontal positioning of the title. It should be a number between 0 and 1, and is multiplied with the whole width of the canvas and then used as the horizontal position.
Default: null

+ +chart.title.vpos
+ This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null

+ +chart.title.color
+ The color of the title.
Default: black

+ +

Interactive features

+chart.tooltips
+ An array, albeit one element only. This is shown when the progress bar is clicked on. Tooltips can contain HTML.
Default: An empty array

+ +chart.tooltips.effect
+ The animated effect used for showing the tooltip. Can be either fade or expand.
Default: fade

+ +chart.tooltips.css.class
+ This is the name of the CSS class the graph uses.
Default: RGraph_tooltip

+ + + chart.tooltips.override
+ If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page
+ Default: null

+ + + chart.tooltips.coords.adjust
+ If you translate to gain space, then you can use this to tell RGraph that you have, so that the coordinates for the + tooltip(s) are accurate.
+ Default: [0, 0]

+ + +chart.contextmenu
+ An array of context menu items. More information on context menus is here.
Default: [] (An empty array)

+ +chart.annotatable
+ Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false

+ +chart.annotate.color
+ If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black

+ +chart.resizable
+ Defaulting to false, this determines whether your graph will be resizable. Because of the numerous event handlers this has to install code on, This feature is unlikely to work with other dynamic features (the context menu is fine however).
Default: false

+ +chart.adjustable
+ Defaulting to false, this determines whether your progress bar will be adjustable (click the bar and drag it).
Default: false

+ +

Zoom

+chart.zoom.factor
+ This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5

+ +chart.zoom.fade.in
+ Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.fade.out
+ Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true

+ +chart.zoom.hdir
+ The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

+ +chart.zoom.vdir
+ The vertical direction of the zoom. Possible values are: up, center, down
Default: down

+ +chart.zoom.delay
+ The delay (in milliseconds) between frames.
Default: 50

+ +chart.zoom.frames
+ The number of frames in the zoom animation.
Default: 10

+ +chart.zoom.shadow
+ Whether or not the zoomed canvas has a shadow or not.
Default: true

+ +chart.zoom.background
+ Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.
Default: true

+

+ + + \ No newline at end of file diff --git a/RGraph/docs/zoom.html b/RGraph/docs/zoom.html new file mode 100644 index 0000000..c74256b --- /dev/null +++ b/RGraph/docs/zoom.html @@ -0,0 +1,388 @@ + + + + + + + RGraph: HTML5 canvas graph library - Zooming your graphs + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Zooming your graphs

+ + + + + + + + +

Canvas mode

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

+ As of November 2009 RGraph has had the ability to provide a zoom facility. It's designed to be used in + conjunction with a context menu as in the example to the right. +

+ +

+ You can control the zoom using these properties: +

+ +
    +
  • chart.zoom.modeDefault: canvas
    • +
  • chart.zoom.factorDefault: 1.5
    • +
  • chart.zoom.fade.in Default: true
    • +
  • chart.zoom.fade.out Default: true
    • +
  • chart.zoom.hdir Default: right
    • +
  • chart.zoom.vdir Default: down
    • +
  • chart.zoom.delay Default: 50
    • +
  • chart.zoom.frames Default: 10
    • +
  • chart.zoom.shadow Default: true
    • +
  • chart.zoom.mode Default: canvas
    • +
  • chart.zoom.thumbnail.width Default: 75
    • +
  • chart.zoom.thumbnail.height Default: 75
    • +
  • chart.zoom.background Default: true
    • +
+ 		+ [No canvas support] +
+ The possible values of chart.zoom.hdir are: left, center, right. + The possible values of chart.zoom.vdir are: up, center, down. chart.zoom.delay + is the delay in between frames (in milliseconds) and chart.zoom.frames is the number of frames in the zoom. chart.zoom.shadow + is whether the zoomed canvas has a shadow or not. The possible values of chart.zoom.mode are canvas (default) + and thumbnail. +
+ + + +
+ + 
+<script>
+    var graph = new RGraph.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]);
+    graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
+    graph.Set('chart.contextmenu', [
+                                    ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
+                                    ['Zoom in', RGraph.Zoom]
+                                   ]);
+    graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
+    graph.Set('chart.shadow', true);
+    graph.Set('chart.annotatable', true);
+    graph.Draw();
+</script>
+
+ + + +

Thumbnail mode

+ + [No canvas support] + +

+ The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas. + The graph to the left shows an example of this. +

+ +

+ It uses some of the same properties as the regular zoom, eg chart.fade.in, chart.fade.out, chart.zoom.shadow +

+ +
+ + 
+<script>
+    var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
+    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+    myLine.Set('chart.hmargin', 10);
+    myLine.Set('chart.linewidth', 3);
+    myLine.Set('chart.title', 'A sample line chart');
+    myLine.Set('chart.zoom.mode', 'thumbnail');
+    myLine.Set('chart.zoom.vdir', 'center');
+    myLine.Set('chart.zoom.thumbnail.width', 100);
+    myLine.Set('chart.zoom.thumbnail.height', 100);
+    myLine.Set('chart.colors', ['red', 'black']);
+    myLine.Set('chart.shadow', true);
+    myLine.Set('chart.contextmenu', [['Zoom entire graph', RGraph.Zoom]]);
+</script>
+
+ +

+ Making the zoom circular

+ A circular zoom window + It is possible to make the zoom in area mode circular by utilising the border-radius CSS property. Currently support for + this is limited to FireFox 4b7+, so it's not part of the main RGraph software. The CSS ncessary to achieve this is + thus: +

+ + 
+<style>
+    .RGraph_zoom_window {
+        border-radius: 50px ! important;
+    }
+</style>
+
+ + This a graph demonstrating this technique here. Note that browser support for this technique is limited. + +
+ + + +

Area mode

+ + [No canvas support] + +

+ Another type of zoom available is area. This is somewhat similar to thumbnail, but allows you to draw a rectangle around + the specific area that you want to zoom. +

+ +

+ Again, this uses some common zoom properties, such as chart.zoom.factor. +

+ +

+ Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around + within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the + whole canvas. +

+ +
+ + 
+<script>
+    var myLine = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
+    myLine.Set('chart.zoom.mode', 'area');
+    myLine.Set('chart.hmargin', 10);
+    myLine.Set('chart.linewidth', 1);
+    myLine.Set('chart.title', 'A graph with zoom in area mode');
+    myLine.Set('chart.tickmarks', 'endcircle');
+    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
+    myLine.Draw();
+<script>
+
+ + + \ No newline at end of file diff --git a/RGraph/docs/zoom_thumbnail.html b/RGraph/docs/zoom_thumbnail.html new file mode 100644 index 0000000..cef8b78 --- /dev/null +++ b/RGraph/docs/zoom_thumbnail.html @@ -0,0 +1,191 @@ + + + + + + + RGraph: HTML5 canvas graph library - Zooming your graphs + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - A circular thumbnail demonstration

+ + + + + [No canvas support] + + +

+ This is a demonstration of the zoom in thumbnail mode with some custom CSS (the border-radius property) which facilitates + making the thumbnail circular. +

+ +

+ Remember that browser support for this is limited - currently (18th December 2010) only Firefox 4b7+ supports this. +

+ +

+ «Back to zoom documentation +

+ + + \ No newline at end of file diff --git a/RGraph/examples/bar.html b/RGraph/examples/bar.html new file mode 100644 index 0000000..bca43bd --- /dev/null +++ b/RGraph/examples/bar.html @@ -0,0 +1,333 @@ + + + + + + + + RGraph: HTML5 canvas graph library - bar chart + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Bar chart

+ + + +
+

+ The bar chart is probably one of the most widely used of charts, and also one of the most versatile. It's defined as a chart with + rectangular bars with lengths proportional to the values they represent. The bar chart can be used to represent two + or more values. With grouped and stacked bar charts, you can visualise two or more sets of data. For example two years + worth of sales figures. Doing this you will be able to easily see differences, for example a better year when it comes + to sales. You can also show negative values by having the X axis in the center, like the examples shown. If you use a + grouped or stacked bar chart, a key may be helpful to your users. +

+ +

+ By using the tooltips feature, you can provide more detail about what a particular bar represents. The tooltips in + RGraph can contain wide range of HTML, so you can use them to show photos or movies for example. +

+ +
+ +
+ +
+
+ [No canvas support] + [No canvas support] +
+ +
+ [No canvas support] + [No canvas support] +
+
+
+ + + \ No newline at end of file diff --git a/RGraph/examples/basic.html b/RGraph/examples/basic.html new file mode 100644 index 0000000..ce2be6c --- /dev/null +++ b/RGraph/examples/basic.html @@ -0,0 +1,64 @@ + + + + + + + + RGraph: HTML5 canvas graph library - a basic example + + + + + + + + + + + + + +

RGraph: HTML5 canvas graph library - A basic example

+ + + [No canvas support] + + + + +

+ This is a very basic example that does little more than display a graph. If you're trying to understand how RGraph + works, this should help as there is very little happening on this page. To see the source code of this + page simply view the source (Right click > View Source). +

+ + + \ No newline at end of file diff --git a/RGraph/examples/bipolar.html b/RGraph/examples/bipolar.html new file mode 100644 index 0000000..1ea7dbe --- /dev/null +++ b/RGraph/examples/bipolar.html @@ -0,0 +1,255 @@ + + + + + + + + + RGraph: HTML5 canvas graph library - bi-polar chart + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Bi-polar chart

+ + + +
+

+ The Bi-polar chart is also (possibly more commonly) known as an age-frequency chart or a population pyramid. It allows you to very straight forwardly + compare two sets of data. For example two years worth of sales figues. Using this type of chart abnormalities will become + apparent. Other charts that would also be comparable, include a grouped bar chart, a stacked bar chart, and a multiple + line graph. +

+ +
+ +
+ +
+
+ [No canvas support] + [No canvas support] +
+ +
+ [No canvas support] + [No canvas support] +
+
+
+ + + \ No newline at end of file diff --git a/RGraph/examples/donut.html b/RGraph/examples/donut.html new file mode 100644 index 0000000..567c6fe --- /dev/null +++ b/RGraph/examples/donut.html @@ -0,0 +1,256 @@ + + + + + + + RGraph: HTML5 canvas graph library - donut chart + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Donut chart

+ + + +
+ +

+ Formerly the Donut chart was a separate class, though now it's a variant of the Pie chart. This means smaller downloads and + a much simpler implementation. Essentially it's a Pie chart with a big hole in the middle. If you want to compare multiple + datasets you will probably be better off with something like a stacked or grouped bar chart, as you will be able to make + comparisons easier. +

+ +
+ +
+ +
+
+ [No canvas support] + [No canvas support] +
+ +
+ [No canvas support] + [No canvas support] +
+
+
+ + + + \ No newline at end of file diff --git a/RGraph/examples/funnel.html b/RGraph/examples/funnel.html new file mode 100644 index 0000000..066822a --- /dev/null +++ b/RGraph/examples/funnel.html @@ -0,0 +1,234 @@ + + + + + + + RGraph: HTML5 canvas graph library - funnel chart + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + +

RGraph: HTML5 canvas graph library - Funnel chart

+ + + +

+ The funnel chart can be used to show stages in a sales or order process, from initial lead/contact through to actual sale. + It works well if you have a diminishing process, like that shown below. It can show potential revenue in each stage, or + like below, it can show actual numbers. It can also highlight potential problems in an organisations sales and/or order fulfillment + processes. +

+ +
+
+ +
+ +
+
+ [No canvas support] +
+ +
+ [No canvas support] +
+
+
+ +
+
Initial contact
All potential cutomers were contacted and
interest was established.
+
Established lead
Customers who were interested had their details
recorded and passed to the sales team.
+
Sales Call
Interested Customers were called by the
sales team.
+
Site visit
The Customers site was visited by a representative
of the sales core.
+
Sale agreed
A sale was finalised by the sales core.
+
+ + + \ No newline at end of file diff --git a/RGraph/examples/gantt.html b/RGraph/examples/gantt.html new file mode 100644 index 0000000..eac08a9 --- /dev/null +++ b/RGraph/examples/gantt.html @@ -0,0 +1,272 @@ + + + + + + + RGraph: HTML5 canvas graph library - gantt chart + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Gantt chart

+ + + +
+

+ A Gantt chart is used to show scheduling information. It is commonly used in project management but can also be used, + for example, to show holiday schedule information. In this case it would be easy to see when someone is unavailable. + The Gantt chart can have clickable bars that can be used to provide more detail. It can also show vertical bars + that can be used to indicate events, or as in the cases below, can be decorative. +

+ +

+ The chart is made of "units", in this case 365. This represents days in a year. The labels are separate, being equally + spaced across the chart. This means you can use more meaningful labels, which are easier to comprehend. As in the + example charts. +

+
+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/RGraph/examples/hbar.html b/RGraph/examples/hbar.html new file mode 100644 index 0000000..4d2eb98 --- /dev/null +++ b/RGraph/examples/hbar.html @@ -0,0 +1,244 @@ + + + + + + + RGraph: HTML5 canvas graph library - horizontal bar chart + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Horizontal bar chart

+ + + +

+ A horizontal bar chart can be useful when your labels are too big for a regular bar chart. +

+ + + + [No canvas support] + [No canvas support] + + + \ No newline at end of file diff --git a/RGraph/examples/hprogress.html b/RGraph/examples/hprogress.html new file mode 100644 index 0000000..826becd --- /dev/null +++ b/RGraph/examples/hprogress.html @@ -0,0 +1,212 @@ + + + + + + + RGraph: HTML5 canvas graph library - horizontal progress bar + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Horizontal Progress bar

+ + + +

+ This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call RGraph.Clear() + (which clears the canvas) and then call myProgress.Draw() again. +

+ +

+ The colours, title and scale are configurable, allowing you to represent a wide range of values. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/RGraph/examples/index.html b/RGraph/examples/index.html new file mode 100644 index 0000000..fc2f7da --- /dev/null +++ b/RGraph/examples/index.html @@ -0,0 +1,171 @@ + + + + + + RGraph: HTML5 canvas graph library - examples + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Example pages

+ + + +

+ The following example pages are available: +

+ + + + + + + \ No newline at end of file diff --git a/RGraph/examples/led.html b/RGraph/examples/led.html new file mode 100644 index 0000000..bfa3827 --- /dev/null +++ b/RGraph/examples/led.html @@ -0,0 +1,200 @@ + + + + + + + RGraph: HTML5 canvas graph library - LED grid + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - LED Grid

+ + + +

+ An LED grid, that could be used to show a multitude of things. Could be used as a website counter for example. + It supports the A-Z, 0-9 and space characters. As you can see the colors are also user-definable. It also + supports the context menu, and therefore the zoom. The first LED grid demonstrates this. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] + [No canvas support] + [No canvas support] + [No canvas support] +
+ +











+ + + \ No newline at end of file diff --git a/RGraph/examples/line.html b/RGraph/examples/line.html new file mode 100644 index 0000000..023cc61 --- /dev/null +++ b/RGraph/examples/line.html @@ -0,0 +1,350 @@ + + + + + + + + RGraph: HTML5 canvas graph library - line chart + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Line chart

+ + + +
+

+ Like the Bar chart, the line chart is one of the most versatile chart types. It is similar, but can indicate chronological + data better. The line chart is good if, for example, you want to illustrate sales figures over a year (or any period of + time). You'll then be able to easily see whether sales are going up, down or are stagnant. It will also become apparent + which months are busier than others. By using a multiple line chart you can add multiple sets of data (eg two or more years + of figures) to your chart. You can customise the line chart by stipulating it as being filled, having drop shadows, keys, + having the X axis in the centre, different colors, different tickmark styles and tooltips etc. +

+ +

+ The first graph uses external DIVs for the tooltip contents. The DIVs are at the bottom of this page (they're set not to + be visible). Using external DIVs for tooltips can make maintenance easier. +

+ +
+ +
+ +
+ [Please wait...] + [Please wait...] + [Please wait...] + [Please wait...] +
+
+ + +
+ +
Los Angeles
Home of sexy time!
+
Plymouth
Plenty of surfers dude
+
Meadowhall
Shopping heaven (or hell...) here
+
Sydney
Home of kangeroos
+
Toronto
Brrrr, chilly
+
France
Ever had frogs legs?
+
Norway
Skiing here
+
Sweden
Skiing here too
+
Spain
Hola!
+
Deli
Hot and humid here
+
Congo
Not exactly a holiday resort
+
Plymouth
Plenty of surfers here
+
Brazil
Fooseball
+
Califonia
"I'll be back..." And he was
+
New York
Home of the Friends comedy show
+
Paris
Ever eaten frogs legs?
+
UK
Not a place for getting sun-tans
+
Antartica
Surprisingly, incorporates the driest place in the world
+
Sahara
A questionable film, and a rather hot place
+
Zagreb
Anyone know where this is...?
+
+ + + \ No newline at end of file diff --git a/RGraph/examples/meter.html b/RGraph/examples/meter.html new file mode 100644 index 0000000..c444415 --- /dev/null +++ b/RGraph/examples/meter.html @@ -0,0 +1,233 @@ + + + + + + + RGraph: HTML5 canvas graph library - meter + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + +

RGraph: HTML5 canvas graph library - Meter

+ + + + + +
+

+ The Meter is similar to the Odometer albeit only a semi-circle and not a full circle. It can be better when trying illustrate + a particular level, but only have a limited amount of space. It could also be quite effective as part of a control panel. +

+ +

+
+ +
+ +
+ +
+
[No canvas support]
 +
[No canvas support]
 +
[No canvas support]
 +
+ + + \ No newline at end of file diff --git a/RGraph/examples/odo.html b/RGraph/examples/odo.html new file mode 100644 index 0000000..7305e87 --- /dev/null +++ b/RGraph/examples/odo.html @@ -0,0 +1,241 @@ + + + + + + + RGraph: HTML5 canvas graph library - odometer + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + +

RGraph: HTML5 canvas graph library - Odometer

+ + + + + +
+

+ The Odometer can be used to provide an indication of a particular value. For example you could easily use it to + represent values for a control panel that shows information about a server. An Odometer indicating how much disk + space is used for example, would be more visual than a simple number. +

+ +

+ The green, yellow and red areas are configurable, allowing you to add some level of urgency into your figures. The + figures are also configurable, so it can go from 0-10, or from 0-100. +

+
+ +
+ +
+ +
[No canvas support]
 +
[No canvas support]
 +
[No canvas support]
 + + \ No newline at end of file diff --git a/RGraph/examples/pie.html b/RGraph/examples/pie.html new file mode 100644 index 0000000..0519f10 --- /dev/null +++ b/RGraph/examples/pie.html @@ -0,0 +1,241 @@ + + + + + + + RGraph: HTML5 canvas graph library - pie chart + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Pie chart

+ + + +
+ +

+ The Pie chart can be used when you need to represent value as part of a whole. It is commonly used to represent percentages, + relative magnitudes or relative frequencies. If your intent is to compare a particular value (slice) against the whole of + the Pie chart, then it can be quite effective. If however you want to compare two seperate segments, then it can get + more difficult. If this is the case, you may want to consider a bar chart for example. +

+ +

+ The colours can of course be customised, as can the borders (using the same color as the background and a line width of + about 5 gives the effect of segment separation. The chart can also have a drop shadow if you want one, but this shouldn't + be used in conjunction with segment seperation. +

+ +

+ The first pie chart has a fade-in effect. This not part of the RGraph library but is very easy to implement. +

+
+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/RGraph/examples/rose.html b/RGraph/examples/rose.html new file mode 100644 index 0000000..b48aad0 --- /dev/null +++ b/RGraph/examples/rose.html @@ -0,0 +1,187 @@ + + + + + + + RGraph: HTML5 canvas graph library - rose chart + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Rose chart

+ + + +

+ The Rose chart was formally called the Radar chart. +

+ + + + [No canvas support] + [No canvas support] + + \ No newline at end of file diff --git a/RGraph/examples/rscatter.html b/RGraph/examples/rscatter.html new file mode 100644 index 0000000..b6e6297 --- /dev/null +++ b/RGraph/examples/rscatter.html @@ -0,0 +1,198 @@ + + + + + + + + RGraph: HTML5 canvas graph library - Radial scatter graph + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Radial scatter graph

+ + + +

+ The Radial scatter chart is a circular variant of the regular Scatter chart, and as the name suggests, circular. It + may be more suited to your dataset than the regular scatter chart. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/RGraph/examples/scatter.html b/RGraph/examples/scatter.html new file mode 100644 index 0000000..18f906e --- /dev/null +++ b/RGraph/examples/scatter.html @@ -0,0 +1,302 @@ + + + + + + + + RGraph: HTML5 canvas graph library - scatter graph + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Scatter graph

+ + + +

+ The Scatter graph uses two variables to plot points and makes it clear where there are congregations. The data points + make up the X and Y coordinates. The labels on the X axis are separate from the X units, allowing you to "group" them. For + example, like the example, you could set the maxium X value to be 365, but only have four labels. That way you would + have a granularity of a day, but the X axis would only have four labels. Like the example. +

+ +
+ +
+ + [No canvas support] + [No canvas support] + + + + + + + + + + +
[No canvas support]
+
+ This is an example of a box plot. You can read about them here. +
+
+ + [No canvas support] + + + + \ No newline at end of file diff --git a/RGraph/examples/showcase.html b/RGraph/examples/showcase.html new file mode 100644 index 0000000..a6d0c56 --- /dev/null +++ b/RGraph/examples/showcase.html @@ -0,0 +1,68 @@ + + + + + + + RGraph: HTML5 canvas graph library - shwowcase page + + + + + + +

RGraph: HTML5 canvas graph library - Showcase page

+ + + +

+ Since the showcase page was becoming too slow and heavy and producing an awful lot of graphs, each graph type now has its + own example page. +

+ + + + + + + \ No newline at end of file diff --git a/RGraph/examples/text.html b/RGraph/examples/text.html new file mode 100644 index 0000000..bb0e7a1 --- /dev/null +++ b/RGraph/examples/text.html @@ -0,0 +1,104 @@ + + + + + + + RGraph: HTML5 canvas graph library - Animated rotating text with the RGraph software + + + + + + + + + + + + +

RGraph: A text function that does horizontal and vertical alignment (and spins)

+ + + + + + + + + + + +
The fallback HTML
+   +   + +
+ +

+ RGraph.Text() is a text drawing function that allows vertical and horizontal alignment, and allows you to specify the angle of the + text too. The animation is done by a simple gobal variable, setTimeout() and redrawing the entire + canvas every frame. Perhaps not the most efficient of methods, but remember that your Javascript will likely be + running on computers that have more processing power than + some small countries... Reset the page +

+ +

+ In a similar vein you could easily make some text that bounces from one side of the screen to the other, + hurrah - the return of <marquee>! +

+ +
+ More examples can be found on the individual example pages, and a more complete + reference to the Text() function can be found in the API docs. +
+ + + \ No newline at end of file diff --git a/RGraph/examples/tradar.html b/RGraph/examples/tradar.html new file mode 100644 index 0000000..fc28a35 --- /dev/null +++ b/RGraph/examples/tradar.html @@ -0,0 +1,240 @@ + + + + + + + + RGraph: HTML5 canvas graph library - Traditional radar chart + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Traditional radar chart

+ + + +
+
+ +

+ A traditional radar chart, that is similar to the Rose chart. Each of the data points is + arranged equally in terms of angle, whilst the magnitude of each point is shown by the distance from the centre. Thus, + data points of a higher magnitude can be seen as they are more distant from the centre. +

+ +

+ Suitable for many datasets, but not all. If not, then the Rose chart may be more apt. +

+ +

+ The circle, as can be seen in the second example, could be used to indicate a threshold of sorts. In the example, + it could be minimum sales required for a particular month. Months that fall below this threshold can be clearly seen. +

+ +
+ +
+ +
+ [No canvas support] + Get PNG + [No canvas support] +
+ + + + + + \ No newline at end of file diff --git a/RGraph/examples/vprogress.html b/RGraph/examples/vprogress.html new file mode 100644 index 0000000..dc37bd6 --- /dev/null +++ b/RGraph/examples/vprogress.html @@ -0,0 +1,209 @@ + + + + + + + RGraph: HTML5 canvas graph library - vertical progress bar + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Bookmark and share: + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+
+ + + + + +

RGraph: HTML5 canvas graph library - Vertical Progress bar

+ + + +

+ This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call RGraph.Clear() + (which clears the canvas) and then call myProgress.Draw() again. +

+ +

+ The colours, title and scale are configurable, allowing you to represent a wide range of values. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/RGraph/images/alex.png b/RGraph/images/alex.png new file mode 100644 index 0000000..b4bce5e Binary files /dev/null and b/RGraph/images/alex.png differ diff --git a/RGraph/images/analogo.gif b/RGraph/images/analogo.gif new file mode 100644 index 0000000..9fd0aad Binary files /dev/null and b/RGraph/images/analogo.gif differ diff --git a/RGraph/images/analogo.png b/RGraph/images/analogo.png new file mode 100644 index 0000000..8e92147 Binary files /dev/null and b/RGraph/images/analogo.png differ diff --git a/RGraph/images/atom.png b/RGraph/images/atom.png new file mode 100644 index 0000000..ac23fd7 Binary files /dev/null and b/RGraph/images/atom.png differ diff --git a/RGraph/images/bara1.gif b/RGraph/images/bara1.gif new file mode 100644 index 0000000..9cdd5c2 Binary files /dev/null and b/RGraph/images/bara1.gif differ diff --git a/RGraph/images/bara1.png b/RGraph/images/bara1.png new file mode 100644 index 0000000..5b68024 Binary files /dev/null and b/RGraph/images/bara1.png differ diff --git a/RGraph/images/bara16.gif b/RGraph/images/bara16.gif new file mode 100644 index 0000000..d3bea17 Binary files /dev/null and b/RGraph/images/bara16.gif differ diff --git a/RGraph/images/bara16.png b/RGraph/images/bara16.png new file mode 100644 index 0000000..2e085c2 Binary files /dev/null and b/RGraph/images/bara16.png differ diff --git a/RGraph/images/bara2.gif b/RGraph/images/bara2.gif new file mode 100644 index 0000000..1b97822 Binary files /dev/null and b/RGraph/images/bara2.gif differ diff --git a/RGraph/images/bara2.png b/RGraph/images/bara2.png new file mode 100644 index 0000000..ec8904d Binary files /dev/null and b/RGraph/images/bara2.png differ diff --git a/RGraph/images/bara32.gif b/RGraph/images/bara32.gif new file mode 100644 index 0000000..919e455 Binary files /dev/null and b/RGraph/images/bara32.gif differ diff --git a/RGraph/images/bara32.png b/RGraph/images/bara32.png new file mode 100644 index 0000000..f2f1e60 Binary files /dev/null and b/RGraph/images/bara32.png differ diff --git a/RGraph/images/bara4.gif b/RGraph/images/bara4.gif new file mode 100644 index 0000000..5f2200b Binary files /dev/null and b/RGraph/images/bara4.gif differ diff --git a/RGraph/images/bara4.png b/RGraph/images/bara4.png new file mode 100644 index 0000000..77a114b Binary files /dev/null and b/RGraph/images/bara4.png differ diff --git a/RGraph/images/bara8.gif b/RGraph/images/bara8.gif new file mode 100644 index 0000000..dba4120 Binary files /dev/null and b/RGraph/images/bara8.gif differ diff --git a/RGraph/images/bara8.png b/RGraph/images/bara8.png new file mode 100644 index 0000000..a318390 Binary files /dev/null and b/RGraph/images/bara8.png differ diff --git a/RGraph/images/barb1.gif b/RGraph/images/barb1.gif new file mode 100644 index 0000000..49a709a Binary files /dev/null and b/RGraph/images/barb1.gif differ diff --git a/RGraph/images/barb1.png b/RGraph/images/barb1.png new file mode 100644 index 0000000..5939550 Binary files /dev/null and b/RGraph/images/barb1.png differ diff --git a/RGraph/images/barb16.gif b/RGraph/images/barb16.gif new file mode 100644 index 0000000..7d327d4 Binary files /dev/null and b/RGraph/images/barb16.gif differ diff --git a/RGraph/images/barb16.png b/RGraph/images/barb16.png new file mode 100644 index 0000000..2c78916 Binary files /dev/null and b/RGraph/images/barb16.png differ diff --git a/RGraph/images/barb2.gif b/RGraph/images/barb2.gif new file mode 100644 index 0000000..d8fcec2 Binary files /dev/null and b/RGraph/images/barb2.gif differ diff --git a/RGraph/images/barb2.png b/RGraph/images/barb2.png new file mode 100644 index 0000000..cd365f5 Binary files /dev/null and b/RGraph/images/barb2.png differ diff --git a/RGraph/images/barb32.gif b/RGraph/images/barb32.gif new file mode 100644 index 0000000..5579e9d Binary files /dev/null and b/RGraph/images/barb32.gif differ diff --git a/RGraph/images/barb32.png b/RGraph/images/barb32.png new file mode 100644 index 0000000..fe4049c Binary files /dev/null and b/RGraph/images/barb32.png differ diff --git a/RGraph/images/barb4.gif b/RGraph/images/barb4.gif new file mode 100644 index 0000000..726cd51 Binary files /dev/null and b/RGraph/images/barb4.gif differ diff --git a/RGraph/images/barb4.png b/RGraph/images/barb4.png new file mode 100644 index 0000000..13e38e9 Binary files /dev/null and b/RGraph/images/barb4.png differ diff --git a/RGraph/images/barb8.gif b/RGraph/images/barb8.gif new file mode 100644 index 0000000..eb82f0c Binary files /dev/null and b/RGraph/images/barb8.gif differ diff --git a/RGraph/images/barb8.png b/RGraph/images/barb8.png new file mode 100644 index 0000000..00db16c Binary files /dev/null and b/RGraph/images/barb8.png differ diff --git a/RGraph/images/barc1.gif b/RGraph/images/barc1.gif new file mode 100644 index 0000000..ac54bcd Binary files /dev/null and b/RGraph/images/barc1.gif differ diff --git a/RGraph/images/barc1.png b/RGraph/images/barc1.png new file mode 100644 index 0000000..797123b Binary files /dev/null and b/RGraph/images/barc1.png differ diff --git a/RGraph/images/barc16.gif b/RGraph/images/barc16.gif new file mode 100644 index 0000000..e81b8b4 Binary files /dev/null and b/RGraph/images/barc16.gif differ diff --git a/RGraph/images/barc16.png b/RGraph/images/barc16.png new file mode 100644 index 0000000..9309f18 Binary files /dev/null and b/RGraph/images/barc16.png differ diff --git a/RGraph/images/barc2.gif b/RGraph/images/barc2.gif new file mode 100644 index 0000000..c31c122 Binary files /dev/null and b/RGraph/images/barc2.gif differ diff --git a/RGraph/images/barc2.png b/RGraph/images/barc2.png new file mode 100644 index 0000000..e9894c6 Binary files /dev/null and b/RGraph/images/barc2.png differ diff --git a/RGraph/images/barc32.gif b/RGraph/images/barc32.gif new file mode 100644 index 0000000..a2d943b Binary files /dev/null and b/RGraph/images/barc32.gif differ diff --git a/RGraph/images/barc32.png b/RGraph/images/barc32.png new file mode 100644 index 0000000..25bf53c Binary files /dev/null and b/RGraph/images/barc32.png differ diff --git a/RGraph/images/barc4.gif b/RGraph/images/barc4.gif new file mode 100644 index 0000000..757f05e Binary files /dev/null and b/RGraph/images/barc4.gif differ diff --git a/RGraph/images/barc4.png b/RGraph/images/barc4.png new file mode 100644 index 0000000..10f4238 Binary files /dev/null and b/RGraph/images/barc4.png differ diff --git a/RGraph/images/barc8.gif b/RGraph/images/barc8.gif new file mode 100644 index 0000000..3dea117 Binary files /dev/null and b/RGraph/images/barc8.gif differ diff --git a/RGraph/images/barc8.png b/RGraph/images/barc8.png new file mode 100644 index 0000000..b9550cd Binary files /dev/null and b/RGraph/images/barc8.png differ diff --git a/RGraph/images/bard1.gif b/RGraph/images/bard1.gif new file mode 100644 index 0000000..20df12a Binary files /dev/null and b/RGraph/images/bard1.gif differ diff --git a/RGraph/images/bard1.png b/RGraph/images/bard1.png new file mode 100644 index 0000000..08e8c06 Binary files /dev/null and b/RGraph/images/bard1.png differ diff --git a/RGraph/images/bard16.gif b/RGraph/images/bard16.gif new file mode 100644 index 0000000..02effec Binary files /dev/null and b/RGraph/images/bard16.gif differ diff --git a/RGraph/images/bard16.png b/RGraph/images/bard16.png new file mode 100644 index 0000000..c5061e5 Binary files /dev/null and b/RGraph/images/bard16.png differ diff --git a/RGraph/images/bard2.gif b/RGraph/images/bard2.gif new file mode 100644 index 0000000..5ff157e Binary files /dev/null and b/RGraph/images/bard2.gif differ diff --git a/RGraph/images/bard2.png b/RGraph/images/bard2.png new file mode 100644 index 0000000..f56db0a Binary files /dev/null and b/RGraph/images/bard2.png differ diff --git a/RGraph/images/bard32.gif b/RGraph/images/bard32.gif new file mode 100644 index 0000000..da07a92 Binary files /dev/null and b/RGraph/images/bard32.gif differ diff --git a/RGraph/images/bard32.png b/RGraph/images/bard32.png new file mode 100644 index 0000000..8b507f4 Binary files /dev/null and b/RGraph/images/bard32.png differ diff --git a/RGraph/images/bard4.gif b/RGraph/images/bard4.gif new file mode 100644 index 0000000..af9bbf4 Binary files /dev/null and b/RGraph/images/bard4.gif differ diff --git a/RGraph/images/bard4.png b/RGraph/images/bard4.png new file mode 100644 index 0000000..7f6ff82 Binary files /dev/null and b/RGraph/images/bard4.png differ diff --git a/RGraph/images/bard8.gif b/RGraph/images/bard8.gif new file mode 100644 index 0000000..b9c0fab Binary files /dev/null and b/RGraph/images/bard8.gif differ diff --git a/RGraph/images/bard8.png b/RGraph/images/bard8.png new file mode 100644 index 0000000..c49f78b Binary files /dev/null and b/RGraph/images/bard8.png differ diff --git a/RGraph/images/bare1.gif b/RGraph/images/bare1.gif new file mode 100644 index 0000000..12ef53f Binary files /dev/null and b/RGraph/images/bare1.gif differ diff --git a/RGraph/images/bare1.png b/RGraph/images/bare1.png new file mode 100644 index 0000000..3dbd49a Binary files /dev/null and b/RGraph/images/bare1.png differ diff --git a/RGraph/images/bare16.gif b/RGraph/images/bare16.gif new file mode 100644 index 0000000..1e06ff5 Binary files /dev/null and b/RGraph/images/bare16.gif differ diff --git a/RGraph/images/bare16.png b/RGraph/images/bare16.png new file mode 100644 index 0000000..7b540c3 Binary files /dev/null and b/RGraph/images/bare16.png differ diff --git a/RGraph/images/bare2.gif b/RGraph/images/bare2.gif new file mode 100644 index 0000000..b807ac5 Binary files /dev/null and b/RGraph/images/bare2.gif differ diff --git a/RGraph/images/bare2.png b/RGraph/images/bare2.png new file mode 100644 index 0000000..f47d362 Binary files /dev/null and b/RGraph/images/bare2.png differ diff --git a/RGraph/images/bare32.gif b/RGraph/images/bare32.gif new file mode 100644 index 0000000..6b7dae9 Binary files /dev/null and b/RGraph/images/bare32.gif differ diff --git a/RGraph/images/bare32.png b/RGraph/images/bare32.png new file mode 100644 index 0000000..9497e24 Binary files /dev/null and b/RGraph/images/bare32.png differ diff --git a/RGraph/images/bare4.gif b/RGraph/images/bare4.gif new file mode 100644 index 0000000..8cad311 Binary files /dev/null and b/RGraph/images/bare4.gif differ diff --git a/RGraph/images/bare4.png b/RGraph/images/bare4.png new file mode 100644 index 0000000..55e9088 Binary files /dev/null and b/RGraph/images/bare4.png differ diff --git a/RGraph/images/bare8.gif b/RGraph/images/bare8.gif new file mode 100644 index 0000000..9929573 Binary files /dev/null and b/RGraph/images/bare8.gif differ diff --git a/RGraph/images/bare8.png b/RGraph/images/bare8.png new file mode 100644 index 0000000..3946294 Binary files /dev/null and b/RGraph/images/bare8.png differ diff --git a/RGraph/images/barf1.gif b/RGraph/images/barf1.gif new file mode 100644 index 0000000..40ccb7b Binary files /dev/null and b/RGraph/images/barf1.gif differ diff --git a/RGraph/images/barf1.png b/RGraph/images/barf1.png new file mode 100644 index 0000000..5b68024 Binary files /dev/null and b/RGraph/images/barf1.png differ diff --git a/RGraph/images/barf16.gif b/RGraph/images/barf16.gif new file mode 100644 index 0000000..06da0a8 Binary files /dev/null and b/RGraph/images/barf16.gif differ diff --git a/RGraph/images/barf16.png b/RGraph/images/barf16.png new file mode 100644 index 0000000..89e0f68 Binary files /dev/null and b/RGraph/images/barf16.png differ diff --git a/RGraph/images/barf2.gif b/RGraph/images/barf2.gif new file mode 100644 index 0000000..b1bbdac Binary files /dev/null and b/RGraph/images/barf2.gif differ diff --git a/RGraph/images/barf2.png b/RGraph/images/barf2.png new file mode 100644 index 0000000..0301e20 Binary files /dev/null and b/RGraph/images/barf2.png differ diff --git a/RGraph/images/barf32.gif b/RGraph/images/barf32.gif new file mode 100644 index 0000000..7cc2992 Binary files /dev/null and b/RGraph/images/barf32.gif differ diff --git a/RGraph/images/barf32.png b/RGraph/images/barf32.png new file mode 100644 index 0000000..8c30b58 Binary files /dev/null and b/RGraph/images/barf32.png differ diff --git a/RGraph/images/barf4.gif b/RGraph/images/barf4.gif new file mode 100644 index 0000000..a321258 Binary files /dev/null and b/RGraph/images/barf4.gif differ diff --git a/RGraph/images/barf4.png b/RGraph/images/barf4.png new file mode 100644 index 0000000..381e5ee Binary files /dev/null and b/RGraph/images/barf4.png differ diff --git a/RGraph/images/barf8.gif b/RGraph/images/barf8.gif new file mode 100644 index 0000000..da63a1b Binary files /dev/null and b/RGraph/images/barf8.gif differ diff --git a/RGraph/images/barf8.png b/RGraph/images/barf8.png new file mode 100644 index 0000000..4ea096a Binary files /dev/null and b/RGraph/images/barf8.png differ diff --git a/RGraph/images/barg1.gif b/RGraph/images/barg1.gif new file mode 100644 index 0000000..b5a2201 Binary files /dev/null and b/RGraph/images/barg1.gif differ diff --git a/RGraph/images/barg1.png b/RGraph/images/barg1.png new file mode 100644 index 0000000..4294349 Binary files /dev/null and b/RGraph/images/barg1.png differ diff --git a/RGraph/images/barg16.gif b/RGraph/images/barg16.gif new file mode 100644 index 0000000..289b0e8 Binary files /dev/null and b/RGraph/images/barg16.gif differ diff --git a/RGraph/images/barg16.png b/RGraph/images/barg16.png new file mode 100644 index 0000000..21696d5 Binary files /dev/null and b/RGraph/images/barg16.png differ diff --git a/RGraph/images/barg2.gif b/RGraph/images/barg2.gif new file mode 100644 index 0000000..22dc684 Binary files /dev/null and b/RGraph/images/barg2.gif differ diff --git a/RGraph/images/barg2.png b/RGraph/images/barg2.png new file mode 100644 index 0000000..c68a70f Binary files /dev/null and b/RGraph/images/barg2.png differ diff --git a/RGraph/images/barg32.gif b/RGraph/images/barg32.gif new file mode 100644 index 0000000..b57f0a7 Binary files /dev/null and b/RGraph/images/barg32.gif differ diff --git a/RGraph/images/barg32.png b/RGraph/images/barg32.png new file mode 100644 index 0000000..62f3d48 Binary files /dev/null and b/RGraph/images/barg32.png differ diff --git a/RGraph/images/barg4.gif b/RGraph/images/barg4.gif new file mode 100644 index 0000000..927951f Binary files /dev/null and b/RGraph/images/barg4.gif differ diff --git a/RGraph/images/barg4.png b/RGraph/images/barg4.png new file mode 100644 index 0000000..262d862 Binary files /dev/null and b/RGraph/images/barg4.png differ diff --git a/RGraph/images/barg8.gif b/RGraph/images/barg8.gif new file mode 100644 index 0000000..625b9d6 Binary files /dev/null and b/RGraph/images/barg8.gif differ diff --git a/RGraph/images/barg8.png b/RGraph/images/barg8.png new file mode 100644 index 0000000..a570403 Binary files /dev/null and b/RGraph/images/barg8.png differ diff --git a/RGraph/images/barh1.gif b/RGraph/images/barh1.gif new file mode 100644 index 0000000..f09f1cf Binary files /dev/null and b/RGraph/images/barh1.gif differ diff --git a/RGraph/images/barh1.png b/RGraph/images/barh1.png new file mode 100644 index 0000000..fd4293e Binary files /dev/null and b/RGraph/images/barh1.png differ diff --git a/RGraph/images/barh16.gif b/RGraph/images/barh16.gif new file mode 100644 index 0000000..cff0ef1 Binary files /dev/null and b/RGraph/images/barh16.gif differ diff --git a/RGraph/images/barh16.png b/RGraph/images/barh16.png new file mode 100644 index 0000000..02f5330 Binary files /dev/null and b/RGraph/images/barh16.png differ diff --git a/RGraph/images/barh2.gif b/RGraph/images/barh2.gif new file mode 100644 index 0000000..0ff2a4c Binary files /dev/null and b/RGraph/images/barh2.gif differ diff --git a/RGraph/images/barh2.png b/RGraph/images/barh2.png new file mode 100644 index 0000000..4aea219 Binary files /dev/null and b/RGraph/images/barh2.png differ diff --git a/RGraph/images/barh32.gif b/RGraph/images/barh32.gif new file mode 100644 index 0000000..3214fb1 Binary files /dev/null and b/RGraph/images/barh32.gif differ diff --git a/RGraph/images/barh32.png b/RGraph/images/barh32.png new file mode 100644 index 0000000..265baeb Binary files /dev/null and b/RGraph/images/barh32.png differ diff --git a/RGraph/images/barh4.gif b/RGraph/images/barh4.gif new file mode 100644 index 0000000..af0b116 Binary files /dev/null and b/RGraph/images/barh4.gif differ diff --git a/RGraph/images/barh4.png b/RGraph/images/barh4.png new file mode 100644 index 0000000..ff546aa Binary files /dev/null and b/RGraph/images/barh4.png differ diff --git a/RGraph/images/barh8.gif b/RGraph/images/barh8.gif new file mode 100644 index 0000000..60462be Binary files /dev/null and b/RGraph/images/barh8.gif differ diff --git a/RGraph/images/barh8.png b/RGraph/images/barh8.png new file mode 100644 index 0000000..bcc8b31 Binary files /dev/null and b/RGraph/images/barh8.png differ diff --git a/RGraph/images/bari1.gif b/RGraph/images/bari1.gif new file mode 100644 index 0000000..a27f61c Binary files /dev/null and b/RGraph/images/bari1.gif differ diff --git a/RGraph/images/bari1.png b/RGraph/images/bari1.png new file mode 100644 index 0000000..9b6bc7b Binary files /dev/null and b/RGraph/images/bari1.png differ diff --git a/RGraph/images/bari16.gif b/RGraph/images/bari16.gif new file mode 100644 index 0000000..71ce8c1 Binary files /dev/null and b/RGraph/images/bari16.gif differ diff --git a/RGraph/images/bari16.png b/RGraph/images/bari16.png new file mode 100644 index 0000000..1ff4e4c Binary files /dev/null and b/RGraph/images/bari16.png differ diff --git a/RGraph/images/bari2.gif b/RGraph/images/bari2.gif new file mode 100644 index 0000000..da930d8 Binary files /dev/null and b/RGraph/images/bari2.gif differ diff --git a/RGraph/images/bari2.png b/RGraph/images/bari2.png new file mode 100644 index 0000000..f519228 Binary files /dev/null and b/RGraph/images/bari2.png differ diff --git a/RGraph/images/bari32.gif b/RGraph/images/bari32.gif new file mode 100644 index 0000000..3293a99 Binary files /dev/null and b/RGraph/images/bari32.gif differ diff --git a/RGraph/images/bari32.png b/RGraph/images/bari32.png new file mode 100644 index 0000000..3d0e340 Binary files /dev/null and b/RGraph/images/bari32.png differ diff --git a/RGraph/images/bari4.gif b/RGraph/images/bari4.gif new file mode 100644 index 0000000..b688bf5 Binary files /dev/null and b/RGraph/images/bari4.gif differ diff --git a/RGraph/images/bari4.png b/RGraph/images/bari4.png new file mode 100644 index 0000000..e0f3f04 Binary files /dev/null and b/RGraph/images/bari4.png differ diff --git a/RGraph/images/bari8.gif b/RGraph/images/bari8.gif new file mode 100644 index 0000000..5af4a5f Binary files /dev/null and b/RGraph/images/bari8.gif differ diff --git a/RGraph/images/bari8.png b/RGraph/images/bari8.png new file mode 100644 index 0000000..75fcce4 Binary files /dev/null and b/RGraph/images/bari8.png differ diff --git a/RGraph/images/barj1.gif b/RGraph/images/barj1.gif new file mode 100644 index 0000000..12f3be6 Binary files /dev/null and b/RGraph/images/barj1.gif differ diff --git a/RGraph/images/barj1.png b/RGraph/images/barj1.png new file mode 100644 index 0000000..93b1581 Binary files /dev/null and b/RGraph/images/barj1.png differ diff --git a/RGraph/images/barj16.gif b/RGraph/images/barj16.gif new file mode 100644 index 0000000..227798d Binary files /dev/null and b/RGraph/images/barj16.gif differ diff --git a/RGraph/images/barj16.png b/RGraph/images/barj16.png new file mode 100644 index 0000000..b5b57f2 Binary files /dev/null and b/RGraph/images/barj16.png differ diff --git a/RGraph/images/barj2.gif b/RGraph/images/barj2.gif new file mode 100644 index 0000000..dcbe4f1 Binary files /dev/null and b/RGraph/images/barj2.gif differ diff --git a/RGraph/images/barj2.png b/RGraph/images/barj2.png new file mode 100644 index 0000000..35c0a9d Binary files /dev/null and b/RGraph/images/barj2.png differ diff --git a/RGraph/images/barj32.gif b/RGraph/images/barj32.gif new file mode 100644 index 0000000..cc4513b Binary files /dev/null and b/RGraph/images/barj32.gif differ diff --git a/RGraph/images/barj32.png b/RGraph/images/barj32.png new file mode 100644 index 0000000..75cfb8d Binary files /dev/null and b/RGraph/images/barj32.png differ diff --git a/RGraph/images/barj4.gif b/RGraph/images/barj4.gif new file mode 100644 index 0000000..beece42 Binary files /dev/null and b/RGraph/images/barj4.gif differ diff --git a/RGraph/images/barj4.png b/RGraph/images/barj4.png new file mode 100644 index 0000000..da91e06 Binary files /dev/null and b/RGraph/images/barj4.png differ diff --git a/RGraph/images/barj8.gif b/RGraph/images/barj8.gif new file mode 100644 index 0000000..c680ba3 Binary files /dev/null and b/RGraph/images/barj8.gif differ diff --git a/RGraph/images/barj8.png b/RGraph/images/barj8.png new file mode 100644 index 0000000..17105d4 Binary files /dev/null and b/RGraph/images/barj8.png differ diff --git a/RGraph/images/bn.business.png b/RGraph/images/bn.business.png new file mode 100644 index 0000000..c37f7c4 Binary files /dev/null and b/RGraph/images/bn.business.png differ diff --git a/RGraph/images/bn.personal.png b/RGraph/images/bn.personal.png new file mode 100644 index 0000000..0db605e Binary files /dev/null and b/RGraph/images/bn.personal.png differ diff --git a/RGraph/images/border-radius.png b/RGraph/images/border-radius.png new file mode 100644 index 0000000..9f16386 Binary files /dev/null and b/RGraph/images/border-radius.png differ diff --git a/RGraph/images/buy.png b/RGraph/images/buy.png new file mode 100644 index 0000000..b1c72af Binary files /dev/null and b/RGraph/images/buy.png differ diff --git a/RGraph/images/buzz.png b/RGraph/images/buzz.png new file mode 100644 index 0000000..a5e3e54 Binary files /dev/null and b/RGraph/images/buzz.png differ diff --git a/RGraph/images/chrome_logo.png b/RGraph/images/chrome_logo.png new file mode 100644 index 0000000..8738a80 Binary files /dev/null and b/RGraph/images/chrome_logo.png differ diff --git a/RGraph/images/coins.jpg b/RGraph/images/coins.jpg new file mode 100644 index 0000000..e108b71 Binary files /dev/null and b/RGraph/images/coins.jpg differ diff --git a/RGraph/images/context.png b/RGraph/images/context.png new file mode 100644 index 0000000..573658b Binary files /dev/null and b/RGraph/images/context.png differ diff --git a/RGraph/images/delicious.png b/RGraph/images/delicious.png new file mode 100644 index 0000000..1bda07e Binary files /dev/null and b/RGraph/images/delicious.png differ diff --git a/RGraph/images/download-beta-sml.png b/RGraph/images/download-beta-sml.png new file mode 100644 index 0000000..1cf11f7 Binary files /dev/null and b/RGraph/images/download-beta-sml.png differ diff --git a/RGraph/images/download-beta.png b/RGraph/images/download-beta.png new file mode 100644 index 0000000..aab14cd Binary files /dev/null and b/RGraph/images/download-beta.png differ diff --git a/RGraph/images/download-stable-sml.png b/RGraph/images/download-stable-sml.png new file mode 100644 index 0000000..92df4fe Binary files /dev/null and b/RGraph/images/download-stable-sml.png differ diff --git a/RGraph/images/download-stable.png b/RGraph/images/download-stable.png new file mode 100644 index 0000000..057b971 Binary files /dev/null and b/RGraph/images/download-stable.png differ diff --git a/RGraph/images/download.png b/RGraph/images/download.png new file mode 100644 index 0000000..722b459 Binary files /dev/null and b/RGraph/images/download.png differ diff --git a/RGraph/images/facebook.png b/RGraph/images/facebook.png new file mode 100644 index 0000000..40b9d27 Binary files /dev/null and b/RGraph/images/facebook.png differ diff --git a/RGraph/images/favicon.ico b/RGraph/images/favicon.ico new file mode 100644 index 0000000..421f02d Binary files /dev/null and b/RGraph/images/favicon.ico differ diff --git a/RGraph/images/favicon.png b/RGraph/images/favicon.png new file mode 100644 index 0000000..d3275e6 Binary files /dev/null and b/RGraph/images/favicon.png differ diff --git a/RGraph/images/friendfeed.png b/RGraph/images/friendfeed.png new file mode 100644 index 0000000..66f593f Binary files /dev/null and b/RGraph/images/friendfeed.png differ diff --git a/RGraph/images/googlegroups.png b/RGraph/images/googlegroups.png new file mode 100644 index 0000000..3a8dbaa Binary files /dev/null and b/RGraph/images/googlegroups.png differ diff --git a/RGraph/images/html2.gif b/RGraph/images/html2.gif new file mode 100644 index 0000000..b908c3a Binary files /dev/null and b/RGraph/images/html2.gif differ diff --git a/RGraph/images/html2.png b/RGraph/images/html2.png new file mode 100644 index 0000000..b9c40cd Binary files /dev/null and b/RGraph/images/html2.png differ diff --git a/RGraph/images/icons_combined.png b/RGraph/images/icons_combined.png new file mode 100644 index 0000000..7652beb Binary files /dev/null and b/RGraph/images/icons_combined.png differ diff --git a/RGraph/images/introspection.png b/RGraph/images/introspection.png new file mode 100644 index 0000000..0725852 Binary files /dev/null and b/RGraph/images/introspection.png differ diff --git a/RGraph/images/logo.png b/RGraph/images/logo.png new file mode 100644 index 0000000..9e0e607 Binary files /dev/null and b/RGraph/images/logo.png differ diff --git a/RGraph/images/merry-christmas-snowman.png b/RGraph/images/merry-christmas-snowman.png new file mode 100644 index 0000000..7e4de64 Binary files /dev/null and b/RGraph/images/merry-christmas-snowman.png differ diff --git a/RGraph/images/png.icon.png b/RGraph/images/png.icon.png new file mode 100644 index 0000000..f04b7a3 Binary files /dev/null and b/RGraph/images/png.icon.png differ diff --git a/RGraph/images/reddit.png b/RGraph/images/reddit.png new file mode 100644 index 0000000..02b1926 Binary files /dev/null and b/RGraph/images/reddit.png differ diff --git a/RGraph/images/rss.png b/RGraph/images/rss.png new file mode 100644 index 0000000..ef47bcb Binary files /dev/null and b/RGraph/images/rss.png differ diff --git a/RGraph/images/rss_big.png b/RGraph/images/rss_big.png new file mode 100644 index 0000000..88546f9 Binary files /dev/null and b/RGraph/images/rss_big.png differ diff --git a/RGraph/images/sq0.png b/RGraph/images/sq0.png new file mode 100644 index 0000000..b0f6a42 Binary files /dev/null and b/RGraph/images/sq0.png differ diff --git a/RGraph/images/sq1.png b/RGraph/images/sq1.png new file mode 100644 index 0000000..4b86ffd Binary files /dev/null and b/RGraph/images/sq1.png differ diff --git a/RGraph/images/sq2.png b/RGraph/images/sq2.png new file mode 100644 index 0000000..763f5ef Binary files /dev/null and b/RGraph/images/sq2.png differ diff --git a/RGraph/images/sq3.png b/RGraph/images/sq3.png new file mode 100644 index 0000000..b6e8e43 Binary files /dev/null and b/RGraph/images/sq3.png differ diff --git a/RGraph/images/sq4.png b/RGraph/images/sq4.png new file mode 100644 index 0000000..7585cc8 Binary files /dev/null and b/RGraph/images/sq4.png differ diff --git a/RGraph/images/sq5.png b/RGraph/images/sq5.png new file mode 100644 index 0000000..123aa10 Binary files /dev/null and b/RGraph/images/sq5.png differ diff --git a/RGraph/images/sq6.png b/RGraph/images/sq6.png new file mode 100644 index 0000000..cfd40b0 Binary files /dev/null and b/RGraph/images/sq6.png differ diff --git a/RGraph/images/sq7.png b/RGraph/images/sq7.png new file mode 100644 index 0000000..0b2f95c Binary files /dev/null and b/RGraph/images/sq7.png differ diff --git a/RGraph/images/sq8.png b/RGraph/images/sq8.png new file mode 100644 index 0000000..341f8e6 Binary files /dev/null and b/RGraph/images/sq8.png differ diff --git a/RGraph/images/sq9.png b/RGraph/images/sq9.png new file mode 100644 index 0000000..a8b9786 Binary files /dev/null and b/RGraph/images/sq9.png differ diff --git a/RGraph/images/sqg.png b/RGraph/images/sqg.png new file mode 100644 index 0000000..edbaf8b Binary files /dev/null and b/RGraph/images/sqg.png differ diff --git a/RGraph/images/structure.png b/RGraph/images/structure.png new file mode 100644 index 0000000..855d518 Binary files /dev/null and b/RGraph/images/structure.png differ diff --git a/RGraph/images/stumble.png b/RGraph/images/stumble.png new file mode 100644 index 0000000..80c153e Binary files /dev/null and b/RGraph/images/stumble.png differ diff --git a/RGraph/images/twitter.png b/RGraph/images/twitter.png new file mode 100644 index 0000000..4bcc4f2 Binary files /dev/null and b/RGraph/images/twitter.png differ diff --git a/RGraph/images/unicef.png b/RGraph/images/unicef.png new file mode 100644 index 0000000..f9f7fcd Binary files /dev/null and b/RGraph/images/unicef.png differ diff --git a/RGraph/index.html b/RGraph/index.html new file mode 100644 index 0000000..b7767e2 --- /dev/null +++ b/RGraph/index.html @@ -0,0 +1,872 @@ + + + + + + + + + + RGraph: HTML5 canvas graph library based on the HTML5 canvas tag + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + +
+
+
+ RGraph: HTML5 canvas graphing library +
+ +
+

RGraph: HTML5 canvas graph library based on the HTML5 canvas tag

+ Interactive javascript/HTML5 canvas graphs using the HTML5 canvas tag for all platforms + +
+ +
+ + Download the beta version + Download the stable version + + + + Download the beta version + Download the beta version + +
+ + + + + +
+ + + Bookmark and share: + + + +
+ + Bookmark with delicious + + + + tweet this site + + + + +
+ + +
+ +   +
+
+ +
+ +
+
+
Note: Starting from preview 3, Internet Explorer 9 has canvas support.
+
+
+ + + + + + +
+ +
+ + +
+ [Please wait for the onload event to fire...] + + + +
+ An example of the line chart. This chart has zoom functionality enabled in area mode. Simply draw a rectangle around + the area you wish to zoom in on. Once the zoom appears you can move it around with the left mouse button, move the + canvas around within the zoom using the right mouse button and double click the zoom to expand it full size.
+ More Line charts... +
+ + +
+ + + [Please wait for the onload event to fire...] + + + +
+ The bar chart has tooltips, along with a context menu. The context menu has options to zoom the canvas (in full + canvas mode) and shows an example of the ModalDialog which is part of RGraph. The context menu shows one + level of submenus. It also shows how you can add an option to get a PNG version of the graph.
+ More Bar charts... +
+ +
+ + + [Please wait for the onload event to fire...] + + + +
+ The Rose chart is a less well known chart but can be very effective in showing information in some circumstances. This + example shows tooltips and adjusting.
+ More Rose charts... +
+
+
+ + + + + +
+ +

Introduction to RGraph

+ +

+ RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) + to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, + funnel chart, gantt chart, horizontal bar chart, LED display, line graph, meter, odometer, pie chart, progress bar, rose chart, + scatter graph and traditional radar chart. RGraph is covered by the RGraph License. +

+ + Ideal for Chrome extensions! + +

+ Being Javascript, RGraph is ideal for use in Chrome extensions and Web Apps. You can download a sample + extension here. +

+ +

+ Full documentation » +

+ +
+ +

Contents

+ + + +

Features

+ + + +

Implementation information

+ + + +

Other

+ + +
+ +
+ + + +
 
 
+

Download

+ + + + + + + + [Only available on http://www.rgraph.net] + + + + + + + +

License

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

+ RGraph is covered by the RGraph license. A summary is that for commercial/business use + there is a small one-time licensing fee to pay. For non-commercial purposes it's freely usable. + + There are some + licensing FAQs that should help to answer any + questions you might have. If you need one, you can get an invoice here. +

+ +

+ If you have any questions about RGraph licensing, you can send your question to: licensing@rgraph.net. + If your question is of a support nature though, please use the support forum. +

+ + + +

+ +

+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/RGraph/scripts/minify b/RGraph/scripts/minify new file mode 100644 index 0000000..3524429 --- /dev/null +++ b/RGraph/scripts/minify @@ -0,0 +1,104 @@ +#!/usr/bin/php -q + \ No newline at end of file diff --git a/alert_status.php b/alert_status.php new file mode 100644 index 0000000..0b3edee --- /dev/null +++ b/alert_status.php @@ -0,0 +1,11 @@ +=1) { + echo "Russ- You're being summoned!
"; +} +if (summon_status("beth")>=1) { + echo "Beth- You're being summoned!
"; +} +?> diff --git a/beth.txt b/beth.txt new file mode 100644 index 0000000..c227083 --- /dev/null +++ b/beth.txt @@ -0,0 +1 @@ +0 \ No newline at end of file diff --git a/check_climate_status.php b/check_climate_status.php new file mode 100644 index 0000000..4223782 --- /dev/null +++ b/check_climate_status.php @@ -0,0 +1,43 @@ +"; +$array=xml2array($output); +#print_r($array); + +echo ""; + echo ""; + echo ""; + echo ""; + $mode=$array['nodeInfo']['node']['property']['1_attr']['formatted']; + echo ""; + $fan=$array['nodeInfo']['properties']['property']['0_attr']['formatted']; + echo ""; + echo ""; + echo ""; +echo "
Set Temperature:".$array['nodeInfo']['node']['property']['2_attr']['formatted']."
Current Temperature:".($array['nodeInfo']['node']['property']['0_attr']['formatted'])."
Temperature Mode:".($array['nodeInfo']['node']['property']['1_attr']['formatted'])."
Fan Status:".($array['nodeInfo']['properties']['property']['0_attr']['formatted'])."
Humidity:".($array['nodeInfo']['properties']['property']['2_attr']['formatted'])."
  
Mode Fan
"; +?> diff --git a/check_isy99i_occupancy_status.php b/check_isy99i_occupancy_status.php new file mode 100644 index 0000000..da43b25 --- /dev/null +++ b/check_isy99i_occupancy_status.php @@ -0,0 +1,71 @@ +"; +echo ""; +foreach ($programs as $program) { + $ch = curl_init(); + curl_setopt($ch, CURLOPT_URL,"http://isy99/rest/programs/$program"); + + curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); + curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); + curl_setopt($ch, CURLOPT_USERPWD, 'admin:admin'); + + $output = curl_exec($ch); + $array=xml2array($output); + #echo "
";
+  #$array=xml2array($output);
+  #print_r($array);
+  #exit;
+
+  echo "
"; + $status=($array['programs']['program_attr']['status']); + if ($status=="true") { + echo ""; + } else { + echo ""; + } + $i++; + if ($i==5) { + echo "
".$array['programs']['program']['name']."
"; + $i=0; + $colspan++; + } +} +$colspan++; +echo "
"; +echo ""; +echo "
"; +echo ""; +if (summon_status("russ")>=1) { + echo ""; +} else { + echo ""; +} +echo ""; +if (summon_status("beth")>=1) { + echo ""; +} else { + echo ""; +} +echo "
Summon Russ + +Summon Beth + +
"; +echo ""; +?> diff --git a/check_isy99i_status.php b/check_isy99i_status.php new file mode 100644 index 0000000..613e1a8 --- /dev/null +++ b/check_isy99i_status.php @@ -0,0 +1,57 @@ +"; +#$array=xml2array($output); +#print_r($array); +#exit; + +$device=$_GET['device']; +$i=0; + +$ch = curl_init(); +curl_setopt($ch, CURLOPT_URL,"http://isy99/rest/nodes"); +curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); +curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); +curl_setopt($ch, CURLOPT_USERPWD, 'admin:admin'); + +$output = curl_exec($ch); +$array=xml2array($output); + +echo "
"; +echo ""; +foreach ($array[nodes][node] as $device) { + $match=0; + foreach ($blacklist as $item) { + if ($device[address] == $item) { + $match=1; + } + } + if ($match == 0) { + $address = "nodes/".str_replace(' ', '%20', ($device[address])); + $name = $device[name]; + $status = $device['property_attr']['formatted']; + if ($status=="On" or $status=="true") { + $i++; + echo ""; + echo ""; + } elseif ($status=="Off" or $status=="false") { + $i++; + echo ""; + echo ""; + } + if ($i==8) { + echo "
".$name."
".$name."
"; + $i=0; + } + } +} + +echo "
"; + +?> diff --git a/check_power_status.php b/check_power_status.php new file mode 100644 index 0000000..afaff9a --- /dev/null +++ b/check_power_status.php @@ -0,0 +1,149 @@ +"; +$array=xml2array($output); +#print_r($array); + +echo "AC Line Power Now:" . ($array['LiveData']['Voltage']['Total']['VoltageNow']/10)."
"; +#echo "Current Kw:" . ($array['LiveData']['Power']['Total']['PowerNow']/1000)."
"; +echo "Server Kw Draw:" . ($array['LiveData']['Power']['MTU1']['PowerNow']/1000)."
"; +echo "House Kw Draw:" . abs(($array['LiveData']['Power']['MTU1']['PowerNow']/1000)-($array['LiveData']['Power']['MTU2']['PowerNow']/1000))."
"; +echo "Total Kw Draw:" . ($array['LiveData']['Power']['MTU2']['PowerNow']/1000)."
"; + + + + + + + + +function xml2array($contents, $get_attributes=1, $priority = 'tag') { + if(!$contents) return array(); + + if(!function_exists('xml_parser_create')) { + //print "'xml_parser_create()' function not found!"; + return array(); + } + + //Get the XML parser of PHP - PHP must have this module for the parser to work + $parser = xml_parser_create(''); + xml_parser_set_option($parser, XML_OPTION_TARGET_ENCODING, "UTF-8"); # http://minutillo.com/steve/weblog/2004/6/17/php-xml-and-character-encodings-a-tale-of-sadness-rage-and-data-loss + xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0); + xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, 1); + xml_parse_into_struct($parser, trim($contents), $xml_values); + xml_parser_free($parser); + + if(!$xml_values) return;//Hmm... + + //Initializations + $xml_array = array(); + $parents = array(); + $opened_tags = array(); + $arr = array(); + + $current = &$xml_array; //Refference + + //Go through the tags. + $repeated_tag_index = array();//Multiple tags with same name will be turned into an array + foreach($xml_values as $data) { + unset($attributes,$value);//Remove existing values, or there will be trouble + + //This command will extract these variables into the foreach scope + // tag(string), type(string), level(int), attributes(array). + extract($data);//We could use the array by itself, but this cooler. + + $result = array(); + $attributes_data = array(); + + if(isset($value)) { + if($priority == 'tag') $result = $value; + else $result['value'] = $value; //Put the value in a assoc array if we are in the 'Attribute' mode + } + + //Set the attributes too. + if(isset($attributes) and $get_attributes) { + foreach($attributes as $attr => $val) { + if($priority == 'tag') $attributes_data[$attr] = $val; + else $result['attr'][$attr] = $val; //Set all the attributes in a array called 'attr' + } + } + + //See tag status and do the needed. + if($type == "open") {//The starting of the tag '' + $parent[$level-1] = &$current; + if(!is_array($current) or (!in_array($tag, array_keys($current)))) { //Insert New tag + $current[$tag] = $result; + if($attributes_data) $current[$tag. '_attr'] = $attributes_data; + $repeated_tag_index[$tag.'_'.$level] = 1; + + $current = &$current[$tag]; + + } else { //There was another element with the same tag name + + if(isset($current[$tag][0])) {//If there is a 0th element it is already an array + $current[$tag][$repeated_tag_index[$tag.'_'.$level]] = $result; + $repeated_tag_index[$tag.'_'.$level]++; + } else {//This section will make the value an array if multiple tags with the same name appear together + $current[$tag] = array($current[$tag],$result);//This will combine the existing item and the new item together to make an array + $repeated_tag_index[$tag.'_'.$level] = 2; + + if(isset($current[$tag.'_attr'])) { //The attribute of the last(0th) tag must be moved as well + $current[$tag]['0_attr'] = $current[$tag.'_attr']; + unset($current[$tag.'_attr']); + } + + } + $last_item_index = $repeated_tag_index[$tag.'_'.$level]-1; + $current = &$current[$tag][$last_item_index]; + } + + } elseif($type == "complete") { //Tags that ends in 1 line '' + //See if the key is already taken. + if(!isset($current[$tag])) { //New Key + $current[$tag] = $result; + $repeated_tag_index[$tag.'_'.$level] = 1; + if($priority == 'tag' and $attributes_data) $current[$tag. '_attr'] = $attributes_data; + + } else { //If taken, put all things inside a list(array) + if(isset($current[$tag][0]) and is_array($current[$tag])) {//If it is already an array... + + // ...push the new element into that array. + $current[$tag][$repeated_tag_index[$tag.'_'.$level]] = $result; + + if($priority == 'tag' and $get_attributes and $attributes_data) { + $current[$tag][$repeated_tag_index[$tag.'_'.$level] . '_attr'] = $attributes_data; + } + $repeated_tag_index[$tag.'_'.$level]++; + + } else { //If it is not an array... + $current[$tag] = array($current[$tag],$result); //...Make it an array using using the existing value and the new value + $repeated_tag_index[$tag.'_'.$level] = 1; + if($priority == 'tag' and $get_attributes) { + if(isset($current[$tag.'_attr'])) { //The attribute of the last(0th) tag must be moved as well + + $current[$tag]['0_attr'] = $current[$tag.'_attr']; + unset($current[$tag.'_attr']); + } + + if($attributes_data) { + $current[$tag][$repeated_tag_index[$tag.'_'.$level] . '_attr'] = $attributes_data; + } + } + $repeated_tag_index[$tag.'_'.$level]++; //0 and 1 index is already taken + } + } + + } elseif($type == 'close') { //End of tag '' + $current = &$parent[$level-1]; + } + } + + return($xml_array); +} + +?> diff --git a/css/ModalDialog.css b/css/ModalDialog.css new file mode 100644 index 0000000..c9c339c --- /dev/null +++ b/css/ModalDialog.css @@ -0,0 +1,90 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + + /** + * Modal Dialog + */ + .modalBg { + position: absolute; + top: 0px; + left: 0px; + filter: Alpha(Opacity=50); + -moz-opacity: 0.5; + background-color: #ddd; + visibility: hidden; + width: expression(document.body.clientWidth); + height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight); + z-index: 100; + } + + .modalDialog { + position: absolute; + top: 0px; + left: 0px; + visibility: hidden; + z-index: 101; + background-color: white; + top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2); + left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2); + border: 1px solid #777; + border-top: 0; + padding: 20px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + } + + .modalDialog .modalDialogHeader { + margin:0; + padding: 0px; + color: #333; + font-weight: bold; + background-color: #ccc; + border: 1px solid #989898; + position: absolute; + top: 0px; + left: -1px; + height: 7px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-bottomright: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-bottom-right-radius: 0; + } + + .modalShadow { + position: absolute; + background-color: black; + top: 0px; + left: 0px; + z-index: 99; + top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2); + left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2); + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + opacity: 0.5; + } + + /** + * This is not part of the core Modal Dialog styles, instead it's just so that the dialog looks + * respectable. + */ + h4 { + font-family: Verdana, Arial; + padding-top: 10px; + } \ No newline at end of file diff --git a/css/common.css b/css/common.css new file mode 100644 index 0000000..cb2b287 --- /dev/null +++ b/css/common.css @@ -0,0 +1,297 @@ +@font-face { + font-family: Delicious; + src: url('/Delicious-Roman.otf') +} + +/** +* Various +*/ +body { + margin: 0px; +} + +a { + text-decoration: none; +} + +code { + background-color: #dedede; + border: 1px dashed #aaaaaa; + padding: 3px; + display: block; + font-family: Monospace; +} + + +/** +* Datagrid stuff +*/ +table.datagrid { + border-collapse: collapse; + margin-left: 30px; +} + +table.datagrid th { + background-color: #ccc; + border: 1px solid #aaa; + padding: 2px; +} + +table.datagrid tr { + background-color: #ddd; +} + +table.datagrid tr.oddrow { + background-color: #eee; +} + +table.datagrid td { + border: 1px solid #aaa; + padding: 3px; +} + + +/** +* Master div +*/ +.master { + font-family: Georgia; +} + + +/** +* Header section +*/ +.header { + margin-right: 10px; + letter-spacing: 2px; + background-image: url(/images/hdrbg.jpg); + margin-left: 10px; +} + +.header h1 { + margin-top: 0px; +} + +.tagline { + font-size: 8pt; + position: relative; + top: -15px; + left: 15px; + letter-spacing: 0px; +} + + +/** +* Top nav +*/ +.topnav { + color: white; + background-color: #314657; /* Old */ + background-color: #2D4B33; + padding: 1px; + padding-left: 10px; +} + +.topnav a { + color: white; +} + + +/** +* Left nav +*/ +.leftnav, +.searchbox { + width: 180px; + color: black; + background-color: #FF5A18; + margin-left: 5px; + margin-top: 10px; + padding: 10px; + padding-top: 0; + padding-bottom: 0; + padding: expression('10px'); + border: 1px solid #B33E11; +} + +.leftnav { + box-shadow: 3px 3px 3px #aaa; + border-radius: 5px; + -moz-box-shadow: 3px 3px 3px #aaa; + -webkit-box-shadow: 3px 3px 3px #aaa; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + width: 180px; + float: left; + hmargin: 5px; +} + +.leftnav h4 { + border-bottom: 1px solid black; +} +.leftnav a { + color: black; +} + +.leftnav ul { + margin-left: -20px; + margin-left: expression('20px'); + list-style-type: square; +} + + +/** +* Main body section +*/ +.mainbody { + margin-left: 220px; +} + +.borderedTable table { + border-collapse: collapse; +} + +.borderedTable th { + background-color: #dddddd; + border: 1px solid #aaaaaa; + font-size: 70%; + padding-left: 3px; + padding-right: 3px; +} + +.borderedTable td { + vertical-align: top; + font-size: 70%; + border: 1px solid #dddddd; +} + +.newsitem { + margin-bottom: 25px; +} + +.newsitem h2, +.newsitem h1 { + display: inline; +} + +.newsitem .date { + font-size: 70%; +} + +p.firstLetter:first-letter { + font-size: 200%; + font-style: italic; + font-weight: bold; + float: left; + padding-right: 3px; +} + +.newsitem p.update { + background-color: #efefef; + border: 1px dashed black; + padding: 5px; +} + + +/** +* Comments +*/ +.comment { + padding: 5px; + margin-bottom: 20px; + font-size: 80%; + background-color: #efefef; + border: 1px dashed #cccccc; +} + +.comment .body { + margin-top: 5px; + padding-left: 7px; +} + +.comment .quoteLink { + text-align: right; + font-size: 90%; +} + + +/** +* Errors +*/ +.error { + color: red; + font-style: italic; +} + + +/** +* Copyright text +*/ +.copyright { + text-align: right; + font-size: 75%; +} + + +/** +* Admin page +*/ +.adminPage table { + font-family: Verdana; + font-size: 10pt; +} + +.adminPage th { + background-color: #dddddd; +} + + +/** +* Tools page +*/ +#toolsPage th, +#toolsPage td { +} + +#toolsPage th { + font-weight: bold; + text-align: right; + white-space: nowrap; + vertical-align: top; + background-color: #ffffcc; +} + +#toolsPage textarea { + height: 200px; + width: 800px; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ffffff, endColorstr=#ffffcc); +} + +#shortcuts th { + +} + +#shortcuts th { + text-align: left; + background-color: #ededed; + padding: 2px; +} + +/** +* Download header/footer +*/ +div#download pre, +div#download pre a { + +} + +/** +* Code +*/ +div.boxout, +pre.code { + border: 2px dashed gray; + padding: 3px; + background-color: #eee; +} \ No newline at end of file diff --git a/css/website.css b/css/website.css new file mode 100644 index 0000000..827b5fb --- /dev/null +++ b/css/website.css @@ -0,0 +1,253 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + +body { + padding-top: 10px; + font-family: Georgia, Arial, Sans-Serif; +} + +pre#code, +code { + display: block; + border: 1px solid #aaa; + padding: 5px; + background-color: #ddd; +} + +#breadcrumb, +#logo { + border: 2px black solid; + background-color: #eee; + padding: 3px; + top: 0; + right: 0; + position: absolute; + margin: 2px; + opacity: 0.8; +} +#breadcrumb a, +#logo a { + text-decoration: none; +} + +th { + text-align: left; + border: 1px solid gray; + background-color: #ddd; + padding: 3px; + vertical-align: top; +} + +td { + vertical-align: top; +} + +ol li { + margin-top: 20px; +} + +ol#implementation li code { + margin-top: 5px; +} + +td.description { + background-color: #eee; + padding: 3px; + border: 1px solid #ddd; +} + +td.chart { + text-align: center; +} + +.example_boxout { + background-color: #eee; + padding: 3px; + border: 1px solid #aaa; +} + +.code { + padding: 5px; + background-color: #eee; + border: 2px dashed gray +} + +/** +* This is semi-transparent box in the top left corner +*/ +div#devtag { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: #999 3px 3px 3px; + -moz-box-shadow: #999 3px 3px 3px; + box-shadow: #999 3px 3px 3px; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135); + position: fixed; + top: 2px; + right: 2px; + width: 145px; + border: 2px solid black; + text-align: center; + font-weight: bold; + font-family: Arial; + background-color: #fdd; +} + +div#devtag a { + font-size: 10px; + text-decoration: none; + color: blue; + opacity: 1; +} + +/** +* This overrides something defined earlier +*/ +ol#colors li { + margin: 0; +} + +/** +* styles lists +*/ +div.list-item { + width: 220px; + display: inline-block; +} + +div.list-item.label { + width: 170px; +} + +legend { + background-color: #efefef; + border: 1px solid #75736e; +} + +body#licensing span { + font-size: 120%; +} + +/** +* The yellow warning box on the front page +*/ +div.warning { + border: 1px solid black; + text-align: center; + background-color: #ffa; + padding: 5px; + margin-top: 5px; + border-radius: 15px; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + -webkit-box-shadow: #aaa 1px 1px 15px; + -moz-box-shadow: #aaa 1px 1px 15px; + box-shadow: #aaa 1px 1px 15px; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135); + z-index: 98; +} + +div.canvasfallback { + border: 2px dashed red; + background-color: #fee; + width: 475px; + height: 150px; + text-align: center; + padding-top: 50px; +} + +/** +* The title "bar" +*/ +div#title { +} + +div#title div#image { + float: left; + margin-right: 15px; +} + +div#title div#text { + padding-top: 5px; + margin-left: 70px; +} + + +div.warning p { + text-align: center; + margin-top: 5px; + margin-bottom: 5px; + font-weight: bold; +} + + +div.description { + border: 1px dashed gray; + background-color: #eee; + font-size: 75%; + padding: 3px; +} + +div#social { + display: inline; + display: inline-block; +} + + +/*************************************************************************************** +* * +* RGraph CSS classes. * +* * +* These allow you to customise how tooltips and context menus will appear. To override * +* the CSS defined in the graph scripts, you may need to use " ! important" like so: * +* * +* font-weight: bold ! important * +* * +* You don't always need to use this, only if you're trying to override something which * +* the script sets. * +* * +***************************************************************************************/ + +.RGraph_png { +} + +.RGraph_tooltip { +} + +.RGraph_contextmenu { +} + +.RGraph_contextmenu_background { +} + +.RGraph_contextmenu_item { +} + +.RGraph_zoom_window { +} + +.RGraph_zoomed_canvas { +} + +.ModalDialog_background { +} + +.ModalDialog_dialog { +} + +.ModalDialog_topbar { +} \ No newline at end of file diff --git a/excanvas/EXCANVAS-LICENSE.txt b/excanvas/EXCANVAS-LICENSE.txt new file mode 100644 index 0000000..6e802f3 --- /dev/null +++ b/excanvas/EXCANVAS-LICENSE.txt @@ -0,0 +1,214 @@ + Versions + ======== + The excanvas.original.js is the original unminified and uncompressed library. The excanvas.compressed.js has been minified by hand and + Gzip compressed. + + License for excanvas.js + ======================= + + This license is applicable to excanvas.original.js and excanvas.compressed.js ONLY. + + License + ======= + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/excanvas/HTACCESS-SAMPLE b/excanvas/HTACCESS-SAMPLE new file mode 100644 index 0000000..f0010f7 --- /dev/null +++ b/excanvas/HTACCESS-SAMPLE @@ -0,0 +1,11 @@ +## +## This is an example Apache .htaccess file that can be used to add the required +## Content-Encoding: header to the compressed version of the ExCanvas library. +## This .htaccess file is ONLY required for the compressed version. +## +## If you are not using the compressed version, or are doing the compression +## yourself (it could for example, be built into your web server), then you +## do not need this file. +## + +AddEncoding gzip .js \ No newline at end of file diff --git a/excanvas/excanvas.compressed.js b/excanvas/excanvas.compressed.js new file mode 100644 index 0000000..fc3d35c Binary files /dev/null and b/excanvas/excanvas.compressed.js differ diff --git a/excanvas/excanvas.original.js b/excanvas/excanvas.original.js new file mode 100644 index 0000000..650e3f3 --- /dev/null +++ b/excanvas/excanvas.original.js @@ -0,0 +1,1421 @@ +// Copyright 2006 Google Inc. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// Known Issues: +// +// * Patterns only support repeat. +// * Radial gradient are not implemented. The VML version of these look very +// different from the canvas one. +// * Clipping paths are not implemented. +// * Coordsize. The width and height attribute have higher priority than the +// width and height style values which isn't correct. +// * Painting mode isn't implemented. +// * Canvas width/height should is using content-box by default. IE in +// Quirks mode will draw the canvas using border-box. Either change your +// doctype to HTML5 +// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) +// or use Box Sizing Behavior from WebFX +// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) +// * Non uniform scaling does not correctly scale strokes. +// * Optimize. There is always room for speed improvements. + +// Only add this code if we do not already have a canvas implementation +if (!document.createElement('canvas').getContext) { + +(function() { + + // alias some functions to make (compiled) code shorter + var m = Math; + var mr = m.round; + var ms = m.sin; + var mc = m.cos; + var abs = m.abs; + var sqrt = m.sqrt; + + // this is used for sub pixel precision + var Z = 10; + var Z2 = Z / 2; + + var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1]; + + /** + * This funtion is assigned to the elements as element.getContext(). + * @this {HTMLElement} + * @return {CanvasRenderingContext2D_} + */ + function getContext() { + return this.context_ || + (this.context_ = new CanvasRenderingContext2D_(this)); + } + + var slice = Array.prototype.slice; + + /** + * Binds a function to an object. The returned function will always use the + * passed in {@code obj} as {@code this}. + * + * Example: + * + * g = bind(f, obj, a, b) + * g(c, d) // will do f.call(obj, a, b, c, d) + * + * @param {Function} f The function to bind the object to + * @param {Object} obj The object that should act as this when the function + * is called + * @param {*} var_args Rest arguments that will be used as the initial + * arguments when the function is called + * @return {Function} A new function that has bound this + */ + function bind(f, obj, var_args) { + var a = slice.call(arguments, 2); + return function() { + return f.apply(obj, a.concat(slice.call(arguments))); + }; + } + + function encodeHtmlAttribute(s) { + return String(s).replace(/&/g, '&').replace(/"/g, '"'); + } + + function addNamespace(doc, prefix, urn) { + if (!doc.namespaces[prefix]) { + if (IE_VERSION >= 7) { + doc.namespaces.add(prefix, urn).doImport('#default#VML'); + } else { + // IE6 cannot handle the third argument. + doc.namespaces.add(prefix, urn); + } + } + } + + function addNamespacesAndStylesheet(doc) { + addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml'); + addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office'); + + // Setup default CSS. Only add one style sheet per document + if (!doc.styleSheets['ex_canvas_']) { + var ss = doc.createStyleSheet(); + ss.owningElement.id = 'ex_canvas_'; + ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + + // default size is 300x150 in Gecko and Opera + 'text-align:left;width:300px;height:150px}'; + } + } + + // Add namespaces and stylesheet at startup. + addNamespacesAndStylesheet(document); + + var G_vmlCanvasManager_ = { + init: function(opt_doc) { + var doc = opt_doc || document; + // Create a dummy element so that IE will allow canvas elements to be + // recognized. + doc.createElement('canvas'); + doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); + }, + + init_: function(doc) { + // find all canvas elements + var els = doc.getElementsByTagName('canvas'); + for (var i = 0; i < els.length; i++) { + this.initElement(els[i]); + } + }, + + /** + * Public initializes a canvas element so that it can be used as canvas + * element from now on. This is called automatically before the page is + * loaded but if you are creating elements using createElement you need to + * make sure this is called on the element. + * @param {HTMLElement} el The canvas element to initialize. + * @return {HTMLElement} the element that was created. + */ + initElement: function(el) { + if (!el.getContext) { + el.getContext = getContext; + + // Add namespaces and stylesheet to document of the element. + addNamespacesAndStylesheet(el.ownerDocument); + + // Remove fallback content. There is no way to hide text nodes so we + // just remove all childNodes. We could hide all elements and remove + // text nodes but who really cares about the fallback content. + el.innerHTML = ''; + + // do not use inline function because that will leak memory + el.attachEvent('onpropertychange', onPropertyChange); + el.attachEvent('onresize', onResize); + + var attrs = el.attributes; + if (attrs.width && attrs.width.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setWidth_(attrs.width.nodeValue); + el.style.width = attrs.width.nodeValue + 'px'; + } else { + el.width = el.clientWidth; + } + if (attrs.height && attrs.height.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setHeight_(attrs.height.nodeValue); + el.style.height = attrs.height.nodeValue + 'px'; + } else { + el.height = el.clientHeight; + } + //el.getContext().setCoordsize_() + } + return el; + } + }; + + function onPropertyChange(e) { + var el = e.srcElement; + + switch (e.propertyName) { + case 'width': + el.getContext().clearRect(); + el.style.width = el.attributes.width.nodeValue + 'px'; + // In IE8 this does not trigger onresize. + el.firstChild.style.width = el.clientWidth + 'px'; + break; + case 'height': + el.getContext().clearRect(); + el.style.height = el.attributes.height.nodeValue + 'px'; + el.firstChild.style.height = el.clientHeight + 'px'; + break; + } + } + + function onResize(e) { + var el = e.srcElement; + if (el.firstChild) { + el.firstChild.style.width = el.clientWidth + 'px'; + el.firstChild.style.height = el.clientHeight + 'px'; + } + } + + G_vmlCanvasManager_.init(); + + // precompute "00" to "FF" + var decToHex = []; + for (var i = 0; i < 16; i++) { + for (var j = 0; j < 16; j++) { + decToHex[i * 16 + j] = i.toString(16) + j.toString(16); + } + } + + function createMatrixIdentity() { + return [ + [1, 0, 0], + [0, 1, 0], + [0, 0, 1] + ]; + } + + function matrixMultiply(m1, m2) { + var result = createMatrixIdentity(); + + for (var x = 0; x < 3; x++) { + for (var y = 0; y < 3; y++) { + var sum = 0; + + for (var z = 0; z < 3; z++) { + sum += m1[x][z] * m2[z][y]; + } + + result[x][y] = sum; + } + } + return result; + } + + function copyState(o1, o2) { + o2.fillStyle = o1.fillStyle; + o2.lineCap = o1.lineCap; + o2.lineJoin = o1.lineJoin; + o2.lineWidth = o1.lineWidth; + o2.miterLimit = o1.miterLimit; + o2.shadowBlur = o1.shadowBlur; + o2.shadowColor = o1.shadowColor; + o2.shadowOffsetX = o1.shadowOffsetX; + o2.shadowOffsetY = o1.shadowOffsetY; + o2.strokeStyle = o1.strokeStyle; + o2.globalAlpha = o1.globalAlpha; + o2.font = o1.font; + o2.textAlign = o1.textAlign; + o2.textBaseline = o1.textBaseline; + o2.arcScaleX_ = o1.arcScaleX_; + o2.arcScaleY_ = o1.arcScaleY_; + o2.lineScale_ = o1.lineScale_; + } + + var colorData = { + aliceblue: '#F0F8FF', + antiquewhite: '#FAEBD7', + aquamarine: '#7FFFD4', + azure: '#F0FFFF', + beige: '#F5F5DC', + bisque: '#FFE4C4', + black: '#000000', + blanchedalmond: '#FFEBCD', + blueviolet: '#8A2BE2', + brown: '#A52A2A', + burlywood: '#DEB887', + cadetblue: '#5F9EA0', + chartreuse: '#7FFF00', + chocolate: '#D2691E', + coral: '#FF7F50', + cornflowerblue: '#6495ED', + cornsilk: '#FFF8DC', + crimson: '#DC143C', + cyan: '#00FFFF', + darkblue: '#00008B', + darkcyan: '#008B8B', + darkgoldenrod: '#B8860B', + darkgray: '#A9A9A9', + darkgreen: '#006400', + darkgrey: '#A9A9A9', + darkkhaki: '#BDB76B', + darkmagenta: '#8B008B', + darkolivegreen: '#556B2F', + darkorange: '#FF8C00', + darkorchid: '#9932CC', + darkred: '#8B0000', + darksalmon: '#E9967A', + darkseagreen: '#8FBC8F', + darkslateblue: '#483D8B', + darkslategray: '#2F4F4F', + darkslategrey: '#2F4F4F', + darkturquoise: '#00CED1', + darkviolet: '#9400D3', + deeppink: '#FF1493', + deepskyblue: '#00BFFF', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1E90FF', + firebrick: '#B22222', + floralwhite: '#FFFAF0', + forestgreen: '#228B22', + gainsboro: '#DCDCDC', + ghostwhite: '#F8F8FF', + gold: '#FFD700', + goldenrod: '#DAA520', + grey: '#808080', + greenyellow: '#ADFF2F', + honeydew: '#F0FFF0', + hotpink: '#FF69B4', + indianred: '#CD5C5C', + indigo: '#4B0082', + ivory: '#FFFFF0', + khaki: '#F0E68C', + lavender: '#E6E6FA', + lavenderblush: '#FFF0F5', + lawngreen: '#7CFC00', + lemonchiffon: '#FFFACD', + lightblue: '#ADD8E6', + lightcoral: '#F08080', + lightcyan: '#E0FFFF', + lightgoldenrodyellow: '#FAFAD2', + lightgreen: '#90EE90', + lightgrey: '#D3D3D3', + lightpink: '#FFB6C1', + lightsalmon: '#FFA07A', + lightseagreen: '#20B2AA', + lightskyblue: '#87CEFA', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#B0C4DE', + lightyellow: '#FFFFE0', + limegreen: '#32CD32', + linen: '#FAF0E6', + magenta: '#FF00FF', + mediumaquamarine: '#66CDAA', + mediumblue: '#0000CD', + mediumorchid: '#BA55D3', + mediumpurple: '#9370DB', + mediumseagreen: '#3CB371', + mediumslateblue: '#7B68EE', + mediumspringgreen: '#00FA9A', + mediumturquoise: '#48D1CC', + mediumvioletred: '#C71585', + midnightblue: '#191970', + mintcream: '#F5FFFA', + mistyrose: '#FFE4E1', + moccasin: '#FFE4B5', + navajowhite: '#FFDEAD', + oldlace: '#FDF5E6', + olivedrab: '#6B8E23', + orange: '#FFA500', + orangered: '#FF4500', + orchid: '#DA70D6', + palegoldenrod: '#EEE8AA', + palegreen: '#98FB98', + paleturquoise: '#AFEEEE', + palevioletred: '#DB7093', + papayawhip: '#FFEFD5', + peachpuff: '#FFDAB9', + peru: '#CD853F', + pink: '#FFC0CB', + plum: '#DDA0DD', + powderblue: '#B0E0E6', + rosybrown: '#BC8F8F', + royalblue: '#4169E1', + saddlebrown: '#8B4513', + salmon: '#FA8072', + sandybrown: '#F4A460', + seagreen: '#2E8B57', + seashell: '#FFF5EE', + sienna: '#A0522D', + skyblue: '#87CEEB', + slateblue: '#6A5ACD', + slategray: '#708090', + slategrey: '#708090', + snow: '#FFFAFA', + springgreen: '#00FF7F', + steelblue: '#4682B4', + tan: '#D2B48C', + thistle: '#D8BFD8', + tomato: '#FF6347', + turquoise: '#40E0D0', + violet: '#EE82EE', + wheat: '#F5DEB3', + whitesmoke: '#F5F5F5', + yellowgreen: '#9ACD32' + }; + + + function getRgbHslContent(styleString) { + var start = styleString.indexOf('(', 3); + var end = styleString.indexOf(')', start + 1); + var parts = styleString.substring(start + 1, end).split(','); + // add alpha if needed + if (parts.length != 4 || styleString.charAt(3) != 'a') { + parts[3] = 1; + } + return parts; + } + + function percent(s) { + return parseFloat(s) / 100; + } + + function clamp(v, min, max) { + return Math.min(max, Math.max(min, v)); + } + + function hslToRgb(parts){ + var r, g, b, h, s, l; + h = parseFloat(parts[0]) / 360 % 360; + if (h < 0) + h++; + s = clamp(percent(parts[1]), 0, 1); + l = clamp(percent(parts[2]), 0, 1); + if (s == 0) { + r = g = b = l; // achromatic + } else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hueToRgb(p, q, h + 1 / 3); + g = hueToRgb(p, q, h); + b = hueToRgb(p, q, h - 1 / 3); + } + + return '#' + decToHex[Math.floor(r * 255)] + + decToHex[Math.floor(g * 255)] + + decToHex[Math.floor(b * 255)]; + } + + function hueToRgb(m1, m2, h) { + if (h < 0) + h++; + if (h > 1) + h--; + + if (6 * h < 1) + return m1 + (m2 - m1) * 6 * h; + else if (2 * h < 1) + return m2; + else if (3 * h < 2) + return m1 + (m2 - m1) * (2 / 3 - h) * 6; + else + return m1; + } + + function processStyle(styleString) { + var str, alpha = 1; + + styleString = String(styleString); + if (styleString.charAt(0) == '#') { + str = styleString; + } else if (/^rgb/.test(styleString)) { + var parts = getRgbHslContent(styleString); + var str = '#', n; + for (var i = 0; i < 3; i++) { + if (parts[i].indexOf('%') != -1) { + n = Math.floor(percent(parts[i]) * 255); + } else { + n = +parts[i]; + } + str += decToHex[clamp(n, 0, 255)]; + } + alpha = +parts[3]; + } else if (/^hsl/.test(styleString)) { + var parts = getRgbHslContent(styleString); + str = hslToRgb(parts); + alpha = parts[3]; + } else { + str = colorData[styleString] || styleString; + } + return {color: str, alpha: alpha}; + } + + var DEFAULT_STYLE = { + style: 'normal', + variant: 'normal', + weight: 'normal', + size: 10, + family: 'sans-serif' + }; + + // Internal text style cache + var fontStyleCache = {}; + + function processFontStyle(styleString) { + if (fontStyleCache[styleString]) { + return fontStyleCache[styleString]; + } + + var el = document.createElement('div'); + var style = el.style; + try { + style.font = styleString; + } catch (ex) { + // Ignore failures to set to invalid font. + } + + return fontStyleCache[styleString] = { + style: style.fontStyle || DEFAULT_STYLE.style, + variant: style.fontVariant || DEFAULT_STYLE.variant, + weight: style.fontWeight || DEFAULT_STYLE.weight, + size: style.fontSize || DEFAULT_STYLE.size, + family: style.fontFamily || DEFAULT_STYLE.family + }; + } + + function getComputedStyle(style, element) { + var computedStyle = {}; + + for (var p in style) { + computedStyle[p] = style[p]; + } + + // Compute the size + var canvasFontSize = parseFloat(element.currentStyle.fontSize), + fontSize = parseFloat(style.size); + + if (typeof style.size == 'number') { + computedStyle.size = style.size; + } else if (style.size.indexOf('px') != -1) { + computedStyle.size = fontSize; + } else if (style.size.indexOf('em') != -1) { + computedStyle.size = canvasFontSize * fontSize; + } else if(style.size.indexOf('%') != -1) { + computedStyle.size = (canvasFontSize / 100) * fontSize; + } else if (style.size.indexOf('pt') != -1) { + computedStyle.size = fontSize / .75; + } else { + computedStyle.size = canvasFontSize; + } + + // Different scaling between normal text and VML text. This was found using + // trial and error to get the same size as non VML text. + computedStyle.size *= 0.981; + + return computedStyle; + } + + function buildStyle(style) { + return style.style + ' ' + style.variant + ' ' + style.weight + ' ' + + style.size + 'px ' + style.family; + } + + function processLineCap(lineCap) { + switch (lineCap) { + case 'butt': + return 'flat'; + case 'round': + return 'round'; + case 'square': + default: + return 'square'; + } + } + + /** + * This class implements CanvasRenderingContext2D interface as described by + * the WHATWG. + * @param {HTMLElement} canvasElement The element that the 2D context should + * be associated with + */ + function CanvasRenderingContext2D_(canvasElement) { + this.m_ = createMatrixIdentity(); + + this.mStack_ = []; + this.aStack_ = []; + this.currentPath_ = []; + + // Canvas context properties + this.strokeStyle = '#000'; + this.fillStyle = '#000'; + + this.lineWidth = 1; + this.lineJoin = 'miter'; + this.lineCap = 'butt'; + this.miterLimit = Z * 1; + this.globalAlpha = 1; + this.font = '10px sans-serif'; + this.textAlign = 'left'; + this.textBaseline = 'alphabetic'; + this.canvas = canvasElement; + + var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' + + canvasElement.clientHeight + 'px;overflow:hidden;position:absolute'; + var el = canvasElement.ownerDocument.createElement('div'); + el.style.cssText = cssText; + canvasElement.appendChild(el); + + var overlayEl = el.cloneNode(false); + // Use a non transparent background. + overlayEl.style.backgroundColor = 'red'; + overlayEl.style.filter = 'alpha(opacity=0)'; + canvasElement.appendChild(overlayEl); + + this.element_ = el; + this.arcScaleX_ = 1; + this.arcScaleY_ = 1; + this.lineScale_ = 1; + } + + var contextPrototype = CanvasRenderingContext2D_.prototype; + contextPrototype.clearRect = function() { + if (this.textMeasureEl_) { + this.textMeasureEl_.removeNode(true); + this.textMeasureEl_ = null; + } + this.element_.innerHTML = ''; + }; + + contextPrototype.beginPath = function() { + // TODO: Branch current matrix so that save/restore has no effect + // as per safari docs. + this.currentPath_ = []; + }; + + contextPrototype.moveTo = function(aX, aY) { + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); + this.currentX_ = p.x; + this.currentY_ = p.y; + }; + + contextPrototype.lineTo = function(aX, aY) { + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); + + this.currentX_ = p.x; + this.currentY_ = p.y; + }; + + contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, + aCP2x, aCP2y, + aX, aY) { + var p = this.getCoords_(aX, aY); + var cp1 = this.getCoords_(aCP1x, aCP1y); + var cp2 = this.getCoords_(aCP2x, aCP2y); + bezierCurveTo(this, cp1, cp2, p); + }; + + // Helper function that takes the already fixed cordinates. + function bezierCurveTo(self, cp1, cp2, p) { + self.currentPath_.push({ + type: 'bezierCurveTo', + cp1x: cp1.x, + cp1y: cp1.y, + cp2x: cp2.x, + cp2y: cp2.y, + x: p.x, + y: p.y + }); + self.currentX_ = p.x; + self.currentY_ = p.y; + } + + contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { + // the following is lifted almost directly from + // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes + + var cp = this.getCoords_(aCPx, aCPy); + var p = this.getCoords_(aX, aY); + + var cp1 = { + x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), + y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) + }; + var cp2 = { + x: cp1.x + (p.x - this.currentX_) / 3.0, + y: cp1.y + (p.y - this.currentY_) / 3.0 + }; + + bezierCurveTo(this, cp1, cp2, p); + }; + + contextPrototype.arc = function(aX, aY, aRadius, + aStartAngle, aEndAngle, aClockwise) { + aRadius *= Z; + var arcType = aClockwise ? 'at' : 'wa'; + + var xStart = aX + mc(aStartAngle) * aRadius - Z2; + var yStart = aY + ms(aStartAngle) * aRadius - Z2; + + var xEnd = aX + mc(aEndAngle) * aRadius - Z2; + var yEnd = aY + ms(aEndAngle) * aRadius - Z2; + + // IE won't render arches drawn counter clockwise if xStart == xEnd. + if (xStart == xEnd && !aClockwise) { + xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something + // that can be represented in binary + } + + var p = this.getCoords_(aX, aY); + var pStart = this.getCoords_(xStart, yStart); + var pEnd = this.getCoords_(xEnd, yEnd); + + this.currentPath_.push({type: arcType, + x: p.x, + y: p.y, + radius: aRadius, + xStart: pStart.x, + yStart: pStart.y, + xEnd: pEnd.x, + yEnd: pEnd.y}); + + }; + + contextPrototype.rect = function(aX, aY, aWidth, aHeight) { + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + }; + + contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { + var oldPath = this.currentPath_; + this.beginPath(); + + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + this.stroke(); + + this.currentPath_ = oldPath; + }; + + contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { + var oldPath = this.currentPath_; + this.beginPath(); + + this.moveTo(aX, aY); + this.lineTo(aX + aWidth, aY); + this.lineTo(aX + aWidth, aY + aHeight); + this.lineTo(aX, aY + aHeight); + this.closePath(); + this.fill(); + + this.currentPath_ = oldPath; + }; + + contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { + var gradient = new CanvasGradient_('gradient'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + return gradient; + }; + + contextPrototype.createRadialGradient = function(aX0, aY0, aR0, + aX1, aY1, aR1) { + var gradient = new CanvasGradient_('gradientradial'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.r0_ = aR0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + gradient.r1_ = aR1; + return gradient; + }; + + contextPrototype.drawImage = function(image, var_args) { + var dx, dy, dw, dh, sx, sy, sw, sh; + + // to find the original width we overide the width and height + var oldRuntimeWidth = image.runtimeStyle.width; + var oldRuntimeHeight = image.runtimeStyle.height; + image.runtimeStyle.width = 'auto'; + image.runtimeStyle.height = 'auto'; + + // get the original size + var w = image.width; + var h = image.height; + + // and remove overides + image.runtimeStyle.width = oldRuntimeWidth; + image.runtimeStyle.height = oldRuntimeHeight; + + if (arguments.length == 3) { + dx = arguments[1]; + dy = arguments[2]; + sx = sy = 0; + sw = dw = w; + sh = dh = h; + } else if (arguments.length == 5) { + dx = arguments[1]; + dy = arguments[2]; + dw = arguments[3]; + dh = arguments[4]; + sx = sy = 0; + sw = w; + sh = h; + } else if (arguments.length == 9) { + sx = arguments[1]; + sy = arguments[2]; + sw = arguments[3]; + sh = arguments[4]; + dx = arguments[5]; + dy = arguments[6]; + dw = arguments[7]; + dh = arguments[8]; + } else { + throw Error('Invalid number of arguments'); + } + + var d = this.getCoords_(dx, dy); + + var w2 = sw / 2; + var h2 = sh / 2; + + var vmlStr = []; + + var W = 10; + var H = 10; + + // For some reason that I've now forgotten, using divs didn't work + vmlStr.push(' ' , + '', + ''); + + this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); + }; + + contextPrototype.stroke = function(aFill) { + var lineStr = []; + var lineOpen = false; + + var W = 10; + var H = 10; + + lineStr.push(''); + + if (!aFill) { + appendStroke(this, lineStr); + } else { + appendFill(this, lineStr, min, max); + } + + lineStr.push(''); + + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); + }; + + function appendStroke(ctx, lineStr) { + var a = processStyle(ctx.strokeStyle); + var color = a.color; + var opacity = a.alpha * ctx.globalAlpha; + var lineWidth = ctx.lineScale_ * ctx.lineWidth; + + // VML cannot correctly render a line if the width is less than 1px. + // In that case, we dilute the color to make the line look thinner. + if (lineWidth < 1) { + opacity *= lineWidth; + } + + lineStr.push( + '' + ); + } + + function appendFill(ctx, lineStr, min, max) { + var fillStyle = ctx.fillStyle; + var arcScaleX = ctx.arcScaleX_; + var arcScaleY = ctx.arcScaleY_; + var width = max.x - min.x; + var height = max.y - min.y; + if (fillStyle instanceof CanvasGradient_) { + // TODO: Gradients transformed with the transformation matrix. + var angle = 0; + var focus = {x: 0, y: 0}; + + // additional offset + var shift = 0; + // scale factor for offset + var expansion = 1; + + if (fillStyle.type_ == 'gradient') { + var x0 = fillStyle.x0_ / arcScaleX; + var y0 = fillStyle.y0_ / arcScaleY; + var x1 = fillStyle.x1_ / arcScaleX; + var y1 = fillStyle.y1_ / arcScaleY; + var p0 = ctx.getCoords_(x0, y0); + var p1 = ctx.getCoords_(x1, y1); + var dx = p1.x - p0.x; + var dy = p1.y - p0.y; + angle = Math.atan2(dx, dy) * 180 / Math.PI; + + // The angle should be a non-negative number. + if (angle < 0) { + angle += 360; + } + + // Very small angles produce an unexpected result because they are + // converted to a scientific notation string. + if (angle < 1e-6) { + angle = 0; + } + } else { + var p0 = ctx.getCoords_(fillStyle.x0_, fillStyle.y0_); + focus = { + x: (p0.x - min.x) / width, + y: (p0.y - min.y) / height + }; + + width /= arcScaleX * Z; + height /= arcScaleY * Z; + var dimension = m.max(width, height); + shift = 2 * fillStyle.r0_ / dimension; + expansion = 2 * fillStyle.r1_ / dimension - shift; + } + + // We need to sort the color stops in ascending order by offset, + // otherwise IE won't interpret it correctly. + var stops = fillStyle.colors_; + stops.sort(function(cs1, cs2) { + return cs1.offset - cs2.offset; + }); + + var length = stops.length; + var color1 = stops[0].color; + var color2 = stops[length - 1].color; + var opacity1 = stops[0].alpha * ctx.globalAlpha; + var opacity2 = stops[length - 1].alpha * ctx.globalAlpha; + + var colors = []; + for (var i = 0; i < length; i++) { + var stop = stops[i]; + colors.push(stop.offset * expansion + shift + ' ' + stop.color); + } + + // When colors attribute is used, the meanings of opacity and o:opacity2 + // are reversed. + lineStr.push(''); + } else if (fillStyle instanceof CanvasPattern_) { + if (width && height) { + var deltaLeft = -min.x; + var deltaTop = -min.y; + lineStr.push(''); + } + } else { + var a = processStyle(ctx.fillStyle); + var color = a.color; + var opacity = a.alpha * ctx.globalAlpha; + lineStr.push(''); + } + } + + contextPrototype.fill = function() { + this.stroke(true); + }; + + contextPrototype.closePath = function() { + this.currentPath_.push({type: 'close'}); + }; + + /** + * @private + */ + contextPrototype.getCoords_ = function(aX, aY) { + var m = this.m_; + return { + x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, + y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 + }; + }; + + contextPrototype.save = function() { + var o = {}; + copyState(this, o); + this.aStack_.push(o); + this.mStack_.push(this.m_); + this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); + }; + + contextPrototype.restore = function() { + if (this.aStack_.length) { + copyState(this.aStack_.pop(), this); + this.m_ = this.mStack_.pop(); + } + }; + + function matrixIsFinite(m) { + return isFinite(m[0][0]) && isFinite(m[0][1]) && + isFinite(m[1][0]) && isFinite(m[1][1]) && + isFinite(m[2][0]) && isFinite(m[2][1]); + } + + function setM(ctx, m, updateLineScale) { + if (!matrixIsFinite(m)) { + return; + } + ctx.m_ = m; + + if (updateLineScale) { + // Get the line scale. + // Determinant of this.m_ means how much the area is enlarged by the + // transformation. So its square root can be used as a scale factor + // for width. + var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; + ctx.lineScale_ = sqrt(abs(det)); + } + } + + contextPrototype.translate = function(aX, aY) { + var m1 = [ + [1, 0, 0], + [0, 1, 0], + [aX, aY, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), false); + }; + + contextPrototype.rotate = function(aRot) { + var c = mc(aRot); + var s = ms(aRot); + + var m1 = [ + [c, s, 0], + [-s, c, 0], + [0, 0, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), false); + }; + + contextPrototype.scale = function(aX, aY) { + this.arcScaleX_ *= aX; + this.arcScaleY_ *= aY; + var m1 = [ + [aX, 0, 0], + [0, aY, 0], + [0, 0, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), true); + }; + + contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { + var m1 = [ + [m11, m12, 0], + [m21, m22, 0], + [dx, dy, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), true); + }; + + contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { + var m = [ + [m11, m12, 0], + [m21, m22, 0], + [dx, dy, 1] + ]; + + setM(this, m, true); + }; + + /** + * The text drawing function. + * The maxWidth argument isn't taken in account, since no browser supports + * it yet. + */ + contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) { + var m = this.m_, + delta = 1000, + left = 0, + right = delta, + offset = {x: 0, y: 0}, + lineStr = []; + + var fontStyle = getComputedStyle(processFontStyle(this.font), + this.element_); + + var fontStyleString = buildStyle(fontStyle); + + var elementStyle = this.element_.currentStyle; + var textAlign = this.textAlign.toLowerCase(); + switch (textAlign) { + case 'left': + case 'center': + case 'right': + break; + case 'end': + textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left'; + break; + case 'start': + textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left'; + break; + default: + textAlign = 'left'; + } + + // 1.75 is an arbitrary number, as there is no info about the text baseline + switch (this.textBaseline) { + case 'hanging': + case 'top': + offset.y = fontStyle.size / 1.75; + break; + case 'middle': + break; + default: + case null: + case 'alphabetic': + case 'ideographic': + case 'bottom': + offset.y = -fontStyle.size / 2.25; + break; + } + + switch(textAlign) { + case 'right': + left = delta; + right = 0.05; + break; + case 'center': + left = right = delta / 2; + break; + } + + var d = this.getCoords_(x + offset.x, y + offset.y); + + lineStr.push(''); + + if (stroke) { + appendStroke(this, lineStr); + } else { + // TODO: Fix the min and max params. + appendFill(this, lineStr, {x: -left, y: 0}, + {x: right, y: fontStyle.size}); + } + + var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' + + m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0'; + + var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z); + + lineStr.push('', + '', + ''); + + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); + }; + + contextPrototype.fillText = function(text, x, y, maxWidth) { + this.drawText_(text, x, y, maxWidth, false); + }; + + contextPrototype.strokeText = function(text, x, y, maxWidth) { + this.drawText_(text, x, y, maxWidth, true); + }; + + contextPrototype.measureText = function(text) { + if (!this.textMeasureEl_) { + var s = ''; + this.element_.insertAdjacentHTML('beforeEnd', s); + this.textMeasureEl_ = this.element_.lastChild; + } + var doc = this.element_.ownerDocument; + this.textMeasureEl_.innerHTML = ''; + this.textMeasureEl_.style.font = this.font; + // Don't use innerHTML or innerText because they allow markup/whitespace. + this.textMeasureEl_.appendChild(doc.createTextNode(text)); + return {width: this.textMeasureEl_.offsetWidth}; + }; + + /******** STUBS ********/ + contextPrototype.clip = function() { + // TODO: Implement + }; + + contextPrototype.arcTo = function() { + // TODO: Implement + }; + + contextPrototype.createPattern = function(image, repetition) { + return new CanvasPattern_(image, repetition); + }; + + // Gradient / Pattern Stubs + function CanvasGradient_(aType) { + this.type_ = aType; + this.x0_ = 0; + this.y0_ = 0; + this.r0_ = 0; + this.x1_ = 0; + this.y1_ = 0; + this.r1_ = 0; + this.colors_ = []; + } + + CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { + aColor = processStyle(aColor); + this.colors_.push({offset: aOffset, + color: aColor.color, + alpha: aColor.alpha}); + }; + + function CanvasPattern_(image, repetition) { + assertImageIsValid(image); + switch (repetition) { + case 'repeat': + case null: + case '': + this.repetition_ = 'repeat'; + break + case 'repeat-x': + case 'repeat-y': + case 'no-repeat': + this.repetition_ = repetition; + break; + default: + throwException('SYNTAX_ERR'); + } + + this.src_ = image.src; + this.width_ = image.width; + this.height_ = image.height; + } + + function throwException(s) { + throw new DOMException_(s); + } + + function assertImageIsValid(img) { + if (!img || img.nodeType != 1 || img.tagName != 'IMG') { + throwException('TYPE_MISMATCH_ERR'); + } + if (img.readyState != 'complete') { + throwException('INVALID_STATE_ERR'); + } + } + + function DOMException_(s) { + this.code = this[s]; + this.message = s +': DOM Exception ' + this.code; + } + var p = DOMException_.prototype = new Error; + p.INDEX_SIZE_ERR = 1; + p.DOMSTRING_SIZE_ERR = 2; + p.HIERARCHY_REQUEST_ERR = 3; + p.WRONG_DOCUMENT_ERR = 4; + p.INVALID_CHARACTER_ERR = 5; + p.NO_DATA_ALLOWED_ERR = 6; + p.NO_MODIFICATION_ALLOWED_ERR = 7; + p.NOT_FOUND_ERR = 8; + p.NOT_SUPPORTED_ERR = 9; + p.INUSE_ATTRIBUTE_ERR = 10; + p.INVALID_STATE_ERR = 11; + p.SYNTAX_ERR = 12; + p.INVALID_MODIFICATION_ERR = 13; + p.NAMESPACE_ERR = 14; + p.INVALID_ACCESS_ERR = 15; + p.VALIDATION_ERR = 16; + p.TYPE_MISMATCH_ERR = 17; + + // set up externs + G_vmlCanvasManager = G_vmlCanvasManager_; + CanvasRenderingContext2D = CanvasRenderingContext2D_; + CanvasGradient = CanvasGradient_; + CanvasPattern = CanvasPattern_; + DOMException = DOMException_; +})(); + +} // if diff --git a/groceries.html b/groceries.html new file mode 100644 index 0000000..cc460ee --- /dev/null +++ b/groceries.html @@ -0,0 +1,2 @@ + +
diff --git a/icons/button_Off.png b/icons/button_Off.png new file mode 100644 index 0000000..ba79473 Binary files /dev/null and b/icons/button_Off.png differ diff --git a/icons/button_On.png b/icons/button_On.png new file mode 100644 index 0000000..44e5fe3 Binary files /dev/null and b/icons/button_On.png differ diff --git a/icons/left-arrow.png b/icons/left-arrow.png new file mode 100644 index 0000000..bb7f700 Binary files /dev/null and b/icons/left-arrow.png differ diff --git a/icons/light.png b/icons/light.png new file mode 100644 index 0000000..6fd895c Binary files /dev/null and b/icons/light.png differ diff --git a/icons/music.png b/icons/music.png new file mode 100644 index 0000000..342deb3 Binary files /dev/null and b/icons/music.png differ diff --git a/icons/right-arrow.png b/icons/right-arrow.png new file mode 100644 index 0000000..5ce5854 Binary files /dev/null and b/icons/right-arrow.png differ diff --git a/icons/weather.png b/icons/weather.png new file mode 100644 index 0000000..e1862d8 Binary files /dev/null and b/icons/weather.png differ diff --git a/icons/weather/Chance_Of_Showers.png b/icons/weather/Chance_Of_Showers.png new file mode 100644 index 0000000..8d2df56 Binary files /dev/null and b/icons/weather/Chance_Of_Showers.png differ diff --git a/icons/weather/Clear.png b/icons/weather/Clear.png new file mode 100644 index 0000000..4a5b3e7 Binary files /dev/null and b/icons/weather/Clear.png differ diff --git a/icons/weather/Cloudy.png b/icons/weather/Cloudy.png new file mode 100644 index 0000000..5272f3b Binary files /dev/null and b/icons/weather/Cloudy.png differ diff --git a/icons/weather/Cloudy_Period.png b/icons/weather/Cloudy_Period.png new file mode 100644 index 0000000..5958159 Binary files /dev/null and b/icons/weather/Cloudy_Period.png differ diff --git a/icons/weather/Cloudy_With_Dizzle.png b/icons/weather/Cloudy_With_Dizzle.png new file mode 100644 index 0000000..afa6b31 Binary files /dev/null and b/icons/weather/Cloudy_With_Dizzle.png differ diff --git a/icons/weather/Few_Flurries.png b/icons/weather/Few_Flurries.png new file mode 100644 index 0000000..519cd34 Binary files /dev/null and b/icons/weather/Few_Flurries.png differ diff --git a/icons/weather/Few_Flurries_Night.png b/icons/weather/Few_Flurries_Night.png new file mode 100644 index 0000000..86e2c0b Binary files /dev/null and b/icons/weather/Few_Flurries_Night.png differ diff --git a/icons/weather/Few_Showers.png b/icons/weather/Few_Showers.png new file mode 100644 index 0000000..4a40499 Binary files /dev/null and b/icons/weather/Few_Showers.png differ diff --git a/icons/weather/Flurries.png b/icons/weather/Flurries.png new file mode 100644 index 0000000..d1c8678 Binary files /dev/null and b/icons/weather/Flurries.png differ diff --git a/icons/weather/Fog.png b/icons/weather/Fog.png new file mode 100644 index 0000000..e51c784 Binary files /dev/null and b/icons/weather/Fog.png differ diff --git a/icons/weather/Folder_Extra.png b/icons/weather/Folder_Extra.png new file mode 100644 index 0000000..74e971d Binary files /dev/null and b/icons/weather/Folder_Extra.png differ diff --git a/icons/weather/Freezing_Rain.png b/icons/weather/Freezing_Rain.png new file mode 100644 index 0000000..6aebf91 Binary files /dev/null and b/icons/weather/Freezing_Rain.png differ diff --git a/icons/weather/Mostly_Sunny.png b/icons/weather/Mostly_Sunny.png new file mode 100644 index 0000000..16daeaf Binary files /dev/null and b/icons/weather/Mostly_Sunny.png differ diff --git a/icons/weather/Note_Extra.png b/icons/weather/Note_Extra.png new file mode 100644 index 0000000..68ace31 Binary files /dev/null and b/icons/weather/Note_Extra.png differ diff --git a/icons/weather/Overcast.png b/icons/weather/Overcast.png new file mode 100644 index 0000000..5272f3b Binary files /dev/null and b/icons/weather/Overcast.png differ diff --git a/icons/weather/Partly cloudy.png b/icons/weather/Partly cloudy.png new file mode 100644 index 0000000..cc7fd7d Binary files /dev/null and b/icons/weather/Partly cloudy.png differ diff --git a/icons/weather/Rain.png b/icons/weather/Rain.png new file mode 100644 index 0000000..819e241 Binary files /dev/null and b/icons/weather/Rain.png differ diff --git a/icons/weather/Rain_Or_Snow.png b/icons/weather/Rain_Or_Snow.png new file mode 100644 index 0000000..1f6eaaf Binary files /dev/null and b/icons/weather/Rain_Or_Snow.png differ diff --git a/icons/weather/Risk_Of_Thundershowers.png b/icons/weather/Risk_Of_Thundershowers.png new file mode 100644 index 0000000..b1a3438 Binary files /dev/null and b/icons/weather/Risk_Of_Thundershowers.png differ diff --git a/icons/weather/Snow.png b/icons/weather/Snow.png new file mode 100644 index 0000000..dba540f Binary files /dev/null and b/icons/weather/Snow.png differ diff --git a/icons/weather/Sunny.png b/icons/weather/Sunny.png new file mode 100644 index 0000000..b5ca0d9 Binary files /dev/null and b/icons/weather/Sunny.png differ diff --git a/icons/weather/Thunder_Showers.png b/icons/weather/Thunder_Showers.png new file mode 100644 index 0000000..63757a8 Binary files /dev/null and b/icons/weather/Thunder_Showers.png differ diff --git a/icons/weather/Thunderstorms.png b/icons/weather/Thunderstorms.png new file mode 100644 index 0000000..217bfcf Binary files /dev/null and b/icons/weather/Thunderstorms.png differ diff --git a/icons/weather/Wet_Flurries.png b/icons/weather/Wet_Flurries.png new file mode 100644 index 0000000..146fcb2 Binary files /dev/null and b/icons/weather/Wet_Flurries.png differ diff --git a/icons/weather/Wet_Flurries_Night.png b/icons/weather/Wet_Flurries_Night.png new file mode 100644 index 0000000..2a32cdc Binary files /dev/null and b/icons/weather/Wet_Flurries_Night.png differ diff --git a/images/bg.jpg b/images/bg.jpg new file mode 100755 index 0000000..83c0944 Binary files /dev/null and b/images/bg.jpg differ diff --git a/images/body-box-bottom.png b/images/body-box-bottom.png new file mode 100755 index 0000000..ce135f9 Binary files /dev/null and b/images/body-box-bottom.png differ diff --git a/images/body-box-repeatablebody.png b/images/body-box-repeatablebody.png new file mode 100755 index 0000000..4bb90b5 Binary files /dev/null and b/images/body-box-repeatablebody.png differ diff --git a/images/body-box-top.png b/images/body-box-top.png new file mode 100755 index 0000000..0260d2c Binary files /dev/null and b/images/body-box-top.png differ diff --git a/images/bottom-controls-off.jpg b/images/bottom-controls-off.jpg new file mode 100755 index 0000000..ec972b9 Binary files /dev/null and b/images/bottom-controls-off.jpg differ diff --git a/images/bottom-controls-on.jpg b/images/bottom-controls-on.jpg new file mode 100755 index 0000000..36cde2f Binary files /dev/null and b/images/bottom-controls-on.jpg differ diff --git a/images/bottom-controls-repeatablebar.jpg b/images/bottom-controls-repeatablebar.jpg new file mode 100755 index 0000000..f2ba53f Binary files /dev/null and b/images/bottom-controls-repeatablebar.jpg differ diff --git a/images/cameras-off.png b/images/cameras-off.png new file mode 100644 index 0000000..65edad0 Binary files /dev/null and b/images/cameras-off.png differ diff --git a/images/cameras-on.png b/images/cameras-on.png new file mode 100644 index 0000000..2388662 Binary files /dev/null and b/images/cameras-on.png differ diff --git a/images/climate-off.png b/images/climate-off.png new file mode 100644 index 0000000..26f0b52 Binary files /dev/null and b/images/climate-off.png differ diff --git a/images/climate-on.png b/images/climate-on.png new file mode 100644 index 0000000..5cf97fb Binary files /dev/null and b/images/climate-on.png differ diff --git a/images/groceries-off.png b/images/groceries-off.png new file mode 100644 index 0000000..42e5d5f Binary files /dev/null and b/images/groceries-off.png differ diff --git a/images/groceries-on.png b/images/groceries-on.png new file mode 100644 index 0000000..4228475 Binary files /dev/null and b/images/groceries-on.png differ diff --git a/images/header-camera.png b/images/header-camera.png new file mode 100755 index 0000000..91ab2b4 Binary files /dev/null and b/images/header-camera.png differ diff --git a/images/header-climate.png b/images/header-climate.png new file mode 100755 index 0000000..ed723b6 Binary files /dev/null and b/images/header-climate.png differ diff --git a/images/header-groceries.png b/images/header-groceries.png new file mode 100755 index 0000000..5926e61 Binary files /dev/null and b/images/header-groceries.png differ diff --git a/images/header-lighting.png b/images/header-lighting.png new file mode 100755 index 0000000..3c76fd6 Binary files /dev/null and b/images/header-lighting.png differ diff --git a/images/header-news.png b/images/header-news.png new file mode 100755 index 0000000..5d289e0 Binary files /dev/null and b/images/header-news.png differ diff --git a/images/header-power.png b/images/header-power.png new file mode 100755 index 0000000..cf11821 Binary files /dev/null and b/images/header-power.png differ diff --git a/images/header-recipes.png b/images/header-recipes.png new file mode 100755 index 0000000..53b40fb Binary files /dev/null and b/images/header-recipes.png differ diff --git a/images/header-repeater.png b/images/header-repeater.png new file mode 100755 index 0000000..88c2fe2 Binary files /dev/null and b/images/header-repeater.png differ diff --git a/images/header-security.png b/images/header-security.png new file mode 100755 index 0000000..acb5b1a Binary files /dev/null and b/images/header-security.png differ diff --git a/images/header-thejukebox.png b/images/header-thejukebox.png new file mode 100755 index 0000000..5d84736 Binary files /dev/null and b/images/header-thejukebox.png differ diff --git a/images/header-traffic.png b/images/header-traffic.png new file mode 100755 index 0000000..bde8615 Binary files /dev/null and b/images/header-traffic.png differ diff --git a/images/header-weather.png b/images/header-weather.png new file mode 100755 index 0000000..3fe9b2e Binary files /dev/null and b/images/header-weather.png differ diff --git a/images/header.png b/images/header.png new file mode 100755 index 0000000..b4faa4d Binary files /dev/null and b/images/header.png differ diff --git a/images/home-off.png b/images/home-off.png new file mode 100644 index 0000000..eb4c5fb Binary files /dev/null and b/images/home-off.png differ diff --git a/images/home-on.png b/images/home-on.png new file mode 100644 index 0000000..1c04044 Binary files /dev/null and b/images/home-on.png differ diff --git a/images/icon-barchart.png b/images/icon-barchart.png new file mode 100755 index 0000000..caee958 Binary files /dev/null and b/images/icon-barchart.png differ diff --git a/images/icon-sliders.png b/images/icon-sliders.png new file mode 100755 index 0000000..24c1b17 Binary files /dev/null and b/images/icon-sliders.png differ diff --git a/images/lighting-off.png b/images/lighting-off.png new file mode 100644 index 0000000..9cf2e87 Binary files /dev/null and b/images/lighting-off.png differ diff --git a/images/lighting-on.png b/images/lighting-on.png new file mode 100644 index 0000000..b5ccfe0 Binary files /dev/null and b/images/lighting-on.png differ diff --git a/images/music-off.png b/images/music-off.png new file mode 100644 index 0000000..bee8c61 Binary files /dev/null and b/images/music-off.png differ diff --git a/images/music-on.png b/images/music-on.png new file mode 100644 index 0000000..91481fd Binary files /dev/null and b/images/music-on.png differ diff --git a/images/news-off.png b/images/news-off.png new file mode 100644 index 0000000..61e1690 Binary files /dev/null and b/images/news-off.png differ diff --git a/images/news-on.png b/images/news-on.png new file mode 100644 index 0000000..87aab11 Binary files /dev/null and b/images/news-on.png differ diff --git a/images/power-off.png b/images/power-off.png new file mode 100644 index 0000000..2ca8af6 Binary files /dev/null and b/images/power-off.png differ diff --git a/images/power-on.png b/images/power-on.png new file mode 100644 index 0000000..215683f Binary files /dev/null and b/images/power-on.png differ diff --git a/images/receipes-off.png b/images/receipes-off.png new file mode 100644 index 0000000..ee11ebd Binary files /dev/null and b/images/receipes-off.png differ diff --git a/images/receipes-on.png b/images/receipes-on.png new file mode 100644 index 0000000..5f11dc5 Binary files /dev/null and b/images/receipes-on.png differ diff --git a/images/security-off.png b/images/security-off.png new file mode 100644 index 0000000..b29ecfd Binary files /dev/null and b/images/security-off.png differ diff --git a/images/security-on.png b/images/security-on.png new file mode 100644 index 0000000..706ee8c Binary files /dev/null and b/images/security-on.png differ diff --git a/images/slider-off.png b/images/slider-off.png new file mode 100755 index 0000000..e8547a6 Binary files /dev/null and b/images/slider-off.png differ diff --git a/images/slider-on.png b/images/slider-on.png new file mode 100755 index 0000000..cc7d739 Binary files /dev/null and b/images/slider-on.png differ diff --git a/images/traffic-off.png b/images/traffic-off.png new file mode 100644 index 0000000..062cbf3 Binary files /dev/null and b/images/traffic-off.png differ diff --git a/images/traffic-on.png b/images/traffic-on.png new file mode 100644 index 0000000..87bcd95 Binary files /dev/null and b/images/traffic-on.png differ diff --git a/images/weather-off.png b/images/weather-off.png new file mode 100644 index 0000000..572119d Binary files /dev/null and b/images/weather-off.png differ diff --git a/images/weather-on.png b/images/weather-on.png new file mode 100644 index 0000000..a064e0b Binary files /dev/null and b/images/weather-on.png differ diff --git a/includes.php b/includes.php new file mode 100644 index 0000000..f55dd8b --- /dev/null +++ b/includes.php @@ -0,0 +1,45 @@ +load('http://weather/weather/all-output.xml'); + $arrFeeds = array(); + foreach ($doc->getElementsByTagName('weather') as $node) { + $itemRSS = array ( + $item => $node->getElementsByTagName($item)->item(0)->nodeValue, + ); + array_push($arrFeeds, $itemRSS); + } + echo $itemRSS[$item]; +} + +function summon($person,$status) { + if ($person == "russ") { + $myFile = "russ.txt"; + $fh = fopen($myFile, 'w') or die("can't open file"); + fwrite($fh, $status); + fclose($fh); + } + if ($person == "beth") { + $myFile = "beth.txt"; + $fh = fopen($myFile, 'w') or die("can't open file"); + fwrite($fh, $status); + fclose($fh); + } +} + +function summon_status($person) { + if ($person == "russ") { + $myFile = "russ.txt"; + $fh = fopen($myFile, 'r') or die("can't open file"); + $status = fread($fh, 5); + fclose($fh); + } + if ($person == "beth") { + $myFile = "beth.txt"; + $fh = fopen($myFile, 'r') or die("can't open file"); + $status = fread($fh, 5); + fclose($fh); + } + return($status); +} +?> diff --git a/index.php b/index.php new file mode 100644 index 0000000..f47bbef --- /dev/null +++ b/index.php @@ -0,0 +1,466 @@ + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + +
+
 +
+ +
 +
+ +
+
+ + + +
+
+ + + +
+
+
+
+ +Middle + +
+
+
+
+ +
+ + +
+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ + + + + + + diff --git a/jukebox.php b/jukebox.php new file mode 100644 index 0000000..60ace13 --- /dev/null +++ b/jukebox.php @@ -0,0 +1,51 @@ +$name  "; +} + + +if ($_GET['ip']) { + $ip=$_GET['ip']; + $ch = curl_init(); + + curl_setopt($ch, CURLOPT_URL,"http://$ip:8800/xbmcCmds/xbmcHttp?command=querymusicdatabase(select%20strArtist%20from%20artist%20order%20by%20strArtist)"); + + curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); + #curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); + #curl_setopt($ch, CURLOPT_USERPWD, 'admin:admin'); + $output = curl_exec($ch); + + echo "
";
+  print_r($output);
+  $array=xml2array($output);
+  print_r($array);
+}
+
+exit;
+$ch = curl_init();
+
+curl_setopt($ch, CURLOPT_URL,"http://isy99/rest/nodes/11%20BE%2054%201");
+
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
+curl_setopt($ch, CURLOPT_USERPWD, 'admin:admin');
+
+$output = curl_exec($ch);
+
+#echo "
";
+$array=xml2array($output);
+#print_r($array);
+
+echo "";
+  echo "";
+  echo "";
+  echo "";
+  echo "";
+echo "
Set Temperature:".$array['nodeInfo']['node']['property']['0_attr']['formatted']."
Current Temperature:".($array['nodeInfo']['node']['property']['3_attr']['formatted'])."
Temperature Mode:".($array['nodeInfo']['node']['property']['1_attr']['formatted'])."
Humidity:".($array['nodeInfo']['properties']['property']['2_attr']['formatted'])."
";
+?>
diff --git a/left-arrow.html b/left-arrow.html
new file mode 100644
index 0000000..13b85e2
--- /dev/null
+++ b/left-arrow.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+

+
+
diff --git a/libraries/RGraph.bar.js b/libraries/RGraph.bar.js
new file mode 100644
index 0000000..317691d
--- /dev/null
+++ b/libraries/RGraph.bar.js
@@ -0,0 +1,1653 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+    
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The bar chart constructor
+    * 
+    * @param object canvas The canvas object
+    * @param array  data   The chart data
+    */
+    RGraph.Bar = function (id, data)
+    {
+        // Get the canvas and context objects
+        this.id                = id;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
+        this.canvas.__object__ = this;
+        this.type              = 'bar';
+        this.max               = 0;
+        this.stackedOrGrouped  = false;
+        this.isRGraph          = true;
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+
+        // Various config type stuff
+        this.properties = {
+            'chart.background.barcolor1':   'rgba(0,0,0,0)',
+            'chart.background.barcolor2':   'rgba(0,0,0,0)',
+            'chart.background.grid':        true,
+            'chart.background.grid.color':  '#ddd',
+            'chart.background.grid.width':  1,
+            'chart.background.grid.hsize':  20,
+            'chart.background.grid.vsize':  20,
+            'chart.background.grid.vlines': true,
+            'chart.background.grid.hlines': true,
+            'chart.background.grid.border': true,
+            'chart.background.grid.autofit':false,
+            'chart.background.grid.autofit.numhlines': 7,
+            'chart.background.grid.autofit.numvlines': 20,
+            'chart.ytickgap':               20,
+            'chart.smallyticks':            3,
+            'chart.largeyticks':            5,
+            'chart.numyticks':              10,
+            'chart.hmargin':                5,
+            'chart.strokecolor':            '#666',
+            'chart.axis.color':             'black',
+            'chart.gutter':                 25,
+            'chart.labels':                 null,
+            'chart.labels.ingraph':         null,
+            'chart.labels.above':           false,
+            'chart.labels.above.decimals':  0,
+            'chart.labels.above.size':      null,
+            'chart.ylabels':                true,
+            'chart.ylabels.count':          5,
+            'chart.ylabels.inside':         false,
+            'chart.xlabels.offset':         0,
+            'chart.xaxispos':               'bottom',
+            'chart.yaxispos':               'left',
+            'chart.text.color':             'black',
+            'chart.text.size':              10,
+            'chart.text.angle':             0,
+            'chart.text.font':              'Verdana',
+            'chart.ymax':                   null,
+            'chart.title':                  '',
+            'chart.title.background':       null,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':             null,
+            'chart.title.xaxis':            '',
+            'chart.title.yaxis':            '',
+            'chart.title.xaxis.pos':        0.25,
+            'chart.title.yaxis.pos':        0.25,
+            'chart.colors':                 ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0'],
+            'chart.grouping':               'grouped',
+            'chart.variant':                'bar',
+            'chart.shadow':                 false,
+            'chart.shadow.color':           '#666',
+            'chart.shadow.offsetx':         3,
+            'chart.shadow.offsety':         3,
+            'chart.shadow.blur':            3,
+            'chart.tooltips':               null,
+            'chart.tooltips.effect':        'fade',
+            'chart.tooltips.css.class':     'RGraph_tooltip',
+            'chart.tooltips.event':         'onclick',
+            'chart.tooltips.coords.adjust': [0,0],
+            'chart.tooltips.highlight':     true,
+            'chart.background.hbars':       null,
+
+            'chart.key':                    [],
+            'chart.key.background':         'white',
+            'chart.key.position':           'graph',
+            'chart.key.shadow':             false,
+            'chart.key.shadow.color':       '#666',
+            'chart.key.shadow.blur':        3,
+            'chart.key.shadow.offsetx':     2,
+            'chart.key.shadow.offsety':     2,
+            'chart.key.position.gutter.boxed': true,
+            'chart.key.position.x':         null,
+            'chart.key.position.y':         null,
+            'chart.key.color.shape':        'square',
+            'chart.key.rounded':            true,
+            'chart.key.text.size':          10,
+
+            'chart.contextmenu':            null,
+            'chart.line':                   null,
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.scale.decimals':         0,
+            'chart.scale.point':            '.',
+            'chart.scale.thousand':         ',',
+            'chart.crosshairs':             false,
+            'chart.crosshairs.color':       '#333',
+            'chart.linewidth':              1,
+            'chart.annotatable':            false,
+            'chart.annotate.color':         'black',
+            'chart.zoom.factor':            1.5,
+            'chart.zoom.fade.in':           true,
+            'chart.zoom.fade.out':          true,
+            'chart.zoom.hdir':              'right',
+            'chart.zoom.vdir':              'down',
+            'chart.zoom.frames':            10,
+            'chart.zoom.delay':             50,
+            'chart.zoom.shadow':            true,
+            'chart.zoom.mode':              'canvas',
+            'chart.zoom.thumbnail.width':   75,
+            'chart.zoom.thumbnail.height':  75,
+            'chart.zoom.background':        true,
+            'chart.resizable':              false,
+            'chart.adjustable':             false
+        }
+
+        // Check for support
+        if (!this.canvas) {
+            alert('[BAR] No canvas support');
+            return;
+        }
+        
+        // Check the common library has been included
+        if (typeof(RGraph) == 'undefined') {
+            alert('[BAR] Fatal error: The common library does not appear to have been included');
+        }
+
+        /**
+        * Determine whether the chart will contain stacked or grouped bars
+        */
+        for (i=0; i 0) {
+
+            alert('[BAR] (' + this.id + ') Sorry, tooltips are not supported with dot or pyramid charts');
+        }
+
+        /**
+        * Stop the coords array from growing uncontrollably
+        */
+        this.coords = [];
+
+        /**
+        * Work out a few things. They need to be here because they depend on things you can change before you
+        * call Draw() but after you instantiate the object
+        */
+        this.max            = 0;
+        this.grapharea      = this.canvas.height - ( (2 * this.gutter));
+        this.halfgrapharea  = this.grapharea / 2;
+        this.halfTextHeight = this.Get('chart.text.size') / 2;
+
+        // Progressively Draw the chart
+        RGraph.background.Draw(this);
+
+
+        //If it's a sketch chart variant, draw the axes first
+        if (this.Get('chart.variant') == 'sketch') {
+            this.DrawAxes();
+            this.Drawbars();
+        } else {
+            this.Drawbars();
+            this.DrawAxes();
+        }
+
+        this.DrawLabels();
+
+
+        // Draw the key if necessary
+        if (this.Get('chart.key').length) {
+            RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
+        }
+        
+        
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+
+        /**
+        * Is a line is defined, draw it
+        */
+        var line = this.Get('chart.line');
+
+        if (line) {
+            
+            // Check the length of the data(s)
+            if (line.original_data[0].length != this.data.length) {
+                alert("[BAR] You're adding a line with a differing amount of data points to the bar chart - this is not permitted");
+            }
+            
+            // Check the X axis positions
+            if (this.Get('chart.xaxispos') != line.Get('chart.xaxispos')) {
+                alert("[BAR] Using different X axis positions when combining the Bar and Line is not advised");
+            }
+
+            line.Set('chart.gutter', this.Get('chart.gutter'));
+            line.Set('chart.noaxes', true);
+            line.Set('chart.background.barcolor1', 'rgba(0,0,0,0)');
+            line.Set('chart.background.barcolor2', 'rgba(0,0,0,0)');
+            line.Set('chart.background.grid', false);
+            line.Set('chart.ylabels', false);
+            line.Set('chart.hmargin', (this.canvas.width - (2 * this.gutter)) / (line.original_data[0].length * 2));
+            
+            // If a custom yMax is set, use that
+            if (this.Get('chart.ymax')) {
+                line.Set('chart.ymax', this.Get('chart.ymax'));
+            }
+
+            line.Draw();
+        }
+
+
+        /**
+        * Draw "in graph" labels
+        */
+        if (this.Get('chart.labels.ingraph')) {
+            RGraph.DrawInGraphLabels(this);
+        }
+        
+        /**
+        * Draw crosschairs
+        */
+        if (this.Get('chart.crosshairs')) {
+            RGraph.DrawCrosshairs(this);
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+
+
+        /**
+        * This function enables adjusting
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+    
+    /**
+    * Draws the charts axes
+    */
+    RGraph.Bar.prototype.DrawAxes = function ()
+    {
+        var gutter   = this.gutter;
+        var xaxispos = this.Get('chart.xaxispos');
+        var yaxispos = this.Get('chart.yaxispos');
+
+        this.context.beginPath();
+        this.context.strokeStyle = this.Get('chart.axis.color');
+        this.context.lineWidth   = 1;
+
+        // Draw the Y axis
+        if (yaxispos == 'right') {
+            this.context.moveTo(this.canvas.width - gutter, gutter);
+            this.context.lineTo(this.canvas.width - gutter, this.canvas.height - gutter);
+        } else {
+            this.context.moveTo(gutter, gutter);
+            this.context.lineTo(gutter, this.canvas.height - gutter);
+        }
+        
+        // Draw the X axis
+        this.context.moveTo(gutter, (xaxispos == 'center' ? this.canvas.height / 2 : this.canvas.height - gutter));
+        this.context.lineTo(this.canvas.width - gutter, xaxispos == 'center' ? this.canvas.height / 2 : this.canvas.height - gutter);
+
+        var numYTicks = this.Get('chart.numyticks');
+
+        // Draw the Y tickmarks
+        var yTickGap = (this.canvas.height - (2 * gutter)) / numYTicks;
+        var xpos     = yaxispos == 'left' ? gutter : this.canvas.width - gutter;
+
+        for (y=gutter;
+             xaxispos == 'center' ? y <= (this.canvas.height - gutter) : y < (this.canvas.height - gutter);
+             y += yTickGap) {
+
+            if (xaxispos == 'center' && y == (this.canvas.height / 2)) continue;
+            
+            this.context.moveTo(xpos, y);
+            this.context.lineTo(xpos + (yaxispos == 'left' ? -3 : 3), y);
+        }
+
+        // Draw the X tickmarks
+        xTickGap = (this.canvas.width - (2 * gutter) ) / this.data.length;
+        yStart   = this.canvas.height - gutter;
+        yEnd     = (this.canvas.height - gutter) + 3;
+        
+        //////////////// X TICKS ////////////////
+
+        // Now move the Y start end positions down if the axis is set to center
+        if (xaxispos == 'center') {
+            yStart = (this.canvas.height / 2) + 3;
+            yEnd   = (this.canvas.height / 2) - 3;
+        }
+
+        for (x=gutter + (yaxispos == 'left' ? xTickGap : 0); x 0) {
+            RGraph.DrawBars(this);
+        }
+
+        var variant = this.Get('chart.variant');
+        
+        /**
+        * Draw the 3D axes is necessary
+        */
+        if (variant == '3d') {
+            RGraph.Draw3DAxes(this);
+        }
+
+        /**
+        * Get the variant once, and draw the bars, be they regular, stacked or grouped
+        */
+        
+        // Get these variables outside of the loop
+        var xaxispos      = this.Get('chart.xaxispos');
+        var width         = (this.canvas.width - (2 * gutter) ) / this.data.length;
+        var orig_height   = height;
+        var hmargin       = this.Get('chart.hmargin');
+        var shadow        = this.Get('chart.shadow');
+        var shadowColor   = this.Get('chart.shadow.color');
+        var shadowBlur    = this.Get('chart.shadow.blur');
+        var shadowOffsetX = this.Get('chart.shadow.offsetx');
+        var shadowOffsetY = this.Get('chart.shadow.offsety');
+        var strokeStyle   = this.Get('chart.strokecolor');
+        var colors        = this.Get('chart.colors');
+
+        for (i=0; i 0.4 ? -1 : 3) - (r * width),y - 1);
+                            this.context.lineTo(x + hmargin + width - (r > 0.4 ? 1 : -1) - (r * width), y + height + (r == 0.2 ? 1 : -2));
+                        }
+
+                        this.context.stroke();
+
+                    // Regular bar
+                    } else if (variant == 'bar' || variant == '3d' || variant == 'glass') {
+                    
+                        if (document.all && shadow) {
+                            this.DrawIEShadow([x + hmargin, y, barWidth, height]);
+                        }
+                        
+                        if (variant == 'glass') {
+                            RGraph.filledCurvyRect(this.context, x + hmargin, y, barWidth, height, 3, this.data[i] > 0, this.data[i] > 0, this.data[i] < 0, this.data[i] < 0);
+                            RGraph.strokedCurvyRect(this.context, x + hmargin, y, barWidth, height, 3, this.data[i] > 0, this.data[i] > 0, this.data[i] < 0, this.data[i] < 0);
+                        } else {
+                            this.context.strokeRect(x + hmargin, y, barWidth, height);
+                            this.context.fillRect(x + hmargin, y, barWidth, height);
+                        }
+
+                        
+                        // This bit draws the text labels that appear above the bars if requested
+                        if (this.Get('chart.labels.above')) {
+
+                            // Turn off any shadow
+                            if (shadow) {
+                                RGraph.NoShadow(this);
+                            }
+
+                            var yPos = y - 3;
+
+                            // Account for negative bars
+                            if (this.data[i] < 0) {
+                                yPos += height + 6 + (this.Get('chart.text.size') - 4);
+                            }
+
+                            this.context.fillStyle = this.Get('chart.text.color');
+                            RGraph.Text(this.context, this.Get('chart.text.font'), typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 3, x + hmargin + (barWidth / 2), yPos, RGraph.number_format(this, Number(this.data[i]).toFixed(this.Get('chart.labels.above.decimals')),this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
+                        }
+
+                        // 3D effect
+                        if (variant == '3d') {
+
+                            var prevStrokeStyle = this.context.strokeStyle;
+                            var prevFillStyle   = this.context.fillStyle;
+
+                            // Draw the top
+                            this.context.beginPath();
+                                this.context.moveTo(x + hmargin, y);
+                                this.context.lineTo(x + hmargin + 10, y - 5);
+                                this.context.lineTo(x + hmargin + 10 + barWidth, y - 5);
+                                this.context.lineTo(x + hmargin + barWidth, y);
+                            this.context.closePath();
+
+                            this.context.stroke();
+                            this.context.fill();
+
+                            // Draw the right hand side
+                            this.context.beginPath();
+                                this.context.moveTo(x + hmargin + barWidth, y);
+                                this.context.lineTo(x + hmargin + barWidth + 10, y - 5);
+                                this.context.lineTo(x + hmargin + barWidth + 10, y + height - 5);
+                                this.context.lineTo(x + hmargin + barWidth, y + height);
+                            this.context.closePath();
+    
+                            this.context.stroke();                        
+                            this.context.fill();
+
+                            // Draw the darker top section
+                            this.context.beginPath();
+                                this.context.fillStyle = 'rgba(255,255,255,0.3)';
+                                this.context.moveTo(x + hmargin, y);
+                                this.context.lineTo(x + hmargin + 10, y - 5);
+                                this.context.lineTo(x + hmargin + 10 + barWidth, y - 5);
+                                this.context.lineTo(x + hmargin + barWidth, y);
+                                this.context.lineTo(x + hmargin, y);
+                            this.context.closePath();
+    
+                            this.context.stroke();
+                            this.context.fill();
+
+                            // Draw the darker right side section
+                            this.context.beginPath();
+                                this.context.fillStyle = 'rgba(0,0,0,0.4)';
+                                this.context.moveTo(x + hmargin + barWidth, y);
+                                this.context.lineTo(x + hmargin + barWidth + 10, y - 5);
+                                this.context.lineTo(x + hmargin + barWidth + 10, y - 5 + height);
+                                this.context.lineTo(x + hmargin + barWidth, y + height);
+                                this.context.lineTo(x + hmargin + barWidth, y);
+                            this.context.closePath();
+
+                            this.context.stroke();
+                            this.context.fill();
+
+                            this.context.strokeStyle = prevStrokeStyle;
+                            this.context.fillStyle   = prevFillStyle;
+                        
+                        // Glass variant
+                        } else if (variant == 'glass') {
+ 
+                            var grad = this.context.createLinearGradient(
+                                                                         x + hmargin,
+                                                                         y,
+                                                                         x + hmargin + (barWidth / 2),
+                                                                         y
+                                                                        );
+                            grad.addColorStop(0, 'rgba(255,255,255,0.9)');
+                            grad.addColorStop(1, 'rgba(255,255,255,0.5)');
+
+                            this.context.beginPath();
+                            this.context.fillStyle = grad;
+                            this.context.fillRect(x + hmargin + 2,y + (this.data[i] > 0 ? 2 : 0),(barWidth / 2) - 2,height - 2);
+                            this.context.fill();
+                        }
+                    
+                    // Dot chart
+                    } else if (variant == 'dot') {
+
+                        this.context.beginPath();
+                        this.context.moveTo(x + (width / 2), y);
+                        this.context.lineTo(x + (width / 2), y + height);
+                        this.context.stroke();
+                        
+                        this.context.beginPath();
+                        this.context.fillStyle = this.Get('chart.colors')[i];
+                        this.context.arc(x + (width / 2), y + (this.data[i] > 0 ? 0 : height), 2, 0, 6.28, 0);
+                        
+                        // Set the colour for the dots
+                        this.context.fillStyle = this.Get('chart.colors')[0];
+
+                        this.context.stroke();
+                        this.context.fill();
+                    
+                    // Pyramid chart
+                    } else if (variant == 'pyramid') {
+
+                        this.context.beginPath();
+                            var startY = (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height / 2) : (this.canvas.height - this.Get('chart.gutter')));
+                        
+                            this.context.moveTo(x + hmargin, startY);
+                            this.context.lineTo(
+                                                x + hmargin + (barWidth / 2),
+                                                y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0)
+                                               );
+                            this.context.lineTo(x + hmargin + barWidth, startY);
+                        
+                        this.context.closePath();
+                        
+                        this.context.stroke();
+                        this.context.fill();
+                    
+                    // Arrow chart
+                    } else if (variant == 'arrow') {
+                        var startY = (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height / 2) : (this.canvas.height - this.gutter));
+
+                        this.context.lineWidth = this.Get('chart.linewidth') ? this.Get('chart.linewidth') : 1;
+                        this.context.lineCap = 'round';
+
+                        this.context.beginPath();
+
+                            this.context.moveTo(x + hmargin + (barWidth / 2), startY);
+                            this.context.lineTo(x + hmargin + (barWidth / 2), y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0));
+                            this.context.arc(x + hmargin + (barWidth / 2),
+                                             y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0),
+                                             5,
+                                             this.data[i] > 0 ? 0.78 : 5.6,
+                                             this.data[i] > 0 ? 0.79 : 5.48,
+                                             this.data[i] < 0);
+
+                            this.context.moveTo(x + hmargin + (barWidth / 2), y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0));
+                            this.context.arc(x + hmargin + (barWidth / 2),
+                                             y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0),
+                                             5,
+                                             this.data[i] > 0 ? 2.355 : 4,
+                                             this.data[i] > 0 ? 2.4 : 3.925,
+                                             this.data[i] < 0);
+
+                        this.context.stroke();
+                        
+                        this.context.lineWidth = 1;
+
+                    // Unknown variant type
+                    } else {
+                        alert('[BAR] Warning! Unknown chart.variant: ' + variant);
+                    }
+
+                    this.coords.push([x + hmargin, y, width - (2 * hmargin), height]);
+
+
+                /**
+                * Stacked bar
+                */
+                } else if (typeof(this.data[i]) == 'object' && this.Get('chart.grouping') == 'stacked') {
+                    
+                    var barWidth     = width - (2 * hmargin);
+                    var redrawCoords = [];// Necessary to draw if the shadow is enabled
+                    var startY       = 0;
+
+                    for (j=0; j 0) {
+
+                    /**
+                    * Get the tooltip text
+                    */
+                    if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                        var text = String(obj.Get('chart.tooltips')(barCoords[5]));
+                    
+                    } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'function') {
+                        var text = String(obj.Get('chart.tooltips')[barCoords[5]](barCoords[5]));
+                    
+                    } else if (typeof(obj.Get('chart.tooltips')) == 'object' && (typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'string' || typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'number')) {
+                        var text = String(obj.Get('chart.tooltips')[barCoords[5]]);
+                
+                    } else {
+                        var text = null;
+                    }
+
+                    if (text) {
+                        canvas.style.cursor = 'pointer';
+                    } else {
+                        canvas.style.cursor = 'default';
+                    }
+                    
+                    /**
+                    * Hide the currently displayed tooltip if the index is the same
+                    */
+                    if (   RGraph.Registry.Get('chart.tooltip')
+                        && RGraph.Registry.Get('chart.tooltip').__canvas__.id != obj.id
+                        && obj.Get('chart.tooltips.event') == 'onmousemove') {
+
+                        RGraph.Redraw();
+                        RGraph.HideTooltip();
+                    }
+
+                    /**
+                    * This facilitates the tooltips using the onmousemove event
+                    */
+
+                    if (   obj.Get('chart.tooltips.event') == 'onmousemove'
+                        && (
+                               (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ != barCoords[5])
+                            || !RGraph.Registry.Get('chart.tooltip')
+                           )
+                        && text) {
+                        /**
+                        * Show a tooltip if it's defined
+                        */
+                        RGraph.Redraw(obj);
+
+                        obj.context.beginPath();
+                        obj.context.strokeStyle = 'black';
+                        obj.context.fillStyle   = 'rgba(255,255,255,0.5)';
+                        obj.context.strokeRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
+                        obj.context.fillRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
+                
+                        obj.context.stroke();
+                        obj.context.fill();
+
+                        RGraph.Tooltip(canvas, text, e.pageX, e.pageY, barCoords[5]);
+                    }
+                } else {
+                    canvas.style.cursor = 'default';
+                }
+            }
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove);
+            this.canvas.addEventListener('mousemove', canvas_onmousemove, false);
+
+
+            /**
+            * Install the onclick event handler for the tooltips
+            */
+            if (this.Get('chart.tooltips.event') == 'onclick') {
+
+                canvas_onclick = function (e)
+                {
+                    var e = RGraph.FixEventObject(e);
+    
+                    // If the button pressed isn't the left, we're not interested
+                    if (e.button != 0) return;
+    
+                    e = RGraph.FixEventObject(e);
+    
+                    var canvas    = document.getElementById(this.id);
+                    var obj       = canvas.__object__;
+                    var barCoords = obj.getBar(e);
+
+                    /**
+                    * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
+                    * This "deselects" any already selected bar
+                    */
+                    RGraph.Redraw();
+
+                    /**
+                    * Loop through the bars determining if the mouse is over a bar
+                    */
+                    if (barCoords) {
+
+                        /**
+                        * Get the tooltip text
+                        */
+                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                            var text = String(obj.Get('chart.tooltips')(barCoords[5]));
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'function') {
+                            var text = String(obj.Get('chart.tooltips')[barCoords[5]](barCoords[5]));
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                            var text = String(obj.Get('chart.tooltips')[barCoords[5]]);
+
+                        } else {
+                            var text = null;
+                        }
+
+                        /**
+                        * Show a tooltip if it's defined
+                        */
+                        if (text && text != 'undefined') {
+
+                            // [TODO] Allow customisation of the highlight colors
+                            obj.context.beginPath();
+                            obj.context.strokeStyle = 'black';
+                            obj.context.fillStyle   = 'rgba(255,255,255,0.5)';
+                            obj.context.strokeRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
+                            obj.context.fillRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
+        
+                            obj.context.stroke();
+                            obj.context.fill();
+
+                            RGraph.Tooltip(canvas, text, e.pageX, e.pageY, barCoords[5]);
+                        }
+                    }
+    
+                    /**
+                    * Stop the event bubbling
+                    */
+                    e.stopPropagation();
+                }
+                RGraph.AddEventListener(this.id, 'click', canvas_onclick);
+                this.canvas.addEventListener('click', canvas_onclick, false);
+            }
+
+
+            // This resets the bar graph
+            // 8th August 2010 : Is this redundant
+            //if (typeof(obj) != 'undefined' && obj == RGraph.Registry.Get('chart.tooltip')) {
+            //    obj.style.display = 'none';
+            //    RGraph.Registry.Set('chart.tooltip', null)
+            //}
+        }
+    }
+
+    /**
+    * Draws the labels for the graph
+    */
+    RGraph.Bar.prototype.DrawLabels = function ()
+    {
+        var context    = this.context;
+        var gutter     = this.gutter;
+        var text_angle = this.Get('chart.text.angle');
+        var text_size  = this.Get('chart.text.size');
+        var labels     = this.Get('chart.labels');
+
+
+        // Draw the Y axis labels:
+        if (this.Get('chart.ylabels')) {
+            this.Drawlabels_center();
+            this.Drawlabels_bottom();
+        }
+
+        /**
+        * The X axis labels
+        */
+        if (typeof(labels) == 'object' && labels) {
+
+            var yOffset = 13 + Number(this.Get('chart.xlabels.offset'));
+
+            /**
+            * Text angle
+            */
+            var angle  = 0;
+            var halign = 'center';
+
+            if (text_angle > 0) {
+                angle  = -1 * text_angle;
+                halign   = 'right';
+                yOffset -= 5;
+            }
+
+            // Draw the X axis labels
+            context.fillStyle = this.Get('chart.text.color');
+            
+            // How wide is each bar
+            var barWidth = (this.canvas.width - (2 * gutter) ) / labels.length;
+            
+            // Reset the xTickGap
+            xTickGap = (this.canvas.width - (2 * gutter)) / labels.length
+
+            // Draw the X tickmarks
+            var i=0;
+            var font = this.Get('chart.text.font');
+
+            for (x=gutter + (xTickGap / 2); x<=this.canvas.width - gutter; x+=xTickGap) {
+                RGraph.Text(context, font,
+                                      text_size,
+                                      x + (this.Get('chart.text.angle') == 90 ? 0: 0),
+                                      (this.canvas.height - gutter) + yOffset,
+                                      String(labels[i++]),
+                                      (this.Get('chart.text.angle') == 90 ? 'center' : null),
+                                      halign,
+                                      null,
+                                      angle);
+            }
+        }
+    }
+
+    /**
+    * Draws the X axis in the middle
+    */
+    RGraph.Bar.prototype.Drawlabels_center = function ()
+    {
+        var font       = this.Get('chart.text.font');
+        var numYLabels = this.Get('chart.ylabels.count');
+
+        this.context.fillStyle = this.Get('chart.text.color');
+
+        if (this.Get('chart.xaxispos') == 'center') {
+
+            /**
+            * Draw the top labels
+            */
+            var interval   = (this.grapharea * (1/10) );
+            var text_size  = this.Get('chart.text.size');
+            var gutter     = this.gutter;
+            var units_pre  = this.Get('chart.units.pre');
+            var units_post = this.Get('chart.units.post');
+            var context = this.context;
+            var align   = '';
+            var xpos    = 0;
+            var boxed   = false;
+
+            this.context.fillStyle = this.Get('chart.text.color');
+            this.context.strokeStyle = 'black';
+
+            if (this.Get('chart.ylabels.inside') == true) {
+                var xpos  = this.Get('chart.yaxispos') == 'left' ? gutter + 5 : this.canvas.width - gutter - 5;
+                var align = this.Get('chart.yaxispos') == 'left' ? 'left' : 'right';
+                var boxed = true;
+            } else {
+                var xpos  = this.Get('chart.yaxispos') == 'left' ? gutter - 5 : this.canvas.width - gutter + 5;
+                var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left';
+                var boxed = false;
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+            /**
+            * Draw specific Y labels here so that the local variables can be reused
+            */
+            if (typeof(this.Get('chart.ylabels.specific')) == 'object') {
+
+                var labels = this.Get('chart.ylabels.specific');
+                var grapharea = this.canvas.height - (2 * gutter);
+
+                // Draw the top halves labels
+                for (var i=0; i=0; --i) {
+                    var y = gutter + (grapharea * ( (i+1) / (labels.length * 2) )) + (grapharea / 2);
+
+                    RGraph.Text(context, font, text_size, xpos, y, labels[labels.length - i - 1], 'center', align, boxed);
+                }
+
+                return;
+            }
+
+
+
+
+
+
+
+
+
+
+
+
+            if (numYLabels == 3 || numYLabels == 5) {
+                RGraph.Text(context, font, text_size, xpos, gutter + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed);
+    
+                if (numYLabels == 5) {
+                    RGraph.Text(context, font, text_size, xpos, (1*interval) + gutter + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed);
+                    RGraph.Text(context, font, text_size, xpos, (3*interval) + gutter + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed);
+                }
+                
+                if (numYLabels == 3 || numYLabels == 5) {
+                    RGraph.Text(context, font, text_size, xpos, (4*interval) + gutter + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed);
+                    RGraph.Text(context, font, text_size, xpos, (2*interval) + gutter + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed);
+                }
+            } else if (numYLabels == 10) {
+                // 10Y labels
+                interval = (this.grapharea / numYLabels) / 2;
+            
+                for (var i=0; i= (left + obj.Get('chart.tooltips.coords.adjust')[0])
+                && mouseX <= (left + width+ obj.Get('chart.tooltips.coords.adjust')[0])
+                && mouseY >= (top + obj.Get('chart.tooltips.coords.adjust')[1])
+                && mouseY <= (top + height + obj.Get('chart.tooltips.coords.adjust')[1]) ) {
+                
+                return [obj, left, top, width, height, i];
+            }
+        }
+        
+        return null;
+    }
diff --git a/libraries/RGraph.bipolar.js b/libraries/RGraph.bipolar.js
new file mode 100644
index 0000000..d563fb4
--- /dev/null
+++ b/libraries/RGraph.bipolar.js
@@ -0,0 +1,713 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+    
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The bi-polar/age frequency constructor.
+    * 
+    * @param string id The id of the canvas
+    * @param array  left  The left set of data points
+    * @param array  right The right set of data points
+    */
+    RGraph.Bipolar = function (id, left, right)
+    {
+        // Get the canvas and context objects
+        this.id                = id;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext('2d');
+        this.canvas.__object__ = this;
+        this.type              = 'bipolar';
+        this.coords            = [];
+        this.max               = 0;
+        this.isRGraph          = true;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+        
+        // The left and right data respectively
+        this.left       = left;
+        this.right      = right;
+        this.data       = [left, right];
+
+        this.properties = {
+            'chart.margin':                 2,
+            'chart.xtickinterval':          null,
+            'chart.labels':                 [],
+            'chart.text.size':              10,
+            'chart.text.color':             'black',
+            'chart.text.font':              'Verdana',
+            'chart.title.left':             '',
+            'chart.title.right':            '',
+            'chart.gutter':                 25,
+            'chart.gutter.center':          60,
+            'chart.title':                  '',
+            'chart.title.background':       null,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':             null,
+            'chart.colors':                 ['#0f0'],
+            'chart.contextmenu':            null,
+            'chart.tooltips':               null,
+            'chart.tooltips.effect':         'fade',
+            'chart.tooltips.css.class':      'RGraph_tooltip',
+            'chart.tooltips.highlight':     true,
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.shadow':                 false,
+            'chart.shadow.color':           '#666',
+            'chart.shadow.offsetx':         3,
+            'chart.shadow.offsety':         3,
+            'chart.shadow.blur':            3,
+            'chart.annotatable':            false,
+            'chart.annotate.color':         'black',
+            'chart.xmax':                   null,
+            'chart.scale.decimals':         null,
+            'chart.scale.point':            '.',
+            'chart.scale.thousand':         ',',
+            'chart.axis.color':             'black',
+            'chart.zoom.factor':            1.5,
+            'chart.zoom.fade.in':           true,
+            'chart.zoom.fade.out':          true,
+            'chart.zoom.hdir':              'right',
+            'chart.zoom.vdir':              'down',
+            'chart.zoom.frames':            10,
+            'chart.zoom.delay':             50,
+            'chart.zoom.shadow':            true,
+            'chart.zoom.mode':              'canvas',
+            'chart.zoom.thumbnail.width':   75,
+            'chart.zoom.thumbnail.height':  75,
+            'chart.zoom.background':        true,
+            'chart.zoom.action':            'zoom',
+            'chart.resizable':              false,
+            'chart.strokestyle':            '#333'
+        }
+
+        // Pad the arrays so they're the same size
+        while (this.left.length < this.right.length) this.left.push(0);
+        while (this.left.length > this.right.length) this.right.push(0);
+
+        // Check the common library has been included
+        if (typeof(RGraph) == 'undefined') {
+            alert('[BIPOLAR] Fatal error: The common library does not appear to have been included');
+        }
+    }
+
+
+    /**
+    * The setter
+    * 
+    * @param name  string The name of the parameter to set
+    * @param value mixed  The value of the paraneter 
+    */
+    RGraph.Bipolar.prototype.Set = function (name, value)
+    {
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+    /**
+    * The getter
+    * 
+    * @param name string The name of the parameter to get
+    */
+    RGraph.Bipolar.prototype.Get = function (name)
+    {
+        return this.properties[name.toLowerCase()];
+    }
+
+    
+    /**
+    * Draws the graph
+    */
+    RGraph.Bipolar.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+
+        /**
+        * Clear all of this canvases event handlers (the ones installed by RGraph)
+        */
+        RGraph.ClearEventListeners(this.id);
+
+
+        // Reset the data to what was initially supplied
+        this.left  = this.data[0];
+        this.right = this.data[1];
+
+        /**
+        * Reset the coords array
+        */
+        this.coords = [];
+
+        this.GetMax();
+        this.DrawAxes();
+        this.DrawTicks();
+        this.DrawLeftBars();
+        this.DrawRightBars();
+
+        if (this.Get('chart.axis.color') != 'black') {
+            this.DrawAxes(); // Draw the axes again (if the axes color is not black)
+        }
+
+        this.DrawLabels();
+        this.DrawTitles();
+        
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+
+        /**
+        * Install the on* event handlers
+        */
+        if (this.Get('chart.tooltips')) {
+
+
+            // Register the object so that it gets redrawn
+            RGraph.Register(this);
+
+
+            /**
+            * Install the window onclick handler
+            */
+            
+            /**
+            * Install the window event handler
+            */
+            var eventHandler_window_click = function ()
+            {
+                RGraph.Redraw();
+            }
+            window.addEventListener('click', eventHandler_window_click, false);
+            RGraph.AddEventListener('window_' + this.id, 'click', eventHandler_window_click);
+
+
+
+            /**
+            * If the cursor is over a hotspot, change the cursor to a hand
+            */
+            var eventHandler_canvas_mousemove = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var canvas = document.getElementById(this.id);
+                var obj = canvas.__object__;
+
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(e);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0; i= left && mouseX <= (left + width ) && mouseY >= top && mouseY <= (top + height) ) {
+                        canvas.style.cursor = 'pointer';
+                        return;
+                    }
+                }
+                    
+                canvas.style.cursor = 'default';
+            }
+            this.canvas.addEventListener('mousemove', eventHandler_canvas_mousemove, false);
+            RGraph.AddEventListener(this.id, 'mouseover', eventHandler_canvas_mousemove);
+
+
+            /**
+            * Install the onclick event handler for the tooltips
+            */
+            var eventHandler_canvas_click = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var canvas = document.getElementById(this.id)
+                var obj = canvas.__object__;
+
+                /**
+                * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
+                * This "deselects" any already selected bar
+                */
+                RGraph.Clear(canvas);
+                obj.Draw();
+    
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(e);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0; i= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
+                        
+    
+                        /**
+                        * Show a tooltip if it's defined
+                        * FIXME pageX and pageY not supported in MSIE
+                        */
+                        if (obj.Get('chart.tooltips')) {
+    
+                            /**
+                            * Get the tooltip text
+                            */
+                            if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                                var text = obj.Get('chart.tooltips')(i);
+
+                            } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'function') {
+                                var text = obj.Get('chart.tooltips')[i](i);
+                            
+                            } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                                var text = obj.Get('chart.tooltips')[i];
+    
+                            } else {
+                                var text = '';
+                            }
+
+                            obj.context.beginPath();
+                            obj.context.strokeStyle = 'black';
+                            obj.context.fillStyle   = 'rgba(255,255,255,0.5)';
+                            obj.context.strokeRect(left, top, width, height);
+                            obj.context.fillRect(left, top, width, height);
+        
+                            obj.context.stroke();
+                            obj.context.fill();
+
+                            RGraph.Tooltip(canvas, text, e.pageX, e.pageY, i);
+                        }
+                    }
+                }
+
+                /**
+                * Stop the event bubbling
+                */
+                e.stopPropagation();
+                
+                return false;
+            }
+            this.canvas.addEventListener('click', eventHandler_canvas_click, false);
+            RGraph.AddEventListener(this.id, 'click', eventHandler_canvas_click);
+
+            // This resets the bipolar graph
+            if (RGraph.Registry.Get('chart.tooltip')) {
+                RGraph.Registry.Get('chart.tooltip').style.display = 'none';
+                RGraph.Registry.Set('chart.tooltip', null)
+            }
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+
+    /**
+    * Draws the axes
+    */
+    RGraph.Bipolar.prototype.DrawAxes = function ()
+    {
+        // Draw the left set of axes
+        this.context.beginPath();
+        this.context.strokeStyle = this.Get('chart.axis.color');
+
+        this.axisWidth  = (this.canvas.width - this.Get('chart.gutter.center') ) / 2;
+        this.axisHeight = this.canvas.height - (2 * this.Get('chart.gutter'));
+
+        this.context.moveTo(this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter'));
+        this.context.lineTo(this.axisWidth, this.canvas.height - this.Get('chart.gutter'));
+        this.context.lineTo(this.axisWidth, this.Get('chart.gutter'));
+        
+        this.context.stroke();
+
+        // Draw the right set of axes
+        this.context.beginPath();
+
+        this.axisWidth  = ((this.canvas.width - this.Get('chart.gutter.center')) / 2) + this.Get('chart.gutter.center');
+        
+        this.context.moveTo(this.axisWidth, this.Get('chart.gutter'));
+        this.context.lineTo(this.axisWidth, this.canvas.height - this.Get('chart.gutter'));
+        this.context.lineTo(this.canvas.width - this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter'));
+
+        this.context.stroke();
+    }
+
+
+    /**
+    * Draws the tick marks on the axes
+    */
+    RGraph.Bipolar.prototype.DrawTicks = function ()
+    {
+        var numDataPoints = this.left.length;
+        var barHeight     = ( (this.canvas.height - (2 * this.Get('chart.gutter')))- (this.left.length * (this.Get('chart.margin') * 2) )) / numDataPoints;
+        
+        // Draw the left Y tick marks
+        for (var i = this.canvas.height - this.Get('chart.gutter'); i >= this.Get('chart.gutter'); i -= (barHeight + ( this.Get('chart.margin') * 2)) ) {
+            if (i < (this.canvas.height - this.Get('chart.gutter')) ) {
+                this.context.beginPath();
+                this.context.moveTo(this.axisWidth - this.Get('chart.gutter.center'), i);
+                this.context.lineTo(this.axisWidth - this.Get('chart.gutter.center') + 3, i);
+                this.context.stroke();
+            }
+        }
+
+        //Draw the right axis Y tick marks
+        for (var i = this.canvas.height - this.Get('chart.gutter'); i >= this.Get('chart.gutter'); i -= (barHeight + ( this.Get('chart.margin') * 2)) ) {
+            if (i < (this.canvas.height - this.Get('chart.gutter')) ) {
+                this.context.beginPath();
+                this.context.moveTo(this.axisWidth, i);
+                this.context.lineTo(this.axisWidth - 3, i);
+                this.context.stroke();
+            }
+        }
+        
+        // Draw the left sides X tick marks
+        var xInterval = (this.canvas.width - (2 * this.Get('chart.gutter')) - this.Get('chart.gutter.center')) / 10;
+
+        // Is chart.xtickinterval specified ? If so, use that.
+        if (typeof(this.Get('chart.xtickinterval')) == 'number') {
+            xInterval = this.Get('chart.xtickinterval');
+        }
+
+        for (i=this.Get('chart.gutter'); i<(this.canvas.width - this.Get('chart.gutter.center') ) / 2; i += xInterval) {
+            this.context.beginPath();
+            this.context.moveTo(i, this.canvas.height - this.Get('chart.gutter'));  // 4 is the tick height
+            this.context.lineTo(i, (this.canvas.height - this.Get('chart.gutter')) + 4);
+            this.context.closePath();
+            
+            this.context.stroke();
+        }
+
+        // Draw the right sides X tick marks
+        var stoppingPoint = (this.canvas.width - (2 * this.Get('chart.gutter')) - this.Get('chart.gutter.center')) / 2;
+        var stoppingPoint = stoppingPoint + this.Get('chart.gutter.center') + this.Get('chart.gutter')
+
+        for (i=this.canvas.width  - this.Get('chart.gutter'); i > stoppingPoint; i-=xInterval) {
+            this.context.beginPath();
+                this.context.moveTo(i, this.canvas.height - this.Get('chart.gutter'));
+                this.context.lineTo(i, (this.canvas.height - this.Get('chart.gutter')) + 4);
+            this.context.closePath();
+            
+            this.context.stroke();
+        }
+        
+        // Store this for later
+        this.barHeight = barHeight;
+    }
+
+
+    /**
+    * Figures out the maximum value, or if defined, uses xmax
+    */
+    RGraph.Bipolar.prototype.GetMax = function()
+    {
+        var max = 0;
+        var dec = this.Get('chart.scale.decimals');
+        
+        // chart.xmax defined
+        if (this.Get('chart.xmax')) {
+
+            max = this.Get('chart.xmax');
+            
+            this.scale    = [];
+            this.scale[0] = Number((max / 5) * 1).toFixed(dec);
+            this.scale[1] = Number((max / 5) * 2).toFixed(dec);
+            this.scale[2] = Number((max / 5) * 3).toFixed(dec);
+            this.scale[3] = Number((max / 5) * 4).toFixed(dec);
+            this.scale[4] = Number(max).toFixed(dec);
+
+            this.max = max;
+            
+
+        // Generate the scale ourselves
+        } else {
+            this.leftmax  = RGraph.array_max(this.left);
+            this.rightmax = RGraph.array_max(this.right);
+            max = Math.max(this.leftmax, this.rightmax);
+
+            this.scale    = RGraph.getScale(max, this);
+            this.scale[0] = Number(this.scale[0]).toFixed(dec);
+            this.scale[1] = Number(this.scale[1]).toFixed(dec);
+            this.scale[2] = Number(this.scale[2]).toFixed(dec);
+            this.scale[3] = Number(this.scale[3]).toFixed(dec);
+            this.scale[4] = Number(this.scale[4]).toFixed(dec);
+
+            this.max = this.scale[4];
+        }
+
+        // Don't need to return it as it is stored in this.max
+    }
+
+
+    /**
+    * Function to draw the left hand bars
+    */
+    RGraph.Bipolar.prototype.DrawLeftBars = function ()
+    {
+        // Set the stroke colour
+        this.context.strokeStyle = this.Get('chart.strokestyle');
+
+        for (i=0; i coords[i][0] - 5
+                        && mouseCoords[1] > coords[i][1] - 5
+                        && mouseCoords[0] < coords[i][0] + 5
+                        && mouseCoords[1] < coords[i][1] + 5
+                       ) {
+
+                        var numDataSeries = obj.original_data.length;
+                        var numDataPoints = obj.original_data[0].length;
+                        var data_series   = i / numDataPoints;
+                            data_series = Math.floor(data_series);
+    
+    
+    
+                      canvas.style.cursor = 'ns-resize';
+                      RGraph.Registry.Set('chart.adjusting.line.' + id, [obj, i, [coords[i][0], coords[i][1]], data_series]);
+    
+                      return;
+                    }
+                }
+            }
+    
+    
+            canvas.onmousemove = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+                var id = e.target.__object__.id;
+    
+                var state = RGraph.Registry.Get('chart.adjusting.line.' + id);
+    
+                if (state) {
+                    var obj         = state[0];
+                    var idx         = state[1];
+                    var canvas      = obj.canvas;
+                    var context     = obj.context;
+                    var data_series = state[3];
+                    var points      = obj.original_data[data_series];
+                    var mouseCoords = RGraph.getMouseXY(e);
+                    var x           = mouseCoords[0];
+                    var y           = mouseCoords[1];
+    
+                    if (y >= (obj.canvas.height - obj.Get('chart.gutter'))) {
+                        y = obj.canvas.height - obj.Get('chart.gutter');
+                    } else if (y <= obj.Get('chart.gutter')) {
+                        y = obj.Get('chart.gutter');
+                    }
+    
+                    var pos   = obj.canvas.height - (2 * obj.Get('chart.gutter'));
+                        pos   = pos - (y - obj.Get('chart.gutter'));
+                    var value = (obj.max / (obj.canvas.height - (2 * obj.Get('chart.gutter')))) * pos;
+    
+                    // Adjust the index so that it's applicable to the correct data series
+                    for (var i=0; i obj.coords[i][0] - 5
+                            && y > obj.coords[i][1] - 5
+                            && x < obj.coords[i][0] + 5
+                            && y < obj.coords[i][1] + 5
+                           ) {
+    
+                           canvas.style.cursor = 'ns-resize';
+                           return;
+                        }
+                    }
+                }
+                
+                e.target.style.cursor = null;
+            }
+    
+    
+            canvas.onmouseup = function (e)
+            {
+                var id = e.target.__object__.id;
+
+                RGraph.Registry.Set('chart.adjusting.line.' + id, null);
+                e.target.style.cursor = null;
+            }
+    
+    
+            canvas.onmouseout = function (e)
+            {
+                canvas.onmouseup(e);
+            }
+        
+        /**
+        * Progress bar
+        */
+        } else if (obj.type == 'hprogress') {
+
+            
+            canvas.onmousedown = function (e)
+            {
+                var id = e.target.__object__.id;
+
+                RGraph.Registry.Set('chart.adjusting.progress.' + id, [true]);
+                
+                canvas.onmousemove(e);
+            }
+
+
+            canvas.onmousemove = function (e)
+            {
+                var id    = e.target.__object__.id;
+                var state = RGraph.Registry.Get('chart.adjusting.progress.' + id);
+
+                if (state && state.length) {
+                    var obj     = e.target.__object__;
+                    var canvas  = obj.canvas;
+                    var context = obj.context;
+                    
+                    if (obj.type == 'hprogress') {
+                    
+                        var coords = RGraph.getMouseXY(e);
+                            coords[0] = Math.max(0, coords[0] - obj.Get('chart.gutter'));
+                        var barWidth  = canvas.width - (2 * obj.Get('chart.gutter'));
+                        
+                        // Work out the new value
+                        var value  = (coords[0] / barWidth) * (obj.max - obj.Get('chart.min'));
+                            value += obj.Get('chart.min');
+                        
+                        obj.value = Math.max(0, value.toFixed());
+                        RGraph.Clear(obj.canvas);
+                        obj.Draw();
+
+                    } else if (obj.type == 'vprogress') {
+
+                        var coords = RGraph.getMouseXY(e);
+                            coords[1] = Math.max(0, coords[1] - obj.Get('chart.gutter'));
+                        var barHeight = canvas.height - (2 * obj.Get('chart.gutter'));
+                        
+                        // Work out the new value
+                        var value = ( (barHeight - coords[1]) / barHeight) * obj.max;
+                        
+                        obj.value = Math.max(0, value.toFixed());
+                        RGraph.Clear(obj.canvas);
+                        obj.Draw();
+                    }
+
+                    /**
+                    * Fire the onadjust event
+                    */
+                    RGraph.FireCustomEvent(obj, 'onadjust');
+                }
+            }
+            
+            
+            canvas.onmouseup = function (e)
+            {
+                var id = e.target.__object__.id;
+                RGraph.Registry.Set('chart.adjusting.progress.' + id, null);
+            }
+    
+    
+            canvas.onmouseout = function (e)
+            {
+                canvas.onmouseup(e);
+            }
+        
+        /**
+        * Rose chart
+        */
+        } else if (obj.type == 'rose') {
+
+
+            obj.Set('chart.ymax', obj.max);
+
+
+            canvas.onmousemove = function (e)
+            {
+                var obj     = e.target.__object__;
+                var id      = obj.id;
+                var canvas  = obj.canvas;
+                var context = obj.context;
+                var coords  = RGraph.getMouseXY(e);
+                var segment = RGraph.Registry.Get('chart.adjusting.rose.' + id);
+                var x       = Math.abs(coords[0] - obj.centerx);
+                var y       = Math.abs(coords[1] - obj.centery);
+                var theta   = Math.atan(y / x) * (180 / Math.PI); // theta is now in DEGREES
+
+
+                // Account for the correct quadrant
+                if (coords[0] >= obj.centerx && coords[1] < obj.centery) {
+                    theta = 90 - theta;
+                } else if (coords[0] >= obj.centerx && coords[1] >= obj.centery) {
+                    theta += 90;
+                } else if (coords[0] < obj.centerx && coords[1] >= obj.centery) {
+                    theta = 90 - theta;
+                    theta = 180 + theta;
+                    
+                } else if (coords[0] < obj.centerx && coords[1] < obj.centery) {
+                    theta = theta + 270;
+                }
+
+                var Opp = y;
+                var Adj = x;
+                var Hyp = Math.abs(Adj / Math.sin(theta / (180 / Math.PI)));
+
+                for (var i=0; i obj.angles[i][0]
+                        && theta < obj.angles[i][1] ) {
+
+                        if (RGraph.Registry.Get('chart.adjusting.rose.' + id) && i == segment[5]) {
+                            var newvalue  = (Hyp / (obj.radius - 25) ) * obj.max;
+                            obj.data[i]   = Math.min(newvalue, obj.max);
+
+                            RGraph.Clear(obj.canvas);
+                            obj.Draw();
+
+                            /**
+                            * Fire the onadjust event
+                            */
+                            RGraph.FireCustomEvent(obj, 'onadjust');
+                        }
+                        
+                        if (Hyp <= (obj.angles[i][2] + 5) && Hyp >= (obj.angles[i][2] - 5) ) {
+                            canvas.style.cursor = 'move';
+                            return;
+                        
+                        } else if (obj.Get('chart.tooltips') && Hyp <= (obj.angles[i][2] - 5) ) {
+                            canvas.style.cursor = 'pointer';
+                            return;
+                        }
+
+                    }
+                }
+
+                canvas.style.cursor = 'default';
+            }
+
+
+            canvas.onmousedown = function (e)
+            {
+                var obj     = e.target.__object__;
+                var id      = obj.id;
+                var canvas  = obj.canvas;
+                var context = obj.context;
+                var coords  = RGraph.getMouseXY(e);
+                var segment = RGraph.getSegment(e, 5);
+
+                if (segment && segment.length && !RGraph.Registry.Get('chart.adjusting.rose.' + id)) {
+                    var x = Math.abs(coords[0] - obj.centerx);
+                    var y = Math.abs(coords[1] - obj.centery);
+
+                    var a = Math.atan(y / x) * (180 / Math.PI); // a is now in DEGREES
+
+                    // Account for the correct quadrant
+                    if (coords[0] >= obj.centerx && coords[1] < obj.centery) {
+                        a  = 90 - a;
+                        a += 270;
+                    } else if (coords[0] >= obj.centerx && coords[1] >= obj.centery) {
+                        // Nada
+                    } else if (coords[0] < obj.centerx && coords[1] >= obj.centery) {
+                         a  = 90 - a;
+                         a += 90;
+                    } else if (coords[0] < obj.centerx && coords[1] < obj.centery) {
+                        a += 180;
+                    }
+
+                    var hyp = Math.abs(y / Math.sin(a / 57.3));
+
+                    if (hyp >= (segment[2] - 10) ) {
+
+                        /**
+                        * Hide any currently shown tooltip
+                        */
+                        if (RGraph.Registry.Get('chart.tooltip')) {
+                            RGraph.Registry.Get('chart.tooltip').style.display = 'none';
+                            RGraph.Registry.Set('chart.tooltip', null);
+                        }
+                        
+                        RGraph.Registry.Set('chart.adjusting.rose.' + id, segment);
+                        
+                        e.stopPropagation();
+                    }
+                }
+            }
+
+
+            canvas.onmouseup = function (e)
+            {
+                var obj = e.target.__object__;
+                var id  = obj.id;
+
+                if (RGraph.Registry.Get('chart.adjusting.rose.' + id)) {
+
+                    RGraph.Registry.Set('chart.adjusting.rose.' + id, null);
+                    e.stopPropagation();
+                    
+                    return false;
+                }
+            }
+    
+    
+            canvas.onmouseout = function (e)
+            {
+                canvas.onmouseup(e);
+            }
+
+        /**
+        * Bar chart
+        */
+        } else if (obj.type == 'bar') {
+        
+            // Stacked bar charts not supported
+            if (obj.Get('chart.grouping') == 'stacked') {
+                alert('[BAR] Adjusting stacked bar charts is not supported');
+                return;
+            }
+
+
+            var canvas  = obj.canvas;
+            var context = obj.context;
+
+
+            canvas.onmousemove = function (e)
+            {
+                var obj     = e.target.__object__;
+                var id      = obj.id;
+                var canvas  = obj.canvas;
+                var context = obj.context;
+                var mouse   = RGraph.getMouseXY(e);
+                var mousex  = mouse[0];
+                var mousey  = mouse[1]; // mousey, mousey...
+
+                // Loop through the coords to see if the mouse position is at the top of a bar
+                for (var i=0; i obj.coords[i][0] && mousex < (obj.coords[i][0] + obj.coords[i][2])) {
+                        
+                        // Change the mouse pointer
+                        if (mousey > (obj.coords[i][1] - 5) && mousey < (obj.coords[i][1] + 5)) {
+                            canvas.style.cursor = 'ns-resize';
+                        } else {
+                            canvas.style.cursor = 'default';
+                        }
+
+                        var idx = RGraph.Registry.Get('chart.adjusting.bar.' + id)
+                        
+                        if (typeof(idx) == 'number') {
+                            var newheight = obj.grapharea - (mousey - obj.Get('chart.gutter'));
+                            var newvalue  = (newheight / obj.grapharea) * obj.max;
+                            
+                            // Top and bottom boundaries
+                            if (newvalue > obj.max) newvalue = obj.max;
+                            if (newvalue < 0)       newvalue = 0;
+
+                            ///////////////// This was fun to work out... /////////////////
+                            for (var j=0, index=0; j obj.coords[i][0] && mousex < (obj.coords[i][0] + obj.coords[i][2])
+                        
+                       ) {
+
+                        obj.Set('chart.ymax', obj.max);
+                        RGraph.Registry.Set('chart.adjusting.bar.' + id, i);
+                        canvas.onmousemove(e);
+                    }
+                }
+            }
+
+
+
+            canvas.onmouseup = function (e)
+            {
+                var id = e.target.__object__.id;
+                
+                RGraph.Registry.Set('chart.adjusting.bar.' + id, null);
+            }
+
+
+            canvas.onmouseout = function (e)
+            {
+                canvas.onmouseup(e);
+            }
+
+
+        /**
+        * The Tradar chart
+        */
+        } else if (obj.type == 'tradar') {
+
+
+            var canvas = obj.canvas;
+            var context = obj.context;
+            
+            
+            canvas.onmousemove = function (e)
+            {
+                var obj         = e.target.__object__;
+                var id          = obj.id;
+                var canvas      = obj.canvas;
+                var context     = obj.context;
+                var mouseDown   = RGraph.Registry.Get('chart.adjusting.tradar.' + id);
+                var mouseCoords = RGraph.getMouseXY(e);
+
+
+                if (mouseDown) {
+
+                    canvas.style.cursor = 'move';
+
+                    var dx  = mouseCoords[0] - obj.centerx;
+                    var dy  = mouseCoords[1] - obj.centery;
+                    var hyp = Math.sqrt((dx * dx) + (dy * dy));
+
+                    var newvalue = (hyp / (obj.size / 2)) * obj.max;
+                    
+                    newvalue = Math.min(obj.max, newvalue);
+                    newvalue = Math.max(0, newvalue);
+
+                    /**
+                    * Only redraw the graph if the mouse is in the same quadrant as the point
+                    */
+                    if ( (dx >= 0 ? true : false) == mouseDown[1] && (dy >= 0 ? true : false) == mouseDown[2]) {
+                        obj.data[mouseDown[0]] = newvalue;
+                        RGraph.Clear(canvas);
+                        obj.Draw();
+
+                        /**
+                        * Fire the onadjust event
+                        */
+                        RGraph.FireCustomEvent(obj, 'onadjust');
+                    }
+
+
+                } else {
+
+                    // Determine if the mouse is near a point, and if so, change the pointer
+                    for (var i=0; i obj.centerx, obj.coords[i][1] > obj.centery]);
+                        return;
+                    }
+                }
+                    
+                canvas.style.cursor = 'default';
+            }
+
+
+            canvas.onmouseup = function (e)
+            {
+                RGraph.Registry.Set('chart.adjusting.tradar.' + e.target.id, null);
+                canvas.style.cursor = 'default';
+            }
+    
+    
+            canvas.onmouseout = function (e)
+            {
+                canvas.onmouseup(e);
+            }
+        }
+    }
+
+
+    /**
+    * Returns 1 or -1 depening on whether the given number is positive or negative.
+    * Zero is considered positive.
+    * 
+    * @param  int num The number
+    * @return int     1 if the number is positive or zero, -1 if it's negative
+    */
+    //RGraph.getSign = function (num)
+    //{
+    //    return num >= 0 ? 1 : -1;
+    //}
\ No newline at end of file
diff --git a/libraries/RGraph.common.annotate.js b/libraries/RGraph.common.annotate.js
new file mode 100644
index 0000000..6cb5e15
--- /dev/null
+++ b/libraries/RGraph.common.annotate.js
@@ -0,0 +1,317 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
+
+
+    /**
+    * The function which controls the annotate feature
+    * 
+    * @param object obj The graph object
+    */
+    RGraph.Annotate = function (obj)
+    {
+        /**
+        * This installs some event handlers
+        */
+        if (obj.Get('chart.annotatable')) {
+
+            var canvas  = obj.canvas;
+            var context = obj.context;
+            
+            /**
+            * Capture the mouse events so we can set whther the mouse is down or not
+            */
+                canvas.onmousedown = function (e)
+                {
+                    if (e.button == 0) {
+
+                        e.target.__object__.Set('chart.mousedown', true);
+
+                        // Get the context
+                        var obj = e.target.__object__;
+                        var context = obj.canvas.getContext('2d');
+
+                        // Don't want any "joining" lines or colour "bleeding"
+                        context.beginPath();
+
+                        // Accommodate Chrome
+                        var coords = RGraph.getMouseXY(e);
+                        var x      = coords[0];
+                        var y      = coords[1];
+                        
+                        // Clear the annotation recording
+                        RGraph.Registry.Set('annotate.actions', [obj.Get('chart.annotate.color')]);
+
+                        context.strokeStyle = obj.Get('chart.annotate.color');
+
+                        context.moveTo(x, y);
+                    
+                        // Set the lineWidth
+                        context.lineWidth = 1;
+                        
+                        RGraph.Registry.Set('started.annotating', false);
+                        
+                        /**
+                        * Fire the onannotatestart event
+                        */
+                        RGraph.FireCustomEvent(obj, 'onannotatestart');
+                    }
+                    
+                    return false;
+                }
+                
+                /**
+                * This cancels annotating for ALL canvases
+                */
+                window.onmouseup = function (e)
+                {
+                    var tags = document.getElementsByTagName('canvas');
+
+                    for (var i=0; i 0 && window.localStorage) {
+
+                        var id = '__rgraph_annotations_' + e.target.id + '__';
+                        var annotations  = window.localStorage[id] ? window.localStorage[id] + '|' : '';
+                            annotations += RGraph.Registry.Get('annotate.actions');
+
+                        // Store the annotations information in HTML5 browser storage here
+                        window.localStorage[id] = annotations;
+                    }
+                    
+                    // Clear the recorded annotations
+                    RGraph.Registry.Set('annotate.actions', []);
+                    
+                    /**
+                    * Fire the annotate event
+                    */
+                    RGraph.FireCustomEvent(e.target.__object__, 'onannotateend');
+                }
+                
+                canvas.onmouseup = function (e)
+                {
+                    //window.onmouseup(e);
+                }
+
+                //canvas.onmouseout = window.onmouseup;
+
+            /**
+            * The canvas onmousemove function
+            */
+            canvas.onmousemove = function (e)
+            {
+                var e      = RGraph.FixEventObject(e);
+                var obj    = e.target.__object__;
+                var coords = RGraph.getMouseXY(e);
+                var x      = coords[0];
+                var y      = coords[1];
+                var gutter = obj.Get('chart.gutter');
+                var width  = canvas.width;
+                var height = canvas.height;
+
+                obj.context.lineWidth = 1;
+
+                // Don't allow annotating in the gutter
+                //
+                // CHANGED 20TH DECEMBER 2010 TO ALLOW ANNOTATING IN THE GUTTER
+                if (true) {
+                
+                    canvas.style.cursor = 'crosshair';
+                
+                    if (obj.Get('chart.mousedown')) {
+                           
+                       // Special case for HBars and Gantts with their extra wide left gutter
+                       if ( (obj.type != 'hbar' && obj.type != 'gantt') || x > (3 * gutter)) {
+
+                           /**
+                           * This is here to stop annotating in the gutter
+                           */
+                            if (RGraph.Registry.Get('started.annotating') == false) {
+                                context.moveTo(x, y);
+                                RGraph.Registry.Set('started.annotating', true)
+                            }
+
+                            context.lineTo(x, y);
+
+                            RGraph.Registry.Set('annotate.actions', RGraph.Registry.Get('annotate.actions') + '|' + x + ',' + y);
+
+                            context.stroke();
+
+                            /**
+                            * Fire the annotate event
+                            */
+                            RGraph.FireCustomEvent(obj, 'onannotate');
+                        }
+                    }
+
+                } else {
+                    canvas.style.cursor = 'default';
+                }
+            }
+
+            RGraph.ReplayAnnotations(obj);
+        }
+    }
+
+
+    /**
+    * Shows the mini palette used for annotations
+    * 
+    * @param object e The event object
+    */
+    RGraph.Showpalette = function (e)
+    {
+        var isSafari = navigator.userAgent.indexOf('Safari') ? true : false;
+
+        e = RGraph.FixEventObject(e);
+
+        var canvas  = e.target.parentNode.__canvas__;
+        var context = canvas.getContext('2d');
+        var obj     = canvas.__object__;
+        var div     = document.createElement('DIV');
+        var coords  = RGraph.getMouseXY(e);
+        
+        div.__object__               = obj; // The graph object
+        div.className                = 'RGraph_palette';
+        div.style.position           = 'absolute';
+        div.style.backgroundColor    = 'white';
+        div.style.border             = '1px solid black';
+        div.style.left               = 0;
+        div.style.top                = 0;
+        div.style.padding            = '3px';
+        div.style.paddingBottom      = 0;
+        div.style.paddingRight       = 0;
+        div.style.opacity            = 0;
+        div.style.boxShadow          = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        div.style.WebkitBoxShadow    = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        div.style.MozBoxShadow       = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        div.style.filter             = 'progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135)';
+        
+        var common_css       = 'padding: 1px; display: inline; display: inline-block; width: 15px; height: 15px; margin-right: 3px; cursor: pointer;' + (isSafari ? 'margin-bottom: 3px' : '');
+        var common_mouseover = ' onmouseover="this.style.border = \'1px black solid\'; this.style.padding = 0"';
+        var common_mouseout  = ' onmouseout="this.style.border = 0; this.style.padding = \'1px\'" ';
+
+        var str = '';
+
+        var colors = ['red', 'blue', 'green', 'black', 'yellow', 'magenta', 'pink', 'cyan', 'purple', '#ddf', 'gray', '#36905c'];
+
+        for (i=0; i ';
+            
+            // This makes the colours go across two levels
+            if (i == 5) {
+                str += '
';
+            }
+        }
+
+        div.innerHTML = str;
+        document.body.appendChild(div);
+        
+        /**
+        * Now the div has been added to the document, move it up and left and set the width and height
+        */
+        div.style.width  = (div.offsetWidth - (RGraph.isIE9up() ? 12 : 5)) + 'px';
+        div.style.height = (div.offsetHeight - (RGraph.isIE9up() ? 13 : 5)) + 'px';
+        div.style.left   = Math.max(0, e.pageX - div.offsetWidth - 2) + 'px';
+        div.style.top    = (e.pageY - div.offsetHeight - 2) + 'px';
+
+        /**
+        * Store the palette div in the registry
+        */
+        RGraph.Registry.Set('palette', div);
+        
+        setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.2", 50);
+        setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.4", 100);
+        setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.6", 150);
+        setTimeout("RGraph.Registry.Get('palette').style.opacity = 0.8", 200);
+        setTimeout("RGraph.Registry.Get('palette').style.opacity = 1", 250);
+
+        RGraph.HideContext();
+
+        window.onclick = function ()
+        {
+            RGraph.HidePalette();
+        }
+
+        // Should this be here? Yes. This function is being used as an event handler.
+        e.stopPropagation();
+        return false;
+    }
+    
+    
+    /**
+    * Clears any annotation data from global storage
+    * 
+    * @param string id The ID of the canvas
+    */
+    RGraph.ClearAnnotations = function (id)
+    {
+        if (window.localStorage && window.localStorage['__rgraph_annotations_' + id + '__'] && window.localStorage['__rgraph_annotations_' + id + '__'].length) {
+            window.localStorage['__rgraph_annotations_' + id + '__'] = [];
+        }
+    }
+
+
+    /**
+    * Replays stored annotations
+    * 
+    * @param object obj The graph object
+    */
+    RGraph.ReplayAnnotations = function (obj)
+    {
+        // Check for support
+        if (!window.localStorage) {
+            return;
+        }
+
+        var context     = obj.context;
+        var annotations = window.localStorage['__rgraph_annotations_' + obj.id + '__'];
+        var i, len, move, coords;
+
+        context.beginPath();
+        context.lineWidth = 2;
+
+        if (annotations && annotations.length) {
+            annotations = annotations.split('|');
+        } else {
+            return;
+        }
+
+        for (i=0, len=annotations.length; i document.body.offsetWidth) {
+            x -= div.offsetWidth;
+        }
+        
+        // Reposition the menu (now we have the real offsetWidth)
+        div.style.left = x + 'px';
+        div.style.top = y + 'px';
+
+        /**
+        * Do a little fade in effect
+        */
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.2", 50);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.4", 100);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.6", 150);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.8", 200);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 1", 250);
+
+        // The fade in effect on the left gray bar
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.2", 50);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.4", 100);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.6", 150);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.8", 200);
+        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 1", 250);
+
+        // Store the context menu in the registry
+        RGraph.Registry.Set('chart.contextmenu', div);
+        RGraph.Registry.Set('chart.contextmenu.bg', bg);
+        RGraph.Registry.Get('chart.contextmenu').oncontextmenu = function () {return false;};
+        RGraph.Registry.Get('chart.contextmenu.bg').oncontextmenu = function () {return false;};
+
+        /**
+        * Install the event handlers that hide the context menu
+        */
+        canvas.addEventListener('click', function () {RGraph.HideContext();}, false);
+
+        window.onclick = function (e)
+        {
+            RGraph.HideContext();
+            
+            // Removed on 3/7/10 - stops a bug in conjunction with annotating which presents itself on the Rscatter
+            //RGraph.Redraw();
+            
+            // Fire the onclick event again
+            if (e.target.onclick && e.button == 0) {
+                e.target.onclick(e);
+            }
+        }
+
+        window.onresize = function () {RGraph.HideContext();}
+
+        e.stopPropagation();
+
+        /**
+        * Fire the (RGraph) oncontextmenu event
+        */
+        RGraph.FireCustomEvent(canvas.__object__, 'oncontextmenu');
+
+        return false;
+    }
+
+
+    /**
+    * Hides the context menu if it's currently visible
+    */
+    RGraph.HideContext = function ()
+    {
+        var cm   = RGraph.Registry.Get('chart.contextmenu');
+        var cmbg = RGraph.Registry.Get('chart.contextmenu.bg');
+        
+        //Hide any submenu currently being displayed
+        RGraph.HideContextSubmenu();
+
+        if (cm) {
+            cm.parentNode.removeChild(cm);
+            cmbg.parentNode.removeChild(cmbg);
+
+            cm.style.visibility = 'hidden';
+            cm.style.display = 'none';
+            RGraph.Registry.Set('chart.contextmenu', null);
+            
+            cmbg.style.visibility = 'hidden';
+            cmbg.style.display = 'none';
+            RGraph.Registry.Set('chart.contextmenu.bg', null);
+        }
+    }
+
+
+    /**
+    * Hides the context menus SUBMENU if it's currently visible
+    */
+    RGraph.HideContextSubmenu = function ()
+    {
+        var sub  = RGraph.Registry.Get('chart.contextmenu.submenu');
+
+        if (sub) {
+            sub.style.visibility = 'none';
+            sub.style.display    = 'none';
+            RGraph.Registry.Set('chart.contextmenu.submenu', null);
+        }
+    }
+
+
+    /**
+    * Shows the context menu after making a few checks - not opera (doesn't support oncontextmenu,
+    * not safari (tempermentality), not chrome (hmmm)
+    */
+    RGraph.ShowContext = function (obj)
+    {
+        RGraph.HidePalette();
+
+        if (obj.Get('chart.contextmenu') && obj.Get('chart.contextmenu').length) {
+
+            var isOpera      = navigator.userAgent.indexOf('Opera') >= 0;
+            var isSafari     = navigator.userAgent.indexOf('Safari') >= 0;
+            var isChrome     = navigator.userAgent.indexOf('Chrome') >= 0;
+            var isMacFirefox = navigator.userAgent.indexOf('Firefox') > 0 && navigator.userAgent.indexOf('Mac') > 0;
+            var isIE9        = navigator.userAgent.indexOf('MSIE 9') >= 0;
+
+            if (((!isOpera && !isSafari) || isChrome) && !isMacFirefox && !isIE9) {
+
+                obj.canvas.oncontextmenu = function (e)
+                {
+                     e = RGraph.FixEventObject(e);
+
+                    if (e.ctrlKey) return true;
+
+                    RGraph.Contextmenu(obj.canvas, obj.Get('chart.contextmenu'), e);
+
+                    return false;
+                }
+
+            // Accomodate Opera, IE9 and Safari - use double click event
+            } else {
+
+                obj.canvas.addEventListener('dblclick', function (e)
+                {
+                    if (e.ctrlKey) return true;
+
+                    if (!RGraph.Registry.Get('chart.contextmenu')) {
+                        RGraph.Contextmenu(obj.canvas, obj.Get('chart.contextmenu'), e);
+                    }
+                }, false);
+            }
+        }
+    }
+
+
+    /**
+    * This draws a submenu should it be necessary
+    * 
+    * @param object obj  The graph object
+    * @param object menu The context menu
+    */
+    RGraph.Contextmenu_submenu = function (obj, menuitems, parentMenuItem)
+    {
+        RGraph.HideContextSubmenu();
+
+        var canvas  = obj.canvas;
+        var context = obj.context;
+        var menu    = parentMenuItem.parentNode;
+
+        var subMenu = document.createElement('DIV');
+        subMenu.style.position = 'absolute';
+        subMenu.style.width = '100px';
+        subMenu.style.top = menu.offsetTop + parentMenuItem.offsetTop + 'px';
+        subMenu.style.left            = (menu.offsetLeft + menu.offsetWidth - (document.all ? 9 : 0)) + 'px';
+        subMenu.style.backgroundColor = 'white';
+        subMenu.style.border          = '1px solid black';
+        subMenu.className             = 'RGraph_contextmenu';
+        subMenu.__contextmenu__       = menu;
+        subMenu.style.boxShadow       = '3px 3px 3px rgba(96,96,96,0.5)';
+        subMenu.style.MozBoxShadow    = '3px 3px 3px rgba(96,96,96,0.5)';
+        subMenu.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
+        subMenu.style.filter          = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)';
+        document.body.appendChild(subMenu);
+        
+        for (var i=0; iURL:';
+        div.innerHTML += '
A link using the URL: View
'
+
+        
+        
+        /**
+        * Create the image rendition of the graph
+        */
+        var img = document.createElement('IMG');
+        RGraph.Registry.Set('chart.png', img);
+        img.__canvas__ = canvas;
+        img.__object__ = obj;
+        img.id = '__rgraph_image_img__';
+        img.className = 'RGraph_png';
+
+        img.src = canvas.toDataURL();
+
+        div.appendChild(img);
+        
+        setTimeout(function () {document.getElementById("__rgraph_dataurl__").select();}, 50);
+        
+        window.addEventListener('resize', function (e){var img = RGraph.Registry.Get('chart.png');img.style.left = (document.body.clientWidth / 2) - (img.width / 2) + 'px';}, false);
+        
+        bg.onclick = function (e)
+        {
+            var div = document.getElementById("__rgraph_image_div__");
+            var bg = document.getElementById("__rgraph_image_bg__");
+
+            if (div) {
+                div.style.opacity = 0;
+
+                div.parentNode.removeChild(div);
+
+                div.id = '';
+                div.style.display = 'none';
+                div = null;
+            }
+
+            if (bg) {
+                bg.style.opacity = 0;
+
+                bg.id = '';
+                bg.style.display = 'none';
+                bg = null;
+            }
+        }
+        
+        window.addEventListener('resize', function (e) {bg.onclick(e);}, false)
+        
+        /**
+        * This sets the image as a global variable, circumventing repeated calls to document.getElementById()
+        */
+        __rgraph_image_bg__  = bg;
+        __rgraph_image_div__ = div;
+
+
+        setTimeout('__rgraph_image_div__.style.opacity = 0.2', 50);
+        setTimeout('__rgraph_image_div__.style.opacity = 0.4', 100);
+        setTimeout('__rgraph_image_div__.style.opacity = 0.6', 150);
+        setTimeout('__rgraph_image_div__.style.opacity = 0.8', 200);
+        setTimeout('__rgraph_image_div__.style.opacity = 1', 250);
+
+        setTimeout('__rgraph_image_bg__.style.opacity = 0.1', 50);
+        setTimeout('__rgraph_image_bg__.style.opacity = 0.2', 100);
+        setTimeout('__rgraph_image_bg__.style.opacity = 0.3', 150);
+        setTimeout('__rgraph_image_bg__.style.opacity = 0.4', 200);
+        setTimeout('__rgraph_image_bg__.style.opacity = 0.5', 250);
+
+
+        
+        img.onclick = function (e)
+        {
+            if (e.stopPropagation) e.stopPropagation();
+            else event.cancelBubble = true;
+        }
+        
+        if (event && event.stopPropagation) {
+            event.stopPropagation();
+        }
+    }
\ No newline at end of file
diff --git a/libraries/RGraph.common.core.js b/libraries/RGraph.common.core.js
new file mode 100644
index 0000000..71ca938
--- /dev/null
+++ b/libraries/RGraph.common.core.js
@@ -0,0 +1,2454 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    /**
+    * Initialise the various objects
+    */
+    if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
+
+
+    RGraph.Registry       = {};
+    RGraph.Registry.store = [];
+    RGraph.Registry.store['chart.event.handlers'] = [];
+    RGraph.background     = {};
+    RGraph.objects        = [];
+    RGraph.Resizing       = {};
+    RGraph.events         = [];
+    
+
+
+    /**
+    * Returns five values which are used as a nice scale
+    * 
+    * @param  max int    The maximum value of the graph
+    * @param  obj object The graph object
+    * @return     array   An appropriate scale
+    */
+    RGraph.getScale = function (max, obj)
+    {
+        /**
+        * Special case for 0
+        */
+        if (max == 0) {
+            return ['0.2', '0.4', '0.6', '0.8', '1.0'];
+        }
+
+        var original_max = max;
+
+        /**
+        * Manually do decimals
+        */
+        if (max <= 1) {
+            if (max > 0.5) {
+                return [0.2,0.4,0.6,0.8, Number(1).toFixed(1)];
+
+            } else if (max >= 0.1) {
+                return obj.Get('chart.scale.round') ? [0.2,0.4,0.6,0.8,1] : [0.1,0.2,0.3,0.4,0.5];
+
+            } else {
+
+                var tmp = max;
+                var exp = 0;
+
+                while (tmp < 1.01) {
+                    exp += 1;
+                    tmp *= 10;
+                }
+
+                var ret = ['2e-' + exp, '4e-' + exp, '6e-' + exp, '8e-' + exp, '10e-' + exp];
+
+
+                if (max <= ('5e-' + exp)) {
+                    ret = ['1e-' + exp, '2e-' + exp, '3e-' + exp, '4e-' + exp, '5e-' + exp];
+                }
+
+                return ret;
+            }
+        }
+
+        // Take off any decimals
+        if (String(max).indexOf('.') > 0) {
+            max = String(max).replace(/\.\d+$/, '');
+        }
+
+        var interval = Math.pow(10, Number(String(Number(max)).length - 1));
+        var topValue = interval;
+
+        while (topValue < max) {
+            topValue += (interval / 2);
+        }
+
+        // Handles cases where the max is (for example) 50.5
+        if (Number(original_max) > Number(topValue)) {
+            topValue += (interval / 2);
+        }
+
+        // Custom if the max is greater than 5 and less than 10
+        if (max < 10) {
+            topValue = (Number(original_max) <= 5 ? 5 : 10);
+        }
+        
+        /**
+        * Added 02/11/2010 to create "nicer" scales
+        */
+        if (obj && typeof(obj.Get('chart.scale.round')) == 'boolean' && obj.Get('chart.scale.round')) {
+            topValue = 10 * interval;
+        }
+
+        return [topValue * 0.2, topValue * 0.4, topValue * 0.6, topValue * 0.8, topValue];
+    }
+
+
+    /**
+    * Returns the maximum value which is in an array
+    * 
+    * @param  array arr The array
+    * @param  int       Whether to ignore signs (ie negative/positive)
+    * @return int       The maximum value in the array
+    */
+    RGraph.array_max = function (arr)
+    {
+        var max = null;
+        
+        for (var i=0; i ' + RGraph.pr(obj[i], true, indent + '    ') + '\n';
+                }
+                
+                var str = str + indent + ')';
+                break;
+            
+            case 'function':
+                str += obj;
+                break;
+            
+            case 'boolean':
+                str += 'Boolean: ' + (obj ? 'true' : 'false');
+                break;
+        }
+
+        /**
+        * Finished, now either return if we're in a recursed call, or alert()
+        * if we're not.
+        */
+        if (arguments[1]) {
+            return str;
+        } else {
+            alert(str);
+        }
+    }
+
+
+    /**
+    * The RGraph registry Set() function
+    * 
+    * @param  string name  The name of the key
+    * @param  mixed  value The value to set
+    * @return mixed        Returns the same value as you pass it
+    */
+    RGraph.Registry.Set = function (name, value)
+    {
+        // Store the setting
+        RGraph.Registry.store[name] = value;
+        
+        // Don't really need to do this, but ho-hum
+        return value;
+    }
+
+
+    /**
+    * The RGraph registry Get() function
+    * 
+    * @param  string name The name of the particular setting to fetch
+    * @return mixed       The value if exists, null otherwise
+    */
+    RGraph.Registry.Get = function (name)
+    {
+        //return RGraph.Registry.store[name] == null ? null : RGraph.Registry.store[name];
+        return RGraph.Registry.store[name];
+    }
+
+
+    /**
+    * This function draws the background for the bar chart, line chart and scatter chart.
+    * 
+    * @param  object obj The graph object
+    */
+    RGraph.background.Draw = function (obj)
+    {
+        var canvas  = obj.canvas;
+        var context = obj.context;
+        var height  = 0;
+        var gutter  = obj.Get('chart.gutter');
+        var variant = obj.Get('chart.variant');
+        
+        context.fillStyle = obj.Get('chart.text.color');
+        
+        // If it's a bar and 3D variant, translate
+        if (variant == '3d') {
+            context.save();
+            context.translate(10, -5);
+        }
+
+        // X axis title
+        if (typeof(obj.Get('chart.title.xaxis')) == 'string' && obj.Get('chart.title.xaxis').length) {
+        
+            var size = obj.Get('chart.text.size');
+            var font = obj.Get('chart.text.font');
+        
+            context.beginPath();
+            RGraph.Text(context, font, size + 2, obj.canvas.width / 2, canvas.height - (gutter * obj.Get('chart.title.xaxis.pos')), obj.Get('chart.title.xaxis'), 'center', 'center', false, false, false, true);
+            context.fill();
+        }
+
+        // Y axis title
+        if (typeof(obj.Get('chart.title.yaxis')) == 'string' && obj.Get('chart.title.yaxis').length) {
+        
+            var size = obj.Get('chart.text.size');
+            var font = obj.Get('chart.text.font');
+        
+            context.beginPath();
+            RGraph.Text(context, font, size + 2, gutter * obj.Get('chart.title.yaxis.pos'), canvas.height / 2, obj.Get('chart.title.yaxis'), 'center', 'center', false, 270, false, true);
+            context.fill();
+        }
+
+        obj.context.beginPath();
+
+        // Draw the horizontal bars
+        context.fillStyle = obj.Get('chart.background.barcolor1');
+        height = (obj.canvas.height - obj.Get('chart.gutter'));
+
+        for (var i=gutter; i < height ; i+=80) {
+            obj.context.fillRect(gutter, i, obj.canvas.width - (gutter * 2), Math.min(40, obj.canvas.height - gutter - i) );
+        }
+
+        context.fillStyle = obj.Get('chart.background.barcolor2');
+        height = (obj.canvas.height - gutter);
+
+        for (var i= (40 + gutter); i < height; i+=80) {
+            obj.context.fillRect(gutter, i, obj.canvas.width - (gutter * 2), i + 40 > (obj.canvas.height - gutter) ? obj.canvas.height - (gutter + i) : 40);
+        }
+        
+        context.stroke();
+
+
+        // Draw the background grid
+        if (obj.Get('chart.background.grid')) {
+        
+            // If autofit is specified, use the .numhlines and .numvlines along with the width to work
+            // out the hsize and vsize
+            if (obj.Get('chart.background.grid.autofit')) {
+                var vsize = (canvas.width - (2 * obj.Get('chart.gutter')) - (obj.type == 'gantt' ? 2 * obj.Get('chart.gutter') : 0)) / obj.Get('chart.background.grid.autofit.numvlines');
+                var hsize = (canvas.height - (2 * obj.Get('chart.gutter'))) / obj.Get('chart.background.grid.autofit.numhlines');
+                
+                obj.Set('chart.background.grid.vsize', vsize);
+                obj.Set('chart.background.grid.hsize', hsize);
+            }
+
+            context.beginPath();
+            context.lineWidth = obj.Get('chart.background.grid.width') ? obj.Get('chart.background.grid.width') : 1;
+            context.strokeStyle = obj.Get('chart.background.grid.color');
+
+            // Draw the horizontal lines
+            if (obj.Get('chart.background.grid.hlines')) {
+                height = (canvas.height - gutter)
+                for (y=gutter; y < height; y+=obj.Get('chart.background.grid.hsize')) {
+                    context.moveTo(gutter, y);
+                    context.lineTo(canvas.width - gutter, y);
+                }
+            }
+
+            if (obj.Get('chart.background.grid.vlines')) {
+                // Draw the vertical lines
+                var width = (canvas.width - gutter)
+                for (x=gutter + (obj.type == 'gantt' ? (2 * gutter) : 0); x<=width; x+=obj.Get('chart.background.grid.vsize')) {
+                    context.moveTo(x, gutter);
+                    context.lineTo(x, obj.canvas.height - gutter);
+                }
+            }
+
+            if (obj.Get('chart.background.grid.border')) {
+                // Make sure a rectangle, the same colour as the grid goes around the graph
+                context.strokeStyle = obj.Get('chart.background.grid.color');
+                context.strokeRect(gutter, gutter, canvas.width - (2 * gutter), canvas.height - (2 * gutter));
+            }
+        }
+        
+        context.stroke();
+
+        // If it's a bar and 3D variant, translate
+        if (variant == '3d') {
+            context.restore();
+        }
+
+        // Draw the title if one is set
+        if ( typeof(obj.Get('chart.title')) == 'string') {
+
+            if (obj.type == 'gantt') {
+                gutter /= 2;
+            }
+
+            RGraph.DrawTitle(canvas, obj.Get('chart.title'), gutter, null, obj.Get('chart.text.size') + 2);
+        }
+
+        context.stroke();
+    }
+
+
+    /**
+    * Returns the day number for a particular date. Eg 1st February would be 32
+    * 
+    * @param   object obj A date object
+    * @return  int        The day number of the given date
+    */
+    RGraph.GetDays = function (obj)
+    {
+        var year  = obj.getFullYear();
+        var days  = obj.getDate();
+        var month = obj.getMonth();
+        
+        if (month == 0) return days;
+        if (month >= 1) days += 31; 
+        if (month >= 2) days += 28;
+
+            // Leap years. Crude, but if this code is still being used
+            // when it stops working, then you have my permission to shoot
+            // me. Oh, you won't be able to - I'll be dead...
+            if (year >= 2008 && year % 4 == 0) days += 1;
+
+        if (month >= 3) days += 31;
+        if (month >= 4) days += 30;
+        if (month >= 5) days += 31;
+        if (month >= 6) days += 30;
+        if (month >= 7) days += 31;
+        if (month >= 8) days += 31;
+        if (month >= 9) days += 30;
+        if (month >= 10) days += 31;
+        if (month >= 11) days += 30;
+        
+        return days;
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+    * Draws the graph key (used by various graphs)
+    * 
+    * @param object obj The graph object
+    * @param array  key An array of the texts to be listed in the key
+    * @param colors An array of the colors to be used
+    */
+    RGraph.DrawKey = function (obj, key, colors)
+    {
+        var canvas  = obj.canvas;
+        var context = obj.context;
+        context.lineWidth = 1;
+
+        context.beginPath();
+
+        /**
+        * Key positioned in the gutter
+        */
+        var keypos   = obj.Get('chart.key.position');
+        var textsize = obj.Get('chart.text.size');
+        var gutter   = obj.Get('chart.gutter');
+        
+        /**
+        * Change the older chart.key.vpos to chart.key.position.y
+        */
+        if (typeof(obj.Get('chart.key.vpos')) == 'number') {
+            obj.Set('chart.key.position.y', obj.Get('chart.key.vpos') * gutter);
+        }
+
+        if (keypos && keypos == 'gutter') {
+    
+            RGraph.DrawKey_gutter(obj, key, colors);
+
+
+        /**
+        * In-graph style key
+        */
+        } else if (keypos && keypos == 'graph') {
+
+            RGraph.DrawKey_graph(obj, key, colors);
+        
+        } else {
+            alert('[COMMON] (' + obj.id + ') Unknown key position: ' + keypos);
+        }
+    }
+
+
+
+
+
+    /**
+    * This does the actual drawing of the key when it's in the graph
+    * 
+    * @param object obj The graph object
+    * @param array  key The key items to draw
+    * @param array colors An aray of colors that the key will use
+    */
+    RGraph.DrawKey_graph = function (obj, key, colors)
+    {
+        var canvas      = obj.canvas;
+        var context     = obj.context;
+        var text_size   = typeof(obj.Get('chart.key.text.size')) == 'number' ? obj.Get('chart.key.text.size') : obj.Get('chart.text.size');
+        var text_font   = obj.Get('chart.text.font');
+        var gutter      = obj.Get('chart.gutter');
+        var hpos        = obj.Get('chart.yaxispos') == 'right' ? gutter + 10 : canvas.width - gutter - 10;
+        var vpos        = gutter + 10;
+        var title       = obj.Get('chart.title');
+        var blob_size   = text_size; // The blob of color
+        var hmargin      = 8; // This is the size of the gaps between the blob of color and the text
+        var vmargin      = 4; // This is the vertical margin of the key
+        var fillstyle   = obj.Get('chart.key.background');
+        var strokestyle = 'black';
+        var height      = 0;
+        var width       = 0;
+
+
+        // Need to set this so that measuring the text works out OK
+        context.font = text_size + 'pt ' + obj.Get('chart.text.font');
+
+        // Work out the longest bit of text
+        for (i=0; i=0; i--) {
+                var j = Number(i) + 1;
+            
+                // Draw the blob of color
+                if (obj.Get('chart.key.color.shape') == 'circle') {
+                    context.beginPath();
+                        context.strokeStyle = 'rgba(0,0,0,0)';
+                        context.fillStyle = colors[i];
+                        context.arc(hpos + 5 + (blob_size / 2), vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2), blob_size / 2, 0, 6.26, 0);
+                    context.fill();
+                
+                } else if (obj.Get('chart.key.color.shape') == 'line') {
+                    context.beginPath();
+                        context.strokeStyle = colors[i];
+                        context.moveTo(hpos + 5, vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2));
+                        context.lineTo(hpos + blob_size + 5, vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2));
+                    context.stroke();
+
+                } else {
+                    context.fillStyle =  colors[i];
+                    context.fillRect(hpos + 5, vpos + (5 * j) + (text_size * j) - text_size, text_size, text_size + 1);
+                }
+
+                context.beginPath();
+            
+                context.fillStyle = 'black';
+            
+                RGraph.Text(context,
+                            text_font,
+                            text_size,
+                            hpos + blob_size + 5 + 5,
+                            vpos + (5 * j) + (text_size * j),
+                            key[i]);
+            }
+        context.fill();
+    }
+
+
+
+
+
+
+    /**
+    * This does the actual drawing of the key when it's in the gutter
+    * 
+    * @param object obj The graph object
+    * @param array  key The key items to draw
+    * @param array colors An aray of colors that the key will use
+    */
+    RGraph.DrawKey_gutter = function (obj, key, colors)
+    {
+        var canvas      = obj.canvas;
+        var context     = obj.context;
+        var text_size   = typeof(obj.Get('chart.key.text.size')) == 'number' ? obj.Get('chart.key.text.size') : obj.Get('chart.text.size');
+        var text_font   = obj.Get('chart.text.font');
+        var gutter      = obj.Get('chart.gutter');
+        var hpos        = canvas.width / 2;
+        var vpos        = (gutter / 2) - 5;
+        var title       = obj.Get('chart.title');
+        var blob_size   = text_size; // The blob of color
+        var hmargin      = 8; // This is the size of the gaps between the blob of color and the text
+        var vmargin      = 4; // This is the vertical margin of the key
+        var fillstyle   = obj.Get('chart.key.background');
+        var strokestyle = 'black';
+        var length      = 0;
+
+
+
+        // Need to work out the length of the key first
+        context.font = text_size + 'pt ' + text_font;
+        for (i=0; i=0; i--) {
+            newarr.push(arr[i]);
+        }
+
+        return newarr;
+    }
+
+
+    /**
+    * Formats a number with thousand seperators so it's easier to read
+    * 
+    * @param  integer num The number to format
+    * @param  string      The (optional) string to prepend to the string
+    * @param  string      The (optional) string to ap
+    * pend to the string
+    * @return string      The formatted number
+    */
+    RGraph.number_format = function (obj, num)
+    {
+        var i;
+        var prepend = arguments[2] ? String(arguments[2]) : '';
+        var append  = arguments[3] ? String(arguments[3]) : '';
+        var output  = '';
+        var decimal = '';
+        var decimal_seperator  = obj.Get('chart.scale.point') ? obj.Get('chart.scale.point') : '.';
+        var thousand_seperator = obj.Get('chart.scale.thousand') ? obj.Get('chart.scale.thousand') : ',';
+        RegExp.$1   = '';
+        var i,j;
+
+        // Ignore the preformatted version of "1e-2"
+        if (String(num).indexOf('e') > 0) {
+            return String(prepend + String(num) + append);
+        }
+
+        // We need then number as a string
+        num = String(num);
+        
+        // Take off the decimal part - we re-append it later
+        if (num.indexOf('.') > 0) {
+            num     = num.replace(/\.(.*)/, '');
+            decimal = RegExp.$1;
+        }
+
+        // Thousand seperator
+        //var seperator = arguments[1] ? String(arguments[1]) : ',';
+        var seperator = thousand_seperator;
+        
+        /**
+        * Work backwards adding the thousand seperators
+        */
+        var foundPoint;
+        for (i=(num.length - 1),j=0; i>=0; j++,i--) {
+            var character = num.charAt(i);
+            
+            if ( j % 3 == 0 && j != 0) {
+                output += seperator;
+            }
+            
+            /**
+            * Build the output
+            */
+            output += character;
+        }
+        
+        /**
+        * Now need to reverse the string
+        */
+        var rev = output;
+        output = '';
+        for (i=(rev.length - 1); i>=0; i--) {
+            output += rev.charAt(i);
+        }
+
+        // Tidy up
+        output = output.replace(/^-,/, '-');
+
+        // Reappend the decimal
+        if (decimal.length) {
+            output =  output + decimal_seperator + decimal;
+            decimal = '';
+            RegExp.$1 = '';
+        }
+
+        // Minor bugette
+        if (output.charAt(0) == '-') {
+            output *= -1;
+            prepend = '-' + prepend;
+        }
+
+        return prepend + output + append;
+    }
+
+
+    /**
+    * Draws horizontal coloured bars on something like the bar, line or scatter
+    */
+    RGraph.DrawBars = function (obj)
+    {
+        var hbars = obj.Get('chart.background.hbars');
+
+        /**
+        * Draws a horizontal bar
+        */
+        obj.context.beginPath();
+        
+        for (i=0; i obj.max) {
+                hbars[i][1] = obj.max - hbars[i][0];
+            }
+
+
+            // If height is negative, and the abs() value is greater than .max, use a negative max instead
+            if (Math.abs(hbars[i][1]) > obj.max) {
+                hbars[i][1] = -1 * obj.max;
+            }
+
+
+            // If start point is greater than max, change it to max
+            if (Math.abs(hbars[i][0]) > obj.max) {
+                hbars[i][0] = obj.max;
+            }
+            
+            // If start point plus height is less than negative max, use the negative max plus the start point
+            if (hbars[i][0] + hbars[i][1] < (-1 * obj.max) ) {
+                hbars[i][1] = -1 * (obj.max + hbars[i][0]);
+            }
+
+            // If the X axis is at the bottom, and a negative max is given, warn the user
+            if (obj.Get('chart.xaxispos') == 'bottom' && (hbars[i][0] < 0 || (hbars[i][1] + hbars[i][1] < 0)) ) {
+                alert('[' + obj.type.toUpperCase() + ' (ID: ' + obj.id + ') BACKGROUND HBARS] You have a negative value in one of your background hbars values, whilst the X axis is in the center');
+            }
+
+            var ystart = (obj.grapharea - ((hbars[i][0] / obj.max) * obj.grapharea));
+            var height = (Math.min(hbars[i][1], obj.max - hbars[i][0]) / obj.max) * obj.grapharea;
+
+            // Account for the X axis being in the center
+            if (obj.Get('chart.xaxispos') == 'center') {
+                ystart /= 2;
+                height /= 2;
+            }
+            
+            ystart += obj.Get('chart.gutter')
+
+            var x = obj.Get('chart.gutter');
+            var y = ystart - height;
+            var w = obj.canvas.width - (2 * obj.Get('chart.gutter'));
+            var h = height;
+            
+            // Accommodate Opera :-/
+            if (navigator.userAgent.indexOf('Opera') != -1 && obj.Get('chart.xaxispos') == 'center' && h < 0) {
+                h *= -1;
+                y = y - h;
+            }
+
+            obj.context.fillStyle = hbars[i][2];
+            obj.context.fillRect(x, y, w, h);
+        }
+
+        obj.context.fill();
+    }
+
+
+    /**
+    * Draws in-graph labels.
+    * 
+    * @param object obj The graph object
+    */
+    RGraph.DrawInGraphLabels = function (obj)
+    {
+        var canvas  = obj.canvas;
+        var context = obj.context;
+        var labels  = obj.Get('chart.labels.ingraph');
+        var labels_processed = [];
+        
+        // Defaults
+        var fgcolor   = 'black';
+        var bgcolor   = 'white';
+        var direction = 1;
+
+        if (!labels) {
+            return;
+        }
+
+        /**
+        * Preprocess the labels array. Numbers are expanded
+        */
+        for (var i=0; i 0) {
+
+            for (var i=0; i 0) {
+                        var x      = (obj.type == 'bar' ? coords[0] + (coords[2] / 2) : coords[0]);
+                        var y      = (obj.type == 'bar' ? coords[1] + (coords[3] / 2) : coords[1]);
+                        var length = typeof(labels_processed[i][4]) == 'number' ? labels_processed[i][4] : 25;
+    
+                        context.beginPath();
+                        context.fillStyle   = 'black';
+                        context.strokeStyle = 'black';
+                        
+    
+                        if (obj.type == 'bar') {
+    
+                            if (obj.Get('chart.variant') == 'dot') {
+                                context.moveTo(x, obj.coords[i][1] - 5);
+                                context.lineTo(x, obj.coords[i][1] - 5 - length);
+                                
+                                var text_x = x;
+                                var text_y = obj.coords[i][1] - 5 - length;
+                            
+                            } else if (obj.Get('chart.variant') == 'arrow') {
+                                context.moveTo(x, obj.coords[i][1] - 5);
+                                context.lineTo(x, obj.coords[i][1] - 5 - length);
+                                
+                                var text_x = x;
+                                var text_y = obj.coords[i][1] - 5 - length;
+                            
+                            } else {
+    
+                                context.arc(x, y, 2.5, 0, 6.28, 0);
+                                context.moveTo(x, y);
+                                context.lineTo(x, y - length);
+
+                                var text_x = x;
+                                var text_y = y - length;
+                            }
+
+                            context.stroke();
+                            context.fill();
+                            
+    
+                        } else if (obj.type == 'line') {
+                        
+                            if (
+                                typeof(labels_processed[i]) == 'object' &&
+                                typeof(labels_processed[i][3]) == 'number' &&
+                                labels_processed[i][3] == -1
+                               ) {
+
+                                context.moveTo(x, y + 5);
+                                context.lineTo(x, y + 5 + length);
+                                
+                                context.stroke();
+                                context.beginPath();                                
+                                
+                                // This draws the arrow
+                                context.moveTo(x, y + 5);
+                                context.lineTo(x - 3, y + 10);
+                                context.lineTo(x + 3, y + 10);
+                                context.closePath();
+                                
+                                var text_x = x;
+                                var text_y = y + 5 + length;
+                            
+                            } else {
+                                
+                                var text_x = x;
+                                var text_y = y - 5 - length;
+
+                                context.moveTo(x, y - 5);
+                                context.lineTo(x, y - 5 - length);
+                                
+                                context.stroke();
+                                context.beginPath();
+                                
+                                // This draws the arrow
+                                context.moveTo(x, y - 5);
+                                context.lineTo(x - 3, y - 10);
+                                context.lineTo(x + 3, y - 10);
+                                context.closePath();
+                            }
+                        
+                            context.fill();
+                        }
+
+    
+                        // Taken out on the 10th Nov 2010 - unnecessary
+                        //var width = context.measureText(labels[i]).width;
+                        
+                        context.beginPath();
+                            
+                            // Fore ground color
+                            context.fillStyle = (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][1]) == 'string') ? labels_processed[i][1] : 'black';
+
+                            RGraph.Text(context,
+                                        obj.Get('chart.text.font'),
+                                        obj.Get('chart.text.size'),
+                                        text_x,
+                                        text_y,
+                                        (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][0]) == 'string') ? labels_processed[i][0] : labels_processed[i],
+                                        'bottom',
+                                        'center',
+                                        true,
+                                        null,
+                                        (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][2]) == 'string') ? labels_processed[i][2] : 'white');
+                        context.fill();
+                    }
+                }
+            }
+        }
+    }
+
+
+    /**
+    * This function "fills in" key missing properties that various implementations lack
+    * 
+    * @param object e The event object
+    */
+    RGraph.FixEventObject = function (e)
+    {
+        if (RGraph.isIE8()) {
+            
+            var e = event;
+
+            e.pageX  = (event.clientX + document.body.scrollLeft);
+            e.pageY  = (event.clientY + document.body.scrollTop);
+            e.target = event.srcElement;
+            
+            if (!document.body.scrollTop && document.documentElement.scrollTop) {
+                e.pageX += parseInt(document.documentElement.scrollLeft);
+                e.pageY += parseInt(document.documentElement.scrollTop);
+            }
+        }
+
+        // This is mainly for FF which doesn't provide offsetX
+        if (typeof(e.offsetX) == 'undefined' && typeof(e.offsetY) == 'undefined') {
+            var coords = RGraph.getMouseXY(e);
+            e.offsetX = coords[0];
+            e.offsetY = coords[1];
+        }
+        
+        // Any browser that doesn't implement stopPropagation() (MSIE)
+        if (!e.stopPropagation) {
+            e.stopPropagation = function () {window.event.cancelBubble = true;}
+        }
+        
+        return e;
+    }
+
+
+    /**
+    * Draw crosshairs if enabled
+    * 
+    * @param object obj The graph object (from which we can get the context and canvas as required)
+    */
+    RGraph.DrawCrosshairs = function (obj)
+    {
+        if (obj.Get('chart.crosshairs')) {
+            var canvas  = obj.canvas;
+            var context = obj.context;
+            
+            // 5th November 2010 - removed now that tooltips are DOM2 based.
+            //if (obj.Get('chart.tooltips') && obj.Get('chart.tooltips').length > 0) {
+                //alert('[' + obj.type.toUpperCase() + '] Sorry - you cannot have crosshairs enabled with tooltips! Turning off crosshairs...');
+                //obj.Set('chart.crosshairs', false);
+                //return;
+            //}
+            
+            canvas.onmousemove = function (e)
+            {
+                var e       = RGraph.FixEventObject(e);
+                var canvas  = obj.canvas;
+                var context = obj.context;
+                var gutter  = obj.Get('chart.gutter');
+                var width   = canvas.width;
+                var height  = canvas.height;
+                var adjustments = obj.Get('chart.tooltips.coords.adjust');
+    
+                var mouseCoords = RGraph.getMouseXY(e);
+                var x = mouseCoords[0];
+                var y = mouseCoords[1];
+                
+                if (typeof(adjustments) == 'object' && adjustments[0] && adjustments[1]) {
+                    x = x - adjustments[0];
+                    y = y - adjustments[1];
+                }
+
+                RGraph.Clear(canvas);
+                obj.Draw();
+
+                if (   x >= gutter
+                    && y >= gutter
+                    && x <= (width - gutter)
+                    && y <= (height - gutter)
+                   ) {
+
+                    var linewidth = obj.Get('chart.crosshairs.linewidth');
+                    context.lineWidth = linewidth ? linewidth : 1;
+
+                    context.beginPath();
+                    context.strokeStyle = obj.Get('chart.crosshairs.color');
+                    
+                    // Draw a top vertical line
+                    context.moveTo(x, gutter);
+                    context.lineTo(x, height - gutter);
+                    
+                    // Draw a horizontal line
+                    context.moveTo(gutter, y);
+                    context.lineTo(width - gutter, y);
+
+                    context.stroke();
+                    
+                    /**
+                    * Need to show the coords?
+                    */
+                    if (obj.Get('chart.crosshairs.coords')) {
+                        if (obj.type == 'scatter') {
+
+                            var xCoord = (((x - obj.Get('chart.gutter')) / (obj.canvas.width - (2 * obj.Get('chart.gutter')))) * (obj.Get('chart.xmax') - obj.Get('chart.xmin'))) + obj.Get('chart.xmin');
+                                xCoord = xCoord.toFixed(obj.Get('chart.scale.decimals'));
+                            var yCoord = obj.max - (((y - obj.Get('chart.gutter')) / (obj.canvas.height - (2 * obj.Get('chart.gutter')))) * obj.max);
+                                
+                                if (obj.type == 'scatter' && obj.Get('chart.xaxispos') == 'center') {
+                                    yCoord = (yCoord - (obj.max / 2)) * 2;
+                                }
+
+                                yCoord = yCoord.toFixed(obj.Get('chart.scale.decimals'));
+                            var div    = RGraph.Registry.Get('chart.coordinates.coords.div');
+                            var mouseCoords = RGraph.getMouseXY(e);
+                            var canvasXY = RGraph.getCanvasXY(canvas);
+                            
+                            if (!div) {
+
+                                div = document.createElement('DIV');
+                                div.__object__     = obj;
+                                div.style.position = 'absolute';
+                                div.style.backgroundColor = 'white';
+                                div.style.border = '1px solid black';
+                                div.style.fontFamily = 'Arial, Verdana, sans-serif';
+                                div.style.fontSize = '10pt'
+                                div.style.padding = '2px';
+                                div.style.opacity = 1;
+                                div.style.WebkitBorderRadius = '3px';
+                                div.style.borderRadius = '3px';
+                                div.style.MozBorderRadius = '3px';
+                                document.body.appendChild(div);
+                                
+                                RGraph.Registry.Set('chart.coordinates.coords.div', div);
+                            }
+                            
+                            // Convert the X/Y pixel coords to correspond to the scale
+                            
+                            div.style.opacity = 1;
+                            div.style.display = 'inline';
+
+                            if (!obj.Get('chart.crosshairs.coords.fixed')) {
+                                div.style.left = Math.max(2, (e.pageX - div.offsetWidth - 3)) + 'px';
+                                div.style.top = Math.max(2, (e.pageY - div.offsetHeight - 3))  + 'px';
+                            } else {
+                                div.style.left = canvasXY[0] + obj.Get('chart.gutter') + 3 + 'px';
+                                div.style.top  = canvasXY[1] + obj.Get('chart.gutter') + 3 + 'px';
+                            }
+
+                            div.innerHTML = '' + obj.Get('chart.crosshairs.coords.labels.x') + ': ' + xCoord + '
' + obj.Get('chart.crosshairs.coords.labels.y') + ': ' + yCoord;
+                            
+                            canvas.addEventListener('mouseout', RGraph.HideCrosshairCoords, false);
+
+                        } else {
+                            alert('[RGRAPH] Showing crosshair coordinates is only supported on the Scatter chart');
+                        }
+                    }
+                } else {
+                    RGraph.HideCrosshairCoords();
+                }
+            }
+        }
+    }
+
+    /**
+    * Thisz function hides the crosshairs coordinates
+    */
+    RGraph.HideCrosshairCoords = function ()
+    {
+        var div = RGraph.Registry.Get('chart.coordinates.coords.div');
+
+        if (   div
+            && div.style.opacity == 1
+            && div.__object__.Get('chart.crosshairs.coords.fadeout')
+           ) {
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.9;}, 50);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.8;}, 100);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.7;}, 150);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.6;}, 200);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.5;}, 250);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.4;}, 300);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.3;}, 350);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.2;}, 400);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.1;}, 450);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0;}, 500);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.display = 'none';}, 550);
+        }
+    }
+
+
+    /**
+    * Trims the right hand side of a string. Removes SPACE, TAB
+    * CR and LF.
+    * 
+    * @param string str The string to trim
+    */
+    RGraph.rtrim = function (str)
+    {
+        return str.replace(/( |\n|\r|\t)+$/, '');
+    }
+
+
+    /**
+    * Draws the3D axes/background
+    */
+    RGraph.Draw3DAxes = function (obj)
+    {
+        var gutter  = obj.Get('chart.gutter');
+        var context = obj.context;
+        var canvas  = obj.canvas;
+
+        context.strokeStyle = '#aaa';
+        context.fillStyle = '#ddd';
+
+        // Draw the vertical left side
+        context.beginPath();
+            context.moveTo(gutter, gutter);
+            context.lineTo(gutter + 10, gutter - 5);
+            context.lineTo(gutter + 10, canvas.height - gutter - 5);
+            context.lineTo(gutter, canvas.height - gutter);
+        context.closePath();
+        
+        context.stroke();
+        context.fill();
+
+        // Draw the bottom floor
+        context.beginPath();
+            context.moveTo(gutter, canvas.height - gutter);
+            context.lineTo(gutter + 10, canvas.height - gutter - 5);
+            context.lineTo(canvas.width - gutter + 10,  canvas.height - gutter - 5);
+            context.lineTo(canvas.width - gutter, canvas.height - gutter);
+        context.closePath();
+        
+        context.stroke();
+        context.fill();
+    }
+
+    /**
+    * Turns off any shadow
+    * 
+    * @param object obj The graph object
+    */
+    RGraph.NoShadow = function (obj)
+    {
+        obj.context.shadowColor   = 'rgba(0,0,0,0)';
+        obj.context.shadowBlur    = 0;
+        obj.context.shadowOffsetX = 0;
+        obj.context.shadowOffsetY = 0;
+    }
+    
+    
+    /**
+    * Sets the four shadow properties - a shortcut function
+    * 
+    * @param object obj     Your graph object
+    * @param string color   The shadow color
+    * @param number offsetx The shadows X offset
+    * @param number offsety The shadows Y offset
+    * @param number blur    The blurring effect applied to the shadow
+    */
+    RGraph.SetShadow = function (obj, color, offsetx, offsety, blur)
+    {
+        obj.context.shadowColor   = color;
+        obj.context.shadowOffsetX = offsetx;
+        obj.context.shadowOffsetY = offsety;
+        obj.context.shadowBlur    = blur;
+    }
+
+
+    /**
+    * This function attempts to "fill in" missing functions from the canvas
+    * context object. Only two at the moment - measureText() nd fillText().
+    * 
+    * @param object context The canvas 2D context
+    */
+    RGraph.OldBrowserCompat = function (context)
+    {
+        if (!context.measureText) {
+        
+            // This emulates the measureText() function
+            context.measureText = function (text)
+            {
+                var textObj = document.createElement('DIV');
+                textObj.innerHTML = text;
+                textObj.style.backgroundColor = 'white';
+                textObj.style.position = 'absolute';
+                textObj.style.top = -100
+                textObj.style.left = 0;
+                document.body.appendChild(textObj);
+
+                var width = {width: textObj.offsetWidth};
+                
+                textObj.style.display = 'none';
+                
+                return width;
+            }
+        }
+
+        if (!context.fillText) {
+            // This emulates the fillText() method
+            context.fillText    = function (text, targetX, targetY)
+            {
+                return false;
+            }
+        }
+        
+        // If IE8, add addEventListener()
+        if (!context.canvas.addEventListener) {
+            window.addEventListener = function (ev, func, bubble)
+            {
+                return this.attachEvent('on' + ev, func);
+            }
+
+            context.canvas.addEventListener = function (ev, func, bubble)
+            {
+                return this.attachEvent('on' + ev, func);
+            }
+        }
+    }
+
+
+    /**
+    * This function is for use with circular graph types, eg the Pie or Radar. Pass it your event object
+    * and it will pass you back the corresponding segment details as an array:
+    * 
+    * [x, y, r, startAngle, endAngle]
+    * 
+    * Angles are measured in degrees, and are measured from the "east" axis (just like the canvas).
+    * 
+    * @param object e   Your event object
+    */
+    RGraph.getSegment = function (e)
+    {
+        RGraph.FixEventObject(e);
+
+        // The optional arg provides a way of allowing some accuracy (pixels)
+        var accuracy = arguments[1] ? arguments[1] : 0;
+
+        var obj         = e.target.__object__;
+        var canvas      = obj.canvas;
+        var context     = obj.context;
+        var mouseCoords = RGraph.getMouseXY(e);
+        var x           = mouseCoords[0] - obj.centerx;
+        var y           = mouseCoords[1] - obj.centery;
+        var r           = obj.radius;
+        var theta       = Math.atan(y / x); // RADIANS
+        var hyp         = y / Math.sin(theta);
+        var angles      = obj.angles;
+        var ret         = [];
+        var hyp         = (hyp < 0) ? hyp + accuracy : hyp - accuracy;
+
+
+        // Put theta in DEGREES
+        theta *= 57.3
+
+        // hyp should not be greater than radius if it's a Rose chart
+        if (obj.type == 'rose') {
+            if (   (isNaN(hyp) && Math.abs(mouseCoords[0]) < (obj.centerx - r) )
+                || (isNaN(hyp) && Math.abs(mouseCoords[0]) > (obj.centerx + r))
+                || (!isNaN(hyp) && Math.abs(hyp) > r)) {
+                return;
+            }
+        }
+
+        /**
+        * Account for the correct quadrant
+        */
+        if (x < 0 && y >= 0) {
+            theta += 180;
+        } else if (x < 0 && y < 0) {
+            theta += 180;
+        } else if (x > 0 && y < 0) {
+            theta += 360;
+        }
+
+        /**
+        * Account for the rose chart
+        */
+        if (obj.type == 'rose') {
+            theta += 90;
+        }
+        
+        if (theta > 360) {
+            theta -= 360;
+        }
+
+        for (var i=0; i= angles[i][0] && theta < angles[i][1]) {
+
+                hyp = Math.abs(hyp);
+
+                if (obj.type == 'rose' && hyp > angles[i][2]) {
+                    return null;
+                }
+
+                if (!hyp || (obj.type == 'pie' && obj.radius && hyp > obj.radius) ) {
+                    return null;
+                }
+
+                if (obj.type == 'pie' && obj.Get('chart.variant') == 'donut' && (hyp > obj.radius || hyp < (obj.radius / 2) ) ) {
+                    return null;
+                }
+
+                ret[0] = obj.centerx;
+                ret[1] = obj.centery;
+                ret[2] = (obj.type == 'rose') ? angles[i][2] : obj.radius;
+                ret[3] = angles[i][0];
+                ret[4] = angles[i][1];
+                ret[5] = i;
+
+                if (obj.type == 'rose') {
+                
+                    ret[3] -= 90;
+                    ret[4] -= 90;
+                
+                    if (x > 0 && y < 0) {
+                        ret[3] += 360;
+                        ret[4] += 360;
+                    }
+                }
+                
+                if (ret[3] < 0) ret[3] += 360;
+                if (ret[4] > 360) ret[4] -= 360;
+
+                return ret;
+            }
+        }
+        
+        return null;
+    }
+
+
+    /**
+    * This is a function that can be used to run code asynchronously, which can
+    * be used to speed up the loading of you pages.
+    * 
+    * @param string func This is the code to run. It can also be a function pointer.
+    *                    The front page graphs show this function in action. Basically
+    *                   each graphs code is made in a function, and that function is
+    *                   passed to this function to run asychronously.
+    */
+    RGraph.Async = function (func)
+    {
+        return setTimeout(func, arguments[1] ? arguments[1] : 1);
+    }
+
+
+    /**
+    * A custom random number function
+    * 
+    * @param number min The minimum that the number should be
+    * @param number max The maximum that the number should be
+    * @param number    How many decimal places there should be. Default for this is 0
+    */
+    RGraph.random = function (min, max)
+    {
+        var dp = arguments[2] ? arguments[2] : 0;
+        var r = Math.random();
+        
+        return Number((((max - min) * r) + min).toFixed(dp));
+    }
+
+
+    /**
+    * Draws a rectangle with curvy corners
+    * 
+    * @param context object The context
+    * @param x       number The X coordinate (top left of the square)
+    * @param y       number The Y coordinate (top left of the square)
+    * @param w       number The width of the rectangle
+    * @param h       number The height of the rectangle
+    * @param         number The radius of the curved corners
+    * @param         boolean Whether the top left corner is curvy
+    * @param         boolean Whether the top right corner is curvy
+    * @param         boolean Whether the bottom right corner is curvy
+    * @param         boolean Whether the bottom left corner is curvy
+    */
+    RGraph.strokedCurvyRect = function (context, x, y, w, h)
+    {
+        // The corner radius
+        var r = arguments[5] ? arguments[5] : 3;
+
+        // The corners
+        var corner_tl = (arguments[6] || arguments[6] == null) ? true : false;
+        var corner_tr = (arguments[7] || arguments[7] == null) ? true : false;
+        var corner_br = (arguments[8] || arguments[8] == null) ? true : false;
+        var corner_bl = (arguments[9] || arguments[9] == null) ? true : false;
+
+        context.beginPath();
+
+            // Top left side
+            context.moveTo(x + (corner_tl ? r : 0), y);
+            context.lineTo(x + w - (corner_tr ? r : 0), y);
+            
+            // Top right corner
+            if (corner_tr) {
+                context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2, false);
+            }
+
+            // Top right side
+            context.lineTo(x + w, y + h - (corner_br ? r : 0) );
+
+            // Bottom right corner
+            if (corner_br) {
+                context.arc(x + w - r, y - r + h, r, Math.PI * 2, Math.PI * 0.5, false);
+            }
+
+            // Bottom right side
+            context.lineTo(x + (corner_bl ? r : 0), y + h);
+
+            // Bottom left corner
+            if (corner_bl) {
+                context.arc(x + r, y - r + h, r, Math.PI * 0.5, Math.PI, false);
+            }
+
+            // Bottom left side
+            context.lineTo(x, y + (corner_tl ? r : 0) );
+
+            // Top left corner
+            if (corner_tl) {
+                context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5, false);
+            }
+
+        context.stroke();
+    }
+
+
+    /**
+    * Draws a filled rectangle with curvy corners
+    * 
+    * @param context object The context
+    * @param x       number The X coordinate (top left of the square)
+    * @param y       number The Y coordinate (top left of the square)
+    * @param w       number The width of the rectangle
+    * @param h       number The height of the rectangle
+    * @param         number The radius of the curved corners
+    * @param         boolean Whether the top left corner is curvy
+    * @param         boolean Whether the top right corner is curvy
+    * @param         boolean Whether the bottom right corner is curvy
+    * @param         boolean Whether the bottom left corner is curvy
+    */
+    RGraph.filledCurvyRect = function (context, x, y, w, h)
+    {
+        // The corner radius
+        var r = arguments[5] ? arguments[5] : 3;
+
+        // The corners
+        var corner_tl = (arguments[6] || arguments[6] == null) ? true : false;
+        var corner_tr = (arguments[7] || arguments[7] == null) ? true : false;
+        var corner_br = (arguments[8] || arguments[8] == null) ? true : false;
+        var corner_bl = (arguments[9] || arguments[9] == null) ? true : false;
+
+        context.beginPath();
+
+            // First draw the corners
+
+            // Top left corner
+            if (corner_tl) {
+                context.moveTo(x + r, y + r);
+                context.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI, false);
+            } else {
+                context.fillRect(x, y, r, r);
+            }
+
+            // Top right corner
+            if (corner_tr) {
+                context.moveTo(x + w - r, y + r);
+                context.arc(x + w - r, y + r, r, 1.5 * Math.PI, 0, false);
+            } else {
+                context.moveTo(x + w - r, y);
+                context.fillRect(x + w - r, y, r, r);
+            }
+
+
+            // Bottom right corner
+            if (corner_br) {
+                context.moveTo(x + w - r, y + h - r);
+                context.arc(x + w - r, y - r + h, r, 0, Math.PI / 2, false);
+            } else {
+                context.moveTo(x + w - r, y + h - r);
+                context.fillRect(x + w - r, y + h - r, r, r);
+            }
+
+            // Bottom left corner
+            if (corner_bl) {
+                context.moveTo(x + r, y + h - r);
+                context.arc(x + r, y - r + h, r, Math.PI / 2, Math.PI, false);
+            } else {
+                context.moveTo(x, y + h - r);
+                context.fillRect(x, y + h - r, r, r);
+            }
+
+            // Now fill it in
+            context.fillRect(x + r, y, w - r - r, h);
+            context.fillRect(x, y + r, r + 1, h - r - r);
+            context.fillRect(x + w - r - 1, y + r, r + 1, h - r - r);
+
+        context.fill();
+    }
+
+
+    /**
+    * A crude timing function
+    * 
+    * @param string label The label to use for the time
+    */
+    RGraph.Timer = function (label)
+    {
+        var d = new Date();
+
+        // This uses the Firebug console
+        console.log(label + ': ' + d.getSeconds() + '.' + d.getMilliseconds());
+    }
+
+
+    /**
+    * Hides the palette if it's visible
+    */
+    RGraph.HidePalette = function ()
+    {
+        var div = RGraph.Registry.Get('palette');
+
+        if (typeof(div) == 'object' && div) {
+            div.style.visibility = 'hidden';
+            div.style.display    = 'none';
+            RGraph.Registry.Set('palette', null);
+        }
+    }
+
+
+    /**
+    * Hides the zoomed canvas
+    */
+    RGraph.HideZoomedCanvas = function ()
+    {
+        if (typeof(__zoomedimage__) == 'object') {
+            obj = __zoomedimage__.obj;
+        } else {
+            return;
+        }
+
+        if (obj.Get('chart.zoom.fade.out')) {
+            for (var i=10,j=1; i>=0; --i, ++j) {
+                if (typeof(__zoomedimage__) == 'object') {
+                    setTimeout("__zoomedimage__.style.opacity = " + String(i / 10), j * 30);
+                }
+            }
+
+            if (typeof(__zoomedbackground__) == 'object') {
+                setTimeout("__zoomedbackground__.style.opacity = " + String(i / 10), j * 30);
+            }
+        }
+
+        if (typeof(__zoomedimage__) == 'object') {
+            setTimeout("__zoomedimage__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? 310 : 0);
+        }
+
+        if (typeof(__zoomedbackground__) == 'object') {
+            setTimeout("__zoomedbackground__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? 310 : 0);
+        }
+    }
+
+
+    /**
+    * Adds an event handler
+    * 
+    * @param object obj   The graph object
+    * @param string event The name of the event, eg ontooltip
+    * @param object func  The callback function
+    */
+    RGraph.AddCustomEventListener = function (obj, name, func)
+    {
+        if (typeof(RGraph.events[obj.id]) == 'undefined') {
+            RGraph.events[obj.id] = [];
+        }
+
+        RGraph.events[obj.id].push([obj, name, func]);
+    }
+
+
+    /**
+    * Used to fire one of the RGraph custom events
+    * 
+    * @param object obj   The graph object that fires the event
+    * @param string event The name of the event to fire
+    */
+    RGraph.FireCustomEvent = function (obj, name)
+    {
+        for (i in RGraph.events) {
+            if (typeof(i) == 'string' && i == obj.id && RGraph.events[i].length > 0) {
+                for(var j=0; j 0;
+    }
+
+
+    /**
+    * Checks the browser for traces of MSIE9
+    */
+    RGraph.isIE9 = function ()
+    {
+        return navigator.userAgent.indexOf('MSIE 9') > 0;
+    }
+
+
+    /**
+    * Checks the browser for traces of MSIE9
+    */
+    RGraph.isIE9up = function ()
+    {
+        navigator.userAgent.match(/MSIE (\d+)/);
+
+        return Number(RegExp.$1) >= 9;
+    }
+
+
+    /**
+    * This clears a canvases event handlers.
+    * 
+    * @param string id The ID of the canvas whose event handlers will be cleared
+    */
+    RGraph.ClearEventListeners = function (id)
+    {
+        for (var i=0; i str.length ? obj.Get('chart.labels')[i] : str);
+            }
+        }
+
+        obj.context.font = obj.Get('chart.text.size') + 'pt ' + obj.Get('chart.text.font');
+
+        len = obj.context.measureText(str).width + 5;
+
+        return (obj.type == 'hbar' ? len / 3 : len);
+    }
+
+
+    /**
+    * A basic Array shift gunction
+    * 
+    * @param  object The numerical array to work on
+    * @return        The new array
+    */
+    RGraph.array_shift = function (arr)
+    {
+        var ret = [];
+        
+        for (var i=1; i (canvas.__original_width__ / 2)) RGraph.Resizing.div.style.width = newWidth + 'px';
+                    if (newHeight > (canvas.__original_height__ / 2)) RGraph.Resizing.div.style.height = newHeight + 'px';
+                }
+            }
+
+            /**
+            * The window onmouseup function
+            */
+            var MouseupFunc = function (e)
+            {
+                if (!RGraph.Resizing || !RGraph.Resizing.div || !RGraph.Resizing.mousedown) {
+                    return;
+                }
+    
+                if (RGraph.Resizing.div) {
+
+                    var div   = RGraph.Resizing.div;
+                    var canvas = div.__canvas__;
+                    var coords = RGraph.getCanvasXY(div.__canvas__);
+
+                    var parentNode = canvas.parentNode;
+
+                    if (canvas.style.position != 'absolute') {
+                        // Create a DIV to go in the canvases place
+                        var placeHolderDIV = document.createElement('DIV');
+                            placeHolderDIV.style.width = RGraph.Resizing.originalw + 'px';
+                            placeHolderDIV.style.height = RGraph.Resizing.originalh + 'px';
+                            //placeHolderDIV.style.backgroundColor = 'red';
+                            placeHolderDIV.style.display = 'inline-block'; // Added 5th Nov 2010
+                            placeHolderDIV.style.position = canvas.style.position;
+                            placeHolderDIV.style.left     = canvas.style.left;
+                            placeHolderDIV.style.top      = canvas.style.top;
+                            placeHolderDIV.style.cssFloat = canvas.style.cssFloat;
+                        parentNode.insertBefore(placeHolderDIV, canvas);
+                    }
+
+
+                    // Now set the canvas to be positioned absolutely
+                    canvas.style.backgroundColor = 'white';
+                    canvas.style.position        = 'absolute';
+                    canvas.style.border          = '1px dashed gray';
+                    canvas.style.left            = (RGraph.Resizing.originalCanvasX  - 1) + 'px';
+                    canvas.style.top             = (RGraph.Resizing.originalCanvasY - 1) + 'px';
+
+                    canvas.width = parseInt(div.style.width);
+                    canvas.height = parseInt(div.style.height);
+                    canvas.__object__.Draw();
+
+                    // Get rid of transparent semi-opaque DIV
+                    RGraph.Resizing.mousedown = false;
+                    div.style.left = '-1000px';
+                    div.style.top = '-1000px';
+                }
+
+                /**
+                * Fire the onresize event
+                */
+                RGraph.FireCustomEvent(canvas.__object__, 'onresize');
+            }
+
+
+            window.onmouseup = MouseupFunc;
+
+
+            canvas.onmousemove = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+                
+                var coords  = RGraph.getMouseXY(e);
+                var canvas  = e.target;
+                var context = canvas.getContext('2d');
+
+                RGraph.Resizing.title = canvas.title;
+                
+                if (   (coords[0] > (canvas.width - resizeHandle)
+                    && coords[0] < canvas.width
+                    && coords[1] > (canvas.height - resizeHandle)
+                    && coords[1] < canvas.height)) {
+    
+                        canvas.title = 'Resize the graph';
+                        canvas.style.cursor = 'move';
+
+                } else if (   coords[0] > (canvas.width - resizeHandle - resizeHandle)
+                           && coords[0] < canvas.width - resizeHandle
+                           && coords[1] > (canvas.height - resizeHandle)
+                           && coords[1] < canvas.height) {
+    
+                    canvas.style.cursor = 'pointer';
+                    canvas.title = 'Reset graph to original size';
+
+                } else {
+    
+                    canvas.style.cursor = 'default';
+                    canvas.title = '';
+                }
+            }
+
+
+            canvas.onmousedown = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+    
+                var coords = RGraph.getMouseXY(e);
+                var canvasCoords = RGraph.getCanvasXY(e.target);
+                
+                if (   coords[0] > (obj.canvas.width - resizeHandle)
+                    && coords[0] < obj.canvas.width
+                    && coords[1] > (obj.canvas.height - resizeHandle)
+                    && coords[1] < obj.canvas.height) {
+
+                    RGraph.Resizing.mousedown = true;
+
+
+                    /**
+                    * Create the semi-opaque DIV
+                    */
+                    var div = document.createElement('DIV');
+                    div.style.position = 'absolute';
+                    div.style.left     = canvasCoords[0] + 'px';
+                    div.style.top      = canvasCoords[1] + 'px';
+                    div.style.width    = canvas.width + 'px';
+                    div.style.height   = canvas.height + 'px';
+                    div.style.border   = '1px dotted black';
+                    div.style.backgroundColor = 'gray';
+                    div.style.opacity  = 0.5;
+                    div.__canvas__ = e.target;
+
+                    document.body.appendChild(div);
+                    RGraph.Resizing.div = div;
+
+                    // This is a repetition of the window.onmouseup function
+                    div.onmouseup = function (e)
+                    {
+                        MouseupFunc(e);
+                    }
+
+                    
+                    RGraph.Resizing.div.onmouseover = function (e)
+                    {
+                        e = RGraph.FixEventObject(e);
+                        e.stopPropagation();
+                    }
+    
+                    // The mouse
+                    RGraph.Resizing.originalx = e.pageX;
+                    RGraph.Resizing.originaly = e.pageY;
+                    
+                    //The canvas
+                    RGraph.Resizing.originalw = obj.canvas.width;
+                    RGraph.Resizing.originalh = obj.canvas.height;
+                    
+                    RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0];
+                    RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1];
+                }
+            }
+
+
+            /**
+            * This function facilitates the reset button
+            */
+            canvas.onclick = function (e)
+            {
+                var coords = RGraph.getMouseXY(e);
+                var canvas = e.target;
+
+                if (   coords[0] > (canvas.width - resizeHandle - resizeHandle)
+                    && coords[0] < canvas.width - resizeHandle
+                    && coords[1] > (canvas.height - resizeHandle)
+                    && coords[1] < canvas.height) {
+
+                    // Restore the original width and height
+                    canvas.width = canvas.__original_width__;
+                    canvas.height = canvas.__original_height__;
+                    
+                    // Lose the border
+                    canvas.style.border = '';
+                    
+                    // Add 1 pixel to the top/left because the border is going
+                    canvas.style.left = (parseInt(canvas.style.left) + 1) + 'px';
+                    canvas.style.top  = (parseInt(canvas.style.top) + 1) + 'px';
+
+                    // Redraw the canvas
+                    canvas.__object__.Draw();
+                    
+                    // Set the width and height on the DIV
+                    RGraph.Resizing.div.style.width  = canvas.__original_width__ + 'px';
+                    RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';
+                    
+                    /**
+                    * Fire the resize event
+                    */
+                    RGraph.FireCustomEvent(canvas.__object__, 'onresize');
+                }
+            }
+        }
+    }
\ No newline at end of file
diff --git a/libraries/RGraph.common.tooltips.js b/libraries/RGraph.common.tooltips.js
new file mode 100644
index 0000000..e636073
--- /dev/null
+++ b/libraries/RGraph.common.tooltips.js
@@ -0,0 +1,502 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
+    
+    /**
+    * This is used in two functions, hence it's here
+    */
+    RGraph.tooltips = {};
+    RGraph.tooltips.padding   = '3px';
+    RGraph.tooltips.font_face = 'Tahoma';
+    RGraph.tooltips.font_size = '10pt';
+
+
+    /**
+    * Shows a tooltip next to the mouse pointer
+    * 
+    * @param canvas object The canvas element object
+    * @param text   string The tooltip text
+    * @param int     x      The X position that the tooltip should appear at. Combined with the canvases offsetLeft
+    *                       gives the absolute X position
+    * @param int     y      The Y position the tooltip should appear at. Combined with the canvases offsetTop
+    *                       gives the absolute Y position
+    * @param int     idx    The index of the tooltip in the graph objects tooltip array
+    */
+    RGraph.Tooltip = function (canvas, text, x, y, idx)
+    {
+        /**
+        * chart.tooltip.override allows you to totally take control of rendering the tooltip yourself
+        */
+        if (typeof(canvas.__object__.Get('chart.tooltips.override')) == 'function') {
+            return canvas.__object__.Get('chart.tooltips.override')(canvas, text, x, y, idx);
+        }
+
+        /**
+        * This facilitates the "id:xxx" format
+        */
+        text = RGraph.getTooltipText(text);
+
+        /**
+        * First clear any exising timers
+        */
+        var timers = RGraph.Registry.Get('chart.tooltip.timers');
+
+        if (timers && timers.length) {
+            for (i=0; i document.body.offsetWidth ? RGraph.Registry.Get('chart.tooltip').offsetWidth : 0);
+                var diffy = y - currenty - RGraph.Registry.Get('chart.tooltip').offsetHeight;
+            
+                // Position the tooltip
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.2)) + 'px"', 25);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.4)) + 'px"', 50);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.6)) + 'px"', 75);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 0.8)) + 'px"', 100);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.left = "' + (currentx + (diffx * 1.0)) + 'px"', 125);
+            
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.2)) + 'px"', 25);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.4)) + 'px"', 50);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.6)) + 'px"', 75);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 0.8)) + 'px"', 100);
+                setTimeout('RGraph.Registry.Get("chart.tooltip").style.top = "' + (currenty + (diffy * 1.0)) + 'px"', 125);
+            
+            } else {
+        
+                alert('[TOOLTIPS] The "snap" effect is only supported on the Line, Rscatter, Scatter and Tradar charts');
+            }
+
+            /**
+            * Fire the tooltip event
+            */
+            RGraph.FireCustomEvent(canvas.__object__, 'ontooltip');
+
+            return;
+        }
+
+        /**
+        * Hide any currently shown tooltip
+        */
+        RGraph.HideTooltip();
+
+
+        /**
+        * Show a tool tip
+        */
+        var tooltipObj  = document.createElement('DIV');
+        tooltipObj.className             = canvas.__object__.Get('chart.tooltips.css.class');
+        tooltipObj.style.display         = 'none';
+        tooltipObj.style.position        = 'absolute';
+        tooltipObj.style.left            = 0;
+        tooltipObj.style.top             = 0;
+        tooltipObj.style.backgroundColor = '#ffe';
+        tooltipObj.style.color           = 'black';
+        if (!document.all) tooltipObj.style.border = '1px solid rgba(0,0,0,0)';
+        tooltipObj.style.visibility      = 'visible';
+        tooltipObj.style.paddingLeft     = RGraph.tooltips.padding;
+        tooltipObj.style.paddingRight    = RGraph.tooltips.padding;
+        tooltipObj.style.fontFamily      = RGraph.tooltips.font_face;
+        tooltipObj.style.fontSize        = RGraph.tooltips.font_size;
+        tooltipObj.style.zIndex          = 3;
+        tooltipObj.style.borderRadius    = '5px';
+        tooltipObj.style.MozBorderRadius    = '5px';
+        tooltipObj.style.WebkitBorderRadius = '5px';
+        tooltipObj.style.WebkitBoxShadow    = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        tooltipObj.style.MozBoxShadow       = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        tooltipObj.style.boxShadow          = 'rgba(96,96,96,0.5) 3px 3px 3px';
+        tooltipObj.style.filter             = 'progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135)';
+        tooltipObj.style.opacity            = 0;
+        tooltipObj.style.overflow           = 'hidden';
+        tooltipObj.innerHTML                = text;
+        tooltipObj.__text__                 = text; // This is set because the innerHTML can change when it's set
+        tooltipObj.__canvas__               = canvas;
+        tooltipObj.style.display            = 'inline';
+        
+        if (typeof(idx) == 'number') {
+            tooltipObj.__index__ = idx;
+        }
+
+        document.body.appendChild(tooltipObj);
+        
+        var width  = tooltipObj.offsetWidth;
+        var height = tooltipObj.offsetHeight - (RGraph.isIE9up() ? 7 : 0);
+
+        if ((y - height - 2) > 0) {
+            y = y - height - 2;
+        } else {
+            y = y + 2;
+        }
+
+        /**
+        * Set the width on the tooltip so it doesn't resize if the window is resized
+        */
+        tooltipObj.style.width = width + 'px';
+        //tooltipObj.style.height = 0; // Initially set the tooltip height to nothing
+
+        /**
+        * If the mouse is towards the right of the browser window and the tooltip would go outside of the window,
+        * move it left
+        */
+        if ( (x + width) > document.body.offsetWidth ) {
+            x             = x - width - 7;
+            var placementLeft = true;
+            
+            if (canvas.__object__.Get('chart.tooltips.effect') == 'none') {
+                x = x - 3;
+            }
+
+            tooltipObj.style.left    = x + 'px';
+            tooltipObj.style.top     = y + 'px';
+
+        } else {
+            x += 5;
+
+            tooltipObj.style.left = x + 'px';
+            tooltipObj.style.top = y + 'px';
+        }
+
+
+        if (effect == 'expand') {
+
+            tooltipObj.style.left        = (x + (width / 2)) + 'px';
+            tooltipObj.style.top         = (y + (height / 2)) + 'px';
+            leftDelta                    = (width / 2) / 10;
+            topDelta                     = (height / 2) / 10;
+
+            tooltipObj.style.width              = 0;
+            tooltipObj.style.height             = 0;
+            tooltipObj.style.boxShadow          = '';
+            tooltipObj.style.MozBoxShadow       = '';
+            tooltipObj.style.WebkitBoxShadow    = '';
+            tooltipObj.style.borderRadius       = 0;
+            tooltipObj.style.MozBorderRadius    = 0;
+            tooltipObj.style.WebkitBorderRadius = 0;
+            tooltipObj.style.opacity = 1;
+
+            // Progressively move the tooltip to where it should be (the x position)
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) - leftDelta) + 'px' }", 250));
+            
+            // Progressively move the tooltip to where it should be (the Y position)
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) - topDelta) + 'px' }", 250));
+
+            // Progressively grow the tooltip width
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.1) + "px'; }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.2) + "px'; }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.3) + "px'; }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.4) + "px'; }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.5) + "px'; }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.6) + "px'; }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.7) + "px'; }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.8) + "px'; }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 0.9) + "px'; }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + width + "px'; }", 250));
+
+            // Progressively grow the tooltip height
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.1) + "px'; }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.2) + "px'; }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.3) + "px'; }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.4) + "px'; }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.5) + "px'; }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.6) + "px'; }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.7) + "px'; }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.8) + "px'; }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 0.9) + "px'; }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + height + "px'; }", 250));
+            
+            // When the animation is finished, set the tooltip HTML
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').innerHTML = RGraph.Registry.Get('chart.tooltip').__text__; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.boxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.MozBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.borderRadius = '5px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.MozBorderRadius = '5px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.WebkitBorderRadius = '5px'; }", 250));
+        
+        } else if (effect == 'contract') {
+
+            tooltipObj.style.left = (x - width) + 'px';
+            tooltipObj.style.top  = (y - (height * 2)) + 'px';
+            tooltipObj.style.cursor = 'pointer';
+
+            leftDelta = width / 10;
+            topDelta  = height / 10;
+
+            tooltipObj.style.width  = (width * 5) + 'px';
+            tooltipObj.style.height = (height * 5) + 'px';
+
+            tooltipObj.style.opacity = 0.2;
+
+            // Progressively move the tooltip to where it should be (the x position)
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.left = (parseInt(RGraph.Registry.Get('chart.tooltip').style.left) + leftDelta) + 'px' }", 250));
+
+            // Progressively move the tooltip to where it should be (the Y position)
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.top = (parseInt(RGraph.Registry.Get('chart.tooltip').style.top) + (topDelta*2)) + 'px' }", 250));
+
+            // Progressively shrink the tooltip width
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 5.5) + "px'; }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 5.0) + "px'; }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 4.5) + "px'; }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 4.0) + "px'; }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 3.5) + "px'; }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 3.0) + "px'; }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 2.5) + "px'; }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 2.0) + "px'; }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + (width * 1.5) + "px'; }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.width = '" + width + "px'; }", 250));
+
+            // Progressively shrink the tooltip height
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 5.5) + "px'; }", 25));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 5.0) + "px'; }", 50));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 4.5) + "px'; }", 75));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 4.0) + "px'; }", 100));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 3.5) + "px'; }", 125));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 3.0) + "px'; }", 150));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 2.5) + "px'; }", 175));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 2.0) + "px'; }", 200));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + (height * 1.5) + "px'; }", 225));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.height = '" + height + "px'; }", 250));
+
+            // When the animation is finished, set the tooltip HTML
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').innerHTML = RGraph.Registry.Get('chart.tooltip').__text__; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.boxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.MozBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.borderRadius = '5px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.MozBorderRadius = '5px'; }", 250));
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.WebkitBorderRadius = '5px'; }", 250));
+
+            /**
+            * This resets the pointer
+            */
+            RGraph.Registry.Get('chart.tooltip.timers').push(setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.cursor = 'default'; }", 275));
+
+
+
+        } else if (effect != 'fade' && effect != 'expand' && effect != 'none' && effect != 'snap' && effect != 'contract') {
+            alert('[COMMON] Unknown tooltip effect: ' + effect);
+        }
+
+        if (effect != 'none') {
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.1; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.2)'; }", 25);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.2; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.2)'; }", 50);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.3; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.2)'; }", 75);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.4; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.2)'; }", 100);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.5; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.2)'; }", 125);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.6; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.2)'; }", 150);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.7; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.4)'; }", 175);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.8; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.6)'; }", 200);
+            setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 0.9; RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgba(96,96,96,0.8)'; }", 225);
+        }
+
+        setTimeout("if (RGraph.Registry.Get('chart.tooltip')) { RGraph.Registry.Get('chart.tooltip').style.opacity = 1;RGraph.Registry.Get('chart.tooltip').style.border = '1px solid rgb(96,96,96)';}", effect == 'none' ? 50 : 250);
+
+        /**
+        * If the tooltip it self is clicked, cancel it
+        */
+        tooltipObj.onmousedown = function (e)
+        {
+            e = RGraph.FixEventObject(e)
+            e.stopPropagation();
+        }
+        
+        tooltipObj.onclick = function (e)
+        {
+            if (e.button == 0) {
+                e = RGraph.FixEventObject(e);
+                e.stopPropagation();
+            }
+        }
+
+        /**
+        * Install the function for hiding the tooltip.
+        */
+        document.body.onmousedown = function (event)
+        {
+            var tooltip = RGraph.Registry.Get('chart.tooltip');
+
+            if (tooltip) {
+                RGraph.HideTooltip();
+                
+                // Redraw if highlighting is enabled
+                if (tooltip.__canvas__.__object__.Get('chart.tooltips.highlight')) {
+                    RGraph.Redraw();
+                }
+            }
+        }
+
+        /**
+        * If the window is resized, hide the tooltip
+        */
+        window.onresize = function ()
+        {
+            var tooltip = RGraph.Registry.Get('chart.tooltip');
+
+            if (tooltip) {
+                tooltip.parentNode.removeChild(tooltip);
+                tooltip.style.display = 'none';                
+                tooltip.style.visibility = 'hidden';
+                RGraph.Registry.Set('chart.tooltip', null);
+
+                // Redraw the graph if necessary
+                if (canvas.__object__.Get('chart.tooltips.highlight')) {
+                    RGraph.Clear(canvas);
+                    canvas.__object__.Draw();
+                }
+            }
+        }
+        
+        /**
+        * Keep a reference to the tooltip
+        */
+        RGraph.Registry.Set('chart.tooltip', tooltipObj);
+
+        /**
+        * Fire the tooltip event
+        */
+        RGraph.FireCustomEvent(canvas.__object__, 'ontooltip');
+    }
+    
+    
+    /**
+    * 
+    */
+    RGraph.getTooltipText = function (text)
+    {
+        var result = /^id:(.*)/.exec(text);
+
+        if (result) {
+            text = document.getElementById(result[1]).innerHTML;
+        }
+        
+        return text;
+    }
+
+
+    /**
+    * 
+    */
+    RGraph.getTooltipWidth = function (text, obj)
+    {
+        var div = document.createElement('DIV');
+            div.className             = obj.Get('chart.tooltips.css.class');
+            div.style.paddingLeft     = RGraph.tooltips.padding;
+            div.style.paddingRight    = RGraph.tooltips.padding;
+            div.style.fontFamily      = RGraph.tooltips.font_face;
+            div.style.fontSize        = RGraph.tooltips.font_size;
+            div.style.visibility      = 'hidden';
+            div.style.position        = 'absolute';
+            div.style.top            = '300px';
+            div.style.left             = 0;
+            div.style.display         = 'inline';
+            div.innerHTML             = RGraph.getTooltipText(text);
+        document.body.appendChild(div);
+
+        return div.offsetWidth;
+    }
+
+
+    /**
+    * Hides the currently shown tooltip
+    */
+    RGraph.HideTooltip = function ()
+    {
+        var tooltip = RGraph.Registry.Get('chart.tooltip');
+
+        if (tooltip) {
+            tooltip.parentNode.removeChild(tooltip);
+            tooltip.style.display = 'none';                
+            tooltip.style.visibility = 'hidden';
+            RGraph.Registry.Set('chart.tooltip', null);
+        }
+    }
\ No newline at end of file
diff --git a/libraries/RGraph.common.zoom.js b/libraries/RGraph.common.zoom.js
new file mode 100644
index 0000000..ee07dd7
--- /dev/null
+++ b/libraries/RGraph.common.zoom.js
@@ -0,0 +1,867 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
+
+
+    /**
+    * Installs the event handlers for zooming an area of the graph
+    * 
+    * @param object obj Your graph object
+    */
+    RGraph.ZoomArea = function (obj)
+    {
+        if (obj.Get('chart.zoom.mode') == 'area') {
+
+            var canvas  = obj.canvas;
+            var context = obj.context;
+            
+            obj.canvas.style.cursor = 'crosshair';
+            
+            RGraph.Register(obj);
+
+
+            canvas.onmousedown = function(e)
+            {
+                var canvas = e.target;
+                var coords = RGraph.getMouseXY(e);
+                var obj    = canvas.__object__;
+                    
+                if (RGraph.Registry.Get('chart.zoomed.area.div')) {
+                    RGraph.Registry.Get('chart.zoomed.area.div').style.display = 'none';
+                }
+
+                if (typeof(RGraph.Registry.Get('chart.zoomed.area.divs')) == null) {
+                    RGraph.Registry.Set('chart.zoomed.area.divs', []);
+
+                } else {
+
+                    var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
+                    
+                    if (divs && divs.length) {
+                        for (var i=0; i= 0 && height >= 0) {
+                    
+                        if (width > 5 && height > 5) {
+                            areaDiv.style.width = (width - 15) + 'px';
+                            areaDiv.style.height = (height - 15) + 'px';
+                            areaDiv.style.display = 'inline';
+                        } else {
+                            areaDiv.style.display = 'none';
+                        }
+
+                    } else if (width < -5 || height < -5) {
+
+                        var canvasCoords = RGraph.getCanvasXY(canvas);
+                        var noticeDiv = document.createElement('DIV');
+
+                        noticeDiv.style.position = 'absolute';
+                        noticeDiv.style.top  = 0;
+                        noticeDiv.style.left = 0;
+                        noticeDiv.style.zIndex = 99;
+                        noticeDiv.style.border = '1px dashed black';
+                        noticeDiv.style.backgroundColor = '#ffc1c1';
+                        noticeDiv.style.MozBoxShadow = '0 0 5px #999';
+                        noticeDiv.style.WebkitBoxShadow = '0 0 5px #999';
+                        noticeDiv.style.boxShadow = '0 0 5px #999';
+                        noticeDiv.style.padding = '2px';
+                        noticeDiv.innerHTML = 'Zoom goes right and down';
+                        document.body.appendChild(noticeDiv);
+
+                        // Reposition the warning
+                        noticeDiv.style.top  = canvasCoords[1] + startCoords[1] - noticeDiv.offsetHeight + 'px';
+                        noticeDiv.style.left = canvasCoords[0] + startCoords[0] - (noticeDiv.offsetWidth / 2) + 'px';
+                        noticeDiv.style.width = noticeDiv.offsetWidth + 'px';
+                        
+                        setTimeout(function () {noticeDiv.style.opacity = 0.8;}, 2100);
+                        setTimeout(function () {noticeDiv.style.opacity = 0.6;}, 2200);
+                        setTimeout(function () {noticeDiv.style.opacity = 0.4;}, 2300);
+                        setTimeout(function () {noticeDiv.style.opacity = 0.2;}, 2400);
+                        setTimeout(function () {noticeDiv.style.display = 'none';}, 2500);
+                        setTimeout(function () {noticeDiv = null;}, 2600);
+                    }
+                }
+            }
+
+
+            canvas.onmouseup = function (e)
+            {
+                RGraph.FixEventObject(e);
+
+                var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
+                var coords      = RGraph.getMouseXY(e);
+
+                // Do the zooming here
+                if (RGraph.Registry.Get('chart.zoomed.area.mousedown')) {
+
+                    //RGraph.Redraw();
+                    
+                    RGraph.Registry.Get('chart.zoomed.area.areadiv').style.display = 'none';
+                    RGraph.Registry.Get('chart.zoomed.area.areadiv').style.left = '-1000px';
+                    RGraph.Registry.Get('chart.zoomed.area.areadiv').style.top = '-1000px';
+                    RGraph.Registry.Set('chart.zoomed.area.areadiv', null);
+
+                    if (coords[0] < startCoords[0] || coords[1] < startCoords[1]) {
+                        RGraph.Registry.Set('chart.zoomed.area.mousedown', false);
+                        return;
+                    }
+
+                    var canvas       = e.target;
+                    var obj          = canvas.__object__;
+                    var context      = obj.context;
+                    var canvasCoords = RGraph.getCanvasXY(e.target);
+                    var coords       = RGraph.getMouseXY(e);
+                    var startCoords  = RGraph.Registry.Get('chart.zoomed.area.mousedown');
+                    var startx       = startCoords[0];
+                    var starty       = startCoords[1];
+                    var endx         = coords[0] - 15;
+                    var endy         = coords[1] - 15;
+                    var width        = Math.abs(endx - startx);
+                    var height       = Math.abs(endy - starty);
+                    var factor       = obj.Get('chart.zoom.factor') - 1;
+                    
+                    var img = document.createElement('IMG');
+                    img.src = canvas.toDataURL();
+                    img.style.position = 'relative';
+                    img.style.left     = (factor + 1) * -1 * startx + 'px';
+                    img.style.top      = (factor + 1) * -1 * starty + 'px';
+                    img.width          = (factor + 1) * canvas.width;
+                    img.height         = (factor + 1) * canvas.height;
+
+                    var div            = document.createElement('DIV');
+                    div.__object__     = obj;
+                    div.className      = 'RGraph_zoomed_area';
+                    div.style.position = 'absolute';
+                    div.style.backgroundColor = 'white';
+                    div.style.cursor = 'move';
+
+                    div.style.top      = e.pageY + 'px';
+                    div.style.left     = e.pageX + 'px';
+                    div.origWidth      = width;
+                    div.origHeight     = height;
+                    div.style.width    = width + 'px';
+                    div.style.height   = height + 'px';
+                    div.style.border   = '1px solid black';                    
+                    div.style.boxShadow          = '0 0 15px black';
+                    div.style.MozBoxShadow       = '0 0 15px black';
+                    div.style.WebkitBoxShadow    = '0 0 15px black';
+                    div.style.overflow           = 'hidden';
+                    div.style.opacity            = 0;
+                    div.style.zIndex             = 99;
+                    
+                    document.body.appendChild(div);
+                    div.appendChild(img);
+
+
+                    /**
+                    * This facilitates expanding the zoomed area once visible (the double click)
+                    */
+                    div.ondblclick = function (event)
+                    {
+                        var event = RGraph.FixEventObject(event);
+                        var img   = event.target;
+                        var div   = event.target.parentNode;
+                        
+                        var current_width  = div.offsetWidth
+                        var current_height = div.offsetHeight
+                        var target_width   = img.offsetWidth;
+                        var target_height  = img.offsetHeight;
+                        var diff_width     = target_width - current_width;
+                        var diff_height    = target_height - current_height;
+                        
+                        var img_offset_left = parseInt(img.offsetLeft);
+                        var img_offset_top  = parseInt(img.offsetTop);
+                        
+                        // Global vars on purpose so the timers can access them
+                        __zoomed_div_style__ = div.style;
+                        __zoomed_img_style__ = img.style;
+                    
+                        setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 50);
+                        setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 100);
+                        setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 150);
+                        setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 200);
+                        setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 250);
+                    
+                        setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 50);
+                        setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 100);
+                        setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 150);
+                        setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 200);
+                        setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 250);
+                    
+                        setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 50);
+                        setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 100);
+                        setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 150);
+                        setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 200);
+                        setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 250);
+                        
+                        setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 50);
+                        setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 100);
+                        setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 150);
+                        setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 200);
+                        setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 250);
+                    
+                        // Move the image within the div
+                        setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.8) + " + 'px'", 50);
+                        setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.6) + " + 'px'", 100);
+                        setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.4) + " + 'px'", 150);
+                        setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.2) + " + 'px'", 200);
+                        setTimeout("__zoomed_img_style__.left = 0", 250);
+                        
+                        setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.8) + " + 'px'", 50);
+                        setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.6) + " + 'px'", 100);
+                        setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.4) + " + 'px'", 150);
+                        setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.2) + " + 'px'", 200);
+                        setTimeout("__zoomed_img_style__.top = 0", 250);
+                        
+                        div.ondblclick = null;
+                    }
+                    /**
+                    * Make the zoomed bit draggable
+                    */
+                    div.onmousedown = function (e)
+                    {
+                        e = RGraph.FixEventObject(e);
+                            
+                        var div = e.target.parentNode;
+                        var img = div.childNodes[0];
+                        
+                        if (e.button == 0 || e.button == 1  ) {
+                        
+                            div.__offsetx__       = e.offsetX + img.offsetLeft;
+                            div.__offsety__       = e.offsetY + img.offsetTop;
+                        
+                            RGraph.Registry.Set('chart.mousedown', div);
+                            RGraph.Registry.Set('chart.button', 0);
+                        
+                        } else {
+                        
+                            img.__startx__ = e.pageX;
+                            img.__starty__ = e.pageY;
+                            
+                            img.__originalx__ = img.offsetLeft;
+                            img.__originaly__ = img.offsetTop;
+
+                            RGraph.Registry.Set('chart.mousedown', img);
+                            RGraph.Registry.Set('chart.button', 2);
+                            
+                            /**
+                            * Don't show a context menu when the zoomed area is right-clicked on
+                            */
+                            window.oncontextmenu = function (e)
+                            {
+                                e = RGraph.FixEventObject(e);
+
+                                e.stopPropagation();
+                                
+                                // [18th July 2010] Is this reallly necessary?
+                                window.oncontextmenu = function (e)
+                                {
+                                    return true;
+                                }
+                            
+
+                                return false;
+                            }
+                        }
+
+                        e.stopPropagation();
+
+                        return false;
+                    }
+                    
+                    window.onmouseup = function (e)
+                    {
+                        RGraph.Registry.Set('chart.mousedown', false);
+                    }
+                    
+                    window.onmousemove = function (e)
+                    {
+                        if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 0) {
+                            
+                            var div = RGraph.Registry.Get('chart.mousedown');
+                    
+                            var x = e.pageX - div.__offsetx__;
+                            var y = e.pageY - div.__offsety__;
+                    
+                            div.style.left = x + 'px';
+                            div.style.top = y + 'px';
+
+                        } else if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 2) {
+                            
+                            var img = RGraph.Registry.Get('chart.mousedown');
+                    
+                            var x = img.__originalx__ + e.pageX - img.__startx__;
+                            var y = img.__originaly__ + e.pageY - img.__starty__;
+                    
+                            img.style.left = x + 'px';
+                            img.style.top  = y + 'px';
+                        }
+                    }
+                    // End dragging code
+
+
+                    var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
+                    if (typeof(divs) == 'object') {
+                        divs.push(div);
+                    } else {
+                        RGraph.Registry.Set('chart.zoomed.area.divs', [div])
+                    }
+                    
+                    // Create the background
+                    var bg = document.createElement('DIV');
+                    bg.style.position        = 'fixed'
+                    bg.style.zIndex          = 98;
+                    bg.style.top             = 0;
+                    bg.style.left            = 0;
+                    bg.style.backgroundColor = '#999';
+                    bg.style.opacity         = 0;
+                    bg.style.width           = (screen.width + 100) + 'px';
+                    bg.style.height          = (screen.height + 100) + 'px';
+                    document.body.appendChild(bg);
+                    
+                    bg.onclick = function (e)
+                    {
+                        div.style.display = 'none';
+                        bg.style.display  = 'none';
+                        div = null;
+                        bg  = null;
+                    }
+                    
+
+                    setTimeout(function (){div.style.opacity = 0.2;}, 50);
+                    setTimeout(function (){div.style.opacity = 0.4;}, 100);
+                    setTimeout(function (){div.style.opacity = 0.6;}, 150);
+                    setTimeout(function (){div.style.opacity = 0.8;}, 200);
+                    setTimeout(function (){div.style.opacity = 1.0;}, 250);
+                    
+                    setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.1) + 'px'}, 50);
+                    setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.2) + 'px'}, 100);
+                    setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.3) + 'px'}, 150);
+                    setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.4) + 'px'}, 200);
+                    setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.5) + 'px'}, 250);
+
+                    setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.1) + 'px'}, 50);
+                    setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.2) + 'px'}, 100);
+                    setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.3) + 'px'}, 150);
+                    setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.4) + 'px'}, 200);
+                    setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.5) + 'px'}, 250);
+
+                    setTimeout(function () {div.style.width = width + (width * factor * 0.2) + 'px'}, 50);
+                    setTimeout(function () {div.style.width = width + (width * factor * 0.4) + 'px'}, 100);
+                    setTimeout(function () {div.style.width = width + (width * factor * 0.6) + 'px'}, 150);
+                    setTimeout(function () {div.style.width = width + (width * factor * 0.8) + 'px'}, 200);
+                    setTimeout(function () {div.style.width = width + (width * factor * 1.0) + 'px'}, 250);
+                    
+                    setTimeout(function () {div.style.height = height + (height * factor * 0.2) + 'px'}, 50);
+                    setTimeout(function () {div.style.height = height + (height * factor * 0.4) + 'px'}, 100);
+                    setTimeout(function () {div.style.height = height + (height * factor * 0.6) + 'px'}, 150);
+                    setTimeout(function () {div.style.height = height + (height * factor * 0.8) + 'px'}, 200);
+                    setTimeout(function () {div.style.height = height + (height * factor * 1.0) + 'px'}, 250);
+
+                    setTimeout(function (){bg.style.opacity = 0.1;}, 50);
+                    setTimeout(function (){bg.style.opacity = 0.2;}, 100);
+                    setTimeout(function (){bg.style.opacity = 0.3;}, 150);
+                    setTimeout(function (){bg.style.opacity = 0.4;}, 200);
+                    setTimeout(function (){bg.style.opacity = 0.5;}, 250);
+
+                    RGraph.Registry.Set('chart.zoomed.area.bg', bg);
+                    RGraph.Registry.Set('chart.zoomed.area.img', img);
+                    RGraph.Registry.Set('chart.zoomed.area.div', div);
+                    RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
+                }
+
+                /**
+                * Fire the zoom event
+                */
+                RGraph.FireCustomEvent(obj, 'onzoom');
+            }
+            
+            canvas.onmouseout = function (e)
+            {
+                RGraph.Registry.Set('chart.zoomed.area.areadiv', null);
+                RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
+                RGraph.Registry.Set('chart.zoomed.area.div', null);
+            }
+        }
+    }
+
+
+    /**
+    * This function sets up the zoom window if requested
+    * 
+    * @param obj object The graph object
+    */
+    RGraph.ShowZoomWindow = function (obj)
+    {
+        var gutter = obj.Get('chart.gutter');
+
+        if (obj.Get('chart.zoom.mode') == 'thumbnail') {
+            RGraph.ZoomWindow(obj.canvas);
+        }
+
+        if (obj.Get('chart.zoom.mode') == 'area') {
+            RGraph.ZoomArea(obj);
+        }
+    }
+
+
+    /**
+    * Installs the evnt handler for the zoom window/THUMBNAIL
+    */
+    RGraph.ZoomWindow = function (canvas)
+    {
+        canvas.onmousemove = function (e)
+        {
+            e = RGraph.FixEventObject(e);
+
+            var obj     = e.target.__object__;
+            var canvas  = obj.canvas;
+            var context = obj.context;
+            var coords  = RGraph.getMouseXY(e);
+            
+            /**
+            * Create the DIV
+            */
+            if (!RGraph.Registry.Get('chart.zoomed.div')) {
+
+                var div = document.createElement('div');
+                div.className    = 'RGraph_zoom_window';
+                div.style.width  = obj.Get('chart.zoom.thumbnail.width') + 'px';
+                div.style.height = obj.Get('chart.zoom.thumbnail.height') + 'px';
+                
+                // Added back in on the 17th December
+                div.style.border = '2px dashed gray';
+
+                div.style.position = 'absolute';
+                div.style.overflow = 'hidden';
+                div.style.backgroundColor = 'white';
+                
+                // Initially the zoomed layer should be off-screen
+                div.style.left = '-1000px';
+                div.style.top = '-1000px';
+
+                // Should these be 0? No.
+                div.style.borderRadius       = '5px';
+                div.style.MozBorderRadius    = '5px';
+                div.style.WebkitBorderRadius = '5px';
+
+                if (obj.Get('chart.zoom.shadow')) {
+                    div.style.boxShadow       = 'rgba(0,0,0,0.5) 3px 3px 3px';
+                    div.style.MozBoxShadow    = 'rgba(0,0,0,0.5) 3px 3px 3px';
+                    div.style.WebkitBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
+                }
+
+                //div.style.opacity = 0.2;
+                div.__object__ = obj;
+                document.body.appendChild(div);
+        
+                /**
+                * Get the canvas as an image
+                */
+                var img = document.createElement('img');
+                img.width  = obj.canvas.width * obj.Get('chart.zoom.factor');
+                img.height = obj.canvas.height * obj.Get('chart.zoom.factor');
+                img.style.position = 'relative';
+                img.style.backgroundColor = 'white';
+                img.__object__ = obj;
+
+                div.appendChild(img);
+
+                RGraph.Registry.Set('chart.zoomed.div', div);
+                RGraph.Registry.Set('chart.zoomed.img', img);
+                
+                // Fade the zoom in
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').__object__.canvas.onmouseover()", 5);
+
+            } else {
+
+                div = RGraph.Registry.Get('chart.zoomed.div');
+                img = RGraph.Registry.Get('chart.zoomed.img');
+            }
+
+            // Make sure the image is up-to-date
+            img.src = canvas.toDataURL();
+            
+            /**
+            * Ensure the div is visible
+            */
+            if (div && div.style.opacity < 1) {
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
+            }
+
+            /**
+            * Get the canvas x/y coords
+            */
+            var c = RGraph.getCanvasXY(obj.canvas);
+            var x = c[0];
+            var y = c[1];
+
+            /**
+            * Position the div and img
+            */
+            var offset = 7;
+
+            div.style.left = (e.pageX - obj.Get('chart.zoom.thumbnail.width') - offset) + 'px';
+            div.style.top = (e.pageY -  obj.Get('chart.zoom.thumbnail.height') - offset) + 'px';
+            
+            var l = (obj.Get('chart.zoom.thumbnail.width') / 2) - (coords[0] * obj.Get('chart.zoom.factor'));
+            var t = (obj.Get('chart.zoom.thumbnail.height') / 2) - (coords[1] * obj.Get('chart.zoom.factor'));
+
+            // More positioning
+            img.style.left = (l + ((obj.Get('chart.zoom.thumbnail.width') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
+            img.style.top = (t + ((obj.Get('chart.zoom.thumbnail.height') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
+            
+            /**
+            * Fire the onzoom event
+            */
+            RGraph.FireCustomEvent(obj, 'onzoom');
+        }
+        
+        /**
+        * The onmouseover event. Evidently. Fades the zoom window in
+        */
+        canvas.onmouseover = function (e)
+        {
+            var div = RGraph.Registry.Get('chart.zoomed.div');
+            
+            // ???
+            if (!div) return;
+
+            var obj = div.__object__;
+
+            // Used for the enlargement animation
+            var targetWidth  = obj.Get('chart.zoom.thumbnail.width');
+            var targetHeight = obj.Get('chart.zoom.thumbnail.height');
+
+            div.style.width  = 0;
+            div.style.height = 0;
+
+            if (obj.Get('chart.zoom.fade.in')) {
+                
+                RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2;
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 100);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 200);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8", 300);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
+
+            } else {
+
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 1);
+            }
+
+            // The enlargement animation frames
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (1/5) ) + "px'", 75);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (2/5) ) + "px'", 150);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (3/5) ) + "px'", 225);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (4/5) ) + "px'", 300);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (5/5) ) + "px'", 325);
+            
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (1/5) ) + "px'", 75);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (2/5) ) + "px'", 150);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (3/5) ) + "px'", 225);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (4/5) ) + "px'", 300);
+            setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (5/5) ) + "px'", 375);
+        }
+        
+        canvas.onmouseout = function (e)
+        {
+            if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
+
+                RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
+
+                // Get rid of the zoom window
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
+            
+            } else {
+                // Get rid of the zoom window
+                if (RGraph.Registry.Get('chart.zoomed.div')) {
+                    setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
+                    setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 41);
+                }            }
+        }
+    }
+
+
+    /**
+    * A zoom in function
+    * 
+    * @param e object The event object
+    */
+    RGraph.Zoom = function (e)
+    {
+        e = RGraph.FixEventObject(e);
+
+        /**
+        * Show the zoom window
+        */
+        //if ((e.target.__canvas__ && e.target.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') || (e.target.parentNode.__canvas__ && e.target.parentNode.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') ) {
+        //    return RGraph.ZoomWindow(e);
+        //}
+
+        var canvas  = e.target.__canvas__;
+        var context = canvas.getContext('2d');
+        var obj     = canvas.__object__;
+        var dataurl = canvas.toDataURL();
+        var tmp     = canvas;
+        var coords = RGraph.getCanvasXY(canvas);
+        var factor = obj.Get('chart.zoom.factor') - 1;
+
+        var x = coords[0];
+        var y = coords[1];
+
+        var img = document.createElement('img');
+        img.className    = 'RGraph_zoomed_canvas';
+        img.style.border = '3px solid gray';
+        img.style.width  = canvas.width + 'px';
+        img.style.height = canvas.height + 'px';
+        img.style.position = 'absolute';
+        img.style.left = x + 'px';
+        img.style.top = y + 'px';
+        img.style.backgroundColor = 'white';
+        img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1;
+        img.style.zIndex = 99;
+        img.src = dataurl;
+        document.body.appendChild(img);
+
+        //RGraph.Registry.Set('chart.zoomedimage', img);
+        // Store the zoomed image in a global var - NOT the registry
+        __zoomedimage__ = img;
+        __zoomedimage__.obj = obj;
+        
+        // Image onclick should not hide the image
+        img.onclick = function (e)
+        {
+            e = RGraph.FixEventObject(e);
+            e.stopPropagation();
+            return false;
+        }
+
+        setTimeout(function () {window.onclick = RGraph.HideZoomedCanvas;}, 1);
+        
+        var width = parseInt(canvas.width);
+        var height = parseInt(canvas.height);
+        var frames = obj.Get('chart.zoom.frames');
+        var delay  = obj.Get('chart.zoom.delay');
+
+        // Increase the width over 10 frames - center
+        if (obj.Get('chart.zoom.hdir') == 'center') {
+
+            for (var i=1; i<=frames; ++i) {
+                var newWidth      = width * factor * (i/frames) + width;
+                var rightHandEdge = x + canvas.width;
+                var newLeft       = (x + (canvas.width / 2)) - (newWidth / 2);
+
+                setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
+            }
+
+        // Left
+        } else if (obj.Get('chart.zoom.hdir') == 'left') {
+            for (var i=1; i<=frames; ++i) {
+                var newWidth      = width * factor * (i/frames) + width;
+                var rightHandEdge = x + canvas.width;
+                var newLeft       = rightHandEdge - newWidth;
+
+                setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
+            }
+            
+        // Right (default)
+        } else {
+            for (var i=1; i<=frames; ++i) {
+                var newWidth      = width * factor * (i/frames) + width;
+                setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'", i * delay);
+            }
+        }
+
+        // Increase the height over 10 frames - up
+        if (obj.Get('chart.zoom.vdir') == 'up') {
+            for (var i=1; i<=frames; ++i) {
+                var newHeight  = (height * factor * (i/frames)) + height;
+                var bottomEdge = y + canvas.height;
+                var newTop       = bottomEdge - newHeight;
+        
+                setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
+            }
+        
+        // center
+        } else if (obj.Get('chart.zoom.vdir') == 'center') {
+            for (var i=1; i<=frames; ++i) {
+                var newHeight  = (height * factor * (i/frames)) + height;
+                var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2);
+                var newTop       = bottomEdge - newHeight;
+
+                setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
+            }
+        
+        // Down (default
+        } else {
+            for (var i=1; i<=frames; ++i) {
+                setTimeout("__zoomedimage__.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay);
+            }
+        }
+
+        // If enabled, increase the opactity over 10 frames
+        if (obj.Get('chart.zoom.fade.in')) {
+            for (var i=1; i<=frames; ++i) {
+                setTimeout("__zoomedimage__.style.opacity = " + String(i / frames), i * delay);
+            }
+        }
+
+        // If stipulated, produce a shadow
+        if (obj.Get('chart.zoom.shadow')) {
+            for (var i=1; i<=frames; ++i) {
+                setTimeout("__zoomedimage__.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
+                setTimeout("__zoomedimage__.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
+                setTimeout("__zoomedimage__.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
+            }
+        }
+
+        /**
+        * The onmouseout event. Hides the zoom window. Fades the zoom out
+        */
+        canvas.onmouseout = function (e)
+        {
+            if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
+
+                RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
+
+                // Get rid of the zoom window
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
+                setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
+            
+            } else {
+
+                // Get rid of the zoom window
+                if (RGraph.Registry.Get('chart.zoomed.div')) {
+                    setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
+                    setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 1);
+                }
+            }
+        }
+
+        // The background
+        if (obj.Get('chart.zoom.background')) {
+            var div = document.createElement('DIV');
+            div.style.backgroundColor = '#999';
+            div.style.opacity         = 0;
+            div.style.position        = 'fixed';
+            div.style.top             = 0;
+            div.style.left            = 0;
+            div.style.width           = (screen.width + 100) + 'px';
+            div.style.height          = (screen.height + 100) + 'px';
+            div.style.zIndex          = 98;
+
+            // Hides the zoomed caboodle
+            div.oncontextmenu = function (e)
+            {
+                return RGraph.HideZoomedCanvas(e);
+            }
+
+            // 30th July 2010 - Is this necessary?
+            //for (var i=1; i<=frames; ++i) {
+            //  setTimeout('__zoomedbackground__.style.opacity = ' + Number(0.04 * i), i * delay);
+            //
+            //    //  MSIE doesn't support zoom
+            //    //setTimeout('__zoomedbackground__.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135); Alpha(opacity=10)"', 50);
+            //}
+            
+            div.origHeight = div.style.height;
+            
+            document.body.appendChild(div);
+
+            __zoomedbackground__ = div;
+            
+            // If the window is resized, hide the zoom
+            //window.onresize = RGraph.HideZoomedCanvas;
+
+            for (var i=1; i<=frames; ++i) {
+                setTimeout("__zoomedbackground__.style.opacity = " + (Number(i / frames) * 0.5), i * delay);
+            }
+        }
+        
+        /**
+        * Fire the onzoom event
+        */
+        RGraph.FireCustomEvent(obj, 'onzoom');
+    }
\ No newline at end of file
diff --git a/libraries/RGraph.funnel.js b/libraries/RGraph.funnel.js
new file mode 100644
index 0000000..fd274c3
--- /dev/null
+++ b/libraries/RGraph.funnel.js
@@ -0,0 +1,603 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+    
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The bar chart constructor
+    * 
+    * @param object canvas The canvas object
+    * @param array  data   The chart data
+    */
+    RGraph.Funnel = function (id, data)
+    {
+        // Get the canvas and context objects
+        this.id                = id;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
+        this.canvas.__object__ = this;
+        this.type              = 'funnel';
+        this.coords            = [];
+        this.isRGraph          = true;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+
+        // Check for support
+        if (!this.canvas) {
+            alert('[FUNNEL] No canvas support');
+            return;
+        }
+        
+        // Check the common library has been included
+        if (typeof(RGraph) == 'undefined') {
+            alert('[FUNNEL] Fatal error: The common library does not appear to have been included');
+        }
+        
+        /**
+        * The funnel charts properties
+        */
+        this.properties = {
+            'chart.strokestyle':           'black',
+            'chart.gutter':                25,
+            'chart.labels':                null,
+            'chart.title':                 '',
+            'chart.title.background':       null,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':            null,
+            'chart.colors':                ['red', 'green', 'gray', 'blue', 'black', 'gray'],
+            'chart.text.size':             10,
+            'chart.text.boxed':            true,
+            'chart.text.halign':           'left',
+            'chart.text.color':            'black',
+            'chart.text.font':             'Verdana',
+            'chart.contextmenu':           null,
+            'chart.shadow':                false,
+            'chart.shadow.color':          '#666',
+            'chart.shadow.blur':           3,
+            'chart.shadow.offsetx':        3,
+            'chart.shadow.offsety':        3,
+
+
+            'chart.key':                    [],
+            'chart.key.background':         'white',
+            'chart.key.position':           'graph',
+            'chart.key.shadow':             false,
+            'chart.key.shadow.color':       '#666',
+            'chart.key.shadow.blur':        3,
+            'chart.key.shadow.offsetx':     2,
+            'chart.key.shadow.offsety':     2,
+            'chart.key.position.gutter.boxed': true,
+            'chart.key.position.x':         null,
+            'chart.key.position.y':         null,
+            'chart.key.color.shape':        'square',
+            'chart.key.rounded':            true,
+
+            'chart.tooltips':              null,
+            'chart.tooltips.effect':        'fade',
+            'chart.tooltips.css.class':     'RGraph_tooltip',
+            'chart.tooltips.highlight':     true,
+            'chart.annotatable':           false,
+            'chart.annotate.color':        'black',
+            'chart.zoom.factor':           1.5,
+            'chart.zoom.fade.in':          true,
+            'chart.zoom.fade.out':         true,
+            'chart.zoom.factor':           1.5,
+            'chart.zoom.fade.in':          true,
+            'chart.zoom.fade.out':         true,
+            'chart.zoom.hdir':             'right',
+            'chart.zoom.vdir':             'down',
+            'chart.zoom.frames':           10,
+            'chart.zoom.delay':            50,
+            'chart.zoom.shadow':           true,
+            'chart.zoom.mode':             'canvas',
+            'chart.zoom.thumbnail.width':  75,
+            'chart.zoom.thumbnail.height': 75,
+            'chart.zoom.background':        true,
+            'chart.zoom.action':            'zoom',
+            'chart.resizable':              false
+        }
+
+        // Store the data
+        this.data = data;
+    }
+
+
+    /**
+    * A setter
+    * 
+    * @param name  string The name of the property to set
+    * @param value mixed  The value of the property
+    */
+    RGraph.Funnel.prototype.Set = function (name, value)
+    {
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+    /**
+    * A getter
+    * 
+    * @param name  string The name of the property to get
+    */
+    RGraph.Funnel.prototype.Get = function (name)
+    {
+        return this.properties[name.toLowerCase()];
+    }
+
+
+    /**
+    * The function you call to draw the bar chart
+    */
+    RGraph.Funnel.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+        /**
+        * Clear all of this canvases event handlers (the ones installed by RGraph)
+        */
+        RGraph.ClearEventListeners(this.id);
+
+        // This stops the coords array from growing
+        this.coords = [];
+
+        RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.Get('chart.gutter'), null, this.Get('chart.text.size') + 2);
+        this.DrawFunnel();
+        
+        
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+        
+        /**
+        * The tooltip handler
+        */
+        if (this.Get('chart.tooltips')) {
+        
+            RGraph.Register(this);
+
+            var canvas_onclick_func = function (e)
+            {
+                RGraph.Redraw();
+
+                var e       = RGraph.FixEventObject(e);
+                var canvas  = e.target;
+                var context = canvas.getContext('2d');
+                var obj     = canvas.__object__;
+
+                var mouseCoords = RGraph.getMouseXY(e);
+                var coords = obj.coords;
+                var x = mouseCoords[0];
+                var y = mouseCoords[1];
+
+                for (i=0; i coords[i][0]
+                        && x < coords[i][2]
+                        && y > coords[i][1]
+                        && y < coords[i][5]
+                       ) {
+                       
+                        /**
+                        * Handle the right corner
+                        */
+                        if (x > coords[i][4]) {
+                            var w1 = coords[i][2] - coords[i][4];
+                            var h1 = coords[i][5] - coords[i][3];;
+                            var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES
+
+                            var w2 = coords[i][2] - mouseCoords[0];
+                            var h2 = mouseCoords[1] - coords[i][1];
+                            var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES
+
+                            if (a2 > a1) {
+                                continue;
+                            }
+                        
+                        /**
+                        * Handle the left corner
+                        */
+                        } else if (x < coords[i][6]) {
+                            var w1 = coords[i][6] - coords[i][0];
+                            var h1 = coords[i][7] - coords[i][1];;
+                            var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES
+
+                            var w2 = mouseCoords[0] - coords[i][0];
+                            var h2 = mouseCoords[1] - coords[i][1];
+                            var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES
+                        
+                            if (a2 > a1) {
+                                continue;
+                            }
+                        }
+
+                        // Is there a tooltip defined?
+                        if (!obj.Get('chart.tooltips')[i] && typeof(obj.Get('chart.tooltips')) != 'function') {
+                            break;
+                        }
+
+                        context.beginPath();
+
+                        RGraph.NoShadow(obj);
+
+                        context.fillStyle = 'rgba(255,255,255,0.5)';
+                        context.moveTo(coords[i][0], coords[i][1]);
+                        context.lineTo(coords[i][2], coords[i][3]);
+                        context.lineTo(coords[i][4], coords[i][5]);
+                        context.lineTo(coords[i][6], coords[i][7]);
+                        context.closePath();
+
+                        context.stroke();
+                        context.fill();
+                    
+                        /**
+                        * Draw the key again for in-graph keys so they don't appear "under" the highlight
+                        */
+                        if (obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') {
+                            RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors'));
+                        }
+                        
+                        /**
+                        * Redraw the labels if necessary
+                        */
+                        if (obj.Get('chart.labels')) {
+                            obj.DrawLabels();
+                        }
+
+                        /**
+                        * Get the tooltip text
+                        */
+                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                            var text = obj.Get('chart.tooltips')(i);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'function') {
+                            var text = obj.Get('chart.tooltips')[i](i);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                            var text = obj.Get('chart.tooltips')[i];
+
+                        } else {
+                            var text = '';
+                        }
+
+                        // Show the tooltip
+                        RGraph.Tooltip(canvas, text, e.pageX, e.pageY, i);
+        
+                        // Stop the event propagating
+                        e.stopPropagation();
+                        
+                        break;
+                    }
+                }
+            }
+            this.canvas.addEventListener('click', canvas_onclick_func, false);
+            RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
+            
+            /**
+            * Onmousemove event handler
+            */
+            var canvas_onmousemove_func = function (e)
+            {
+                var e = RGraph.FixEventObject(e);
+
+                var canvas = e.target;
+                var context = canvas.getContext('2d');
+                var obj     = canvas.__object__;
+                var overFunnel = false;
+                var coords = obj.coords;
+
+                var mouseCoords = RGraph.getMouseXY(e);
+                var x = mouseCoords[0];
+                var y = mouseCoords[1];
+
+                for (i=0; i coords[i][0]
+                        && x < coords[i][2]
+                        && y > coords[i][1]
+                        && y < coords[i][5]
+                       ) {
+                       
+                        /**
+                        * Handle the right corner
+                        */
+                        if (x > coords[i][4]) {
+                            var w1 = coords[i][2] - coords[i][4];
+                            var h1 = coords[i][5] - coords[i][3];;
+                            var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES
+
+                            var w2 = coords[i][2] - mouseCoords[0];
+                            var h2 = mouseCoords[1] - coords[i][1];
+                            var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES
+
+                            if (a2 > a1) {
+                                continue;
+                            }
+                        
+                        /**
+                        * Handle the left corner
+                        */
+                        } else if (x < coords[i][6]) {
+                            var w1 = coords[i][6] - coords[i][0];
+                            var h1 = coords[i][7] - coords[i][1];;
+                            var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES
+
+                            var w2 = mouseCoords[0] - coords[i][0];
+                            var h2 = mouseCoords[1] - coords[i][1];
+                            var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES
+                        
+                            if (a2 > a1) {
+                                continue;
+                            }
+                        }
+                        
+                        // Is there a tooltip defined?
+                        if (!obj.Get('chart.tooltips')[i] && typeof(obj.Get('chart.tooltips')) != 'function') {
+                            break;
+                        }
+
+                        overFunnel = true;
+                        canvas.style.cursor = 'pointer';
+        
+                        // Stop the event propagating
+                        e.stopPropagation();
+                        
+                        break;
+                    }
+                }
+                
+                if (!overFunnel) {
+                    canvas.style.cursor = 'default';
+                    canvas.style.cursor = 'default';
+                }
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+
+
+        /**
+        * Draw the labels on the chart
+        */
+        this.DrawLabels();
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail'|| this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+
+    /**
+    * This function actually draws the chart
+    */
+    RGraph.Funnel.prototype.DrawFunnel = function ()
+    {
+        var context   = this.context;
+        var canvas    = this.canvas;
+        var width     = this.canvas.width - (2 * this.Get('chart.gutter'));
+        var height    = this.canvas.height - (2 * this.Get('chart.gutter'));
+        var total     = RGraph.array_max(this.data);
+        var accheight = this.Get('chart.gutter');
+
+
+        /**
+        * Loop through each segment to draw
+        */
+        
+        // Set a shadow if it's been requested
+        if (this.Get('chart.shadow')) {
+            context.shadowColor   = this.Get('chart.shadow.color');
+            context.shadowBlur    = this.Get('chart.shadow.blur');
+            context.shadowOffsetX = this.Get('chart.shadow.offsetx');
+            context.shadowOffsetY = this.Get('chart.shadow.offsety');
+        }
+
+        for (i=0; i 0 && this.Get('chart.shadow.offsety') < 0);
+            }
+
+            context.strokeStyle = this.Get('chart.strokestyle');
+            context.fillStyle   = this.Get('chart.colors')[i];
+
+            context.beginPath();
+                context.moveTo(x1, y1);
+                context.lineTo(x2, y2);
+                context.lineTo(x3, y3);
+                context.lineTo(x4, y4);
+            context.closePath();
+
+            /**
+            * Store the coordinates
+            */
+            this.coords.push([x1, y1, x2, y2, x3, y3, x4, y4]);
+
+            // The redrawing if the shadow is on will do the stroke
+            if (!this.Get('chart.shadow')) {
+                context.stroke();
+            }
+
+            context.fill();
+
+            accheight += curheight;
+        }
+
+        /**
+        * If the shadow is enabled, redraw every segment, in order to allow for shadows going upwards
+        */
+        if (this.Get('chart.shadow')) {
+        
+            RGraph.NoShadow(this);
+        
+            for (i=0; i 0) {
+
+            var context = this.context;
+
+            for (var j=0; j this.Get('chart.xmax')) {
+                    this.Get('chart.vbars')[i][1] = 364 - this.Get('chart.vbars')[i][0];
+                }
+    
+                var barX   = (3 * gutter) + ( (this.Get('chart.vbars')[i][0] - this.Get('chart.xmin')) / (this.Get('chart.xmax') - this.Get('chart.xmin')) ) * (this.graphArea - (2 * gutter) );
+                var barY   = gutter;
+                var width  = ( (this.graphArea - (2 * gutter)) / (this.Get('chart.xmax') - this.Get('chart.xmin')) ) * this.Get('chart.vbars')[i][1];
+                var height = canvas.height - (2 * gutter);
+                
+                // Right hand bounds checking
+                if ( (barX + width) > (this.canvas.width - gutter) ) {
+                    width = this.canvas.width - gutter - barX;
+                }
+    
+                context.fillStyle = this.Get('chart.vbars')[i][2];
+                context.fillRect(barX, barY, width, height);
+            }
+        }
+
+
+        /**
+        * Draw the events
+        */
+        for (i=0; i (canvas.width - gutter) ) {
+                barWidth = canvas.width - gutter - barStartX;
+            }
+
+            // draw the border around the bar
+            if (this.Get('chart.borders')) {
+                context.strokeStyle = 'black';
+                context.beginPath();
+                context.strokeRect(barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin')) );
+            }
+
+            /**
+            *  Draw the actual bar storing store the coordinates
+            */
+            this.coords.push([barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin'))]);
+            context.fillRect(barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin')) );
+
+            // Work out the completeage indicator
+            var complete = (ev[2] / 100) * barWidth;
+
+            // Draw the % complete indicator. If it's greater than 0
+            if (typeof(ev[2]) == 'number') {
+                context.beginPath();
+                context.fillStyle = ev[5] ? ev[5] : '#0c0';
+                context.fillRect(barStartX,
+                                      barStartY + this.Get('chart.margin'),
+                                      (ev[2] / 100) * barWidth,
+                                      this.barHeight - (2 * this.Get('chart.margin')) );
+                
+                context.beginPath();
+                context.fillStyle = this.Get('chart.text.color');
+                RGraph.Text(context, this.Get('chart.text.font'), this.Get('chart.text.size'), barStartX + barWidth + 5, barStartY + this.halfBarHeight, String(ev[2]) + '%', 'center');
+            }
+        }
+
+
+        /**
+        * If tooltips are defined, handle them
+        */
+        if (this.Get('chart.tooltips')) {
+
+            // Register the object for redrawing
+            RGraph.Register(this);
+
+            /**
+            * If the cursor is over a hotspot, change the cursor to a hand
+            */
+            var canvas_onmousemove_func = function (eventObj)
+            {
+                eventObj = RGraph.FixEventObject(eventObj);
+                var canvas = eventObj.target;
+                var obj    = canvas.__object__;
+                var len    = obj.coords.length;
+
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(eventObj);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0; i= left
+                        && mouseX <= (left + width)
+                        && mouseY >= top
+                        && mouseY <= (top + height)
+                        && (typeof(obj.Get('chart.tooltips')) == 'function' || obj.Get('chart.tooltips')[i]) ) {
+
+                        canvas.style.cursor = 'pointer';
+                        return;
+                    }
+                }
+
+                canvas.style.cursor = 'default';
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+
+
+            var canvas_onclick_func = function (eventObj)
+            {
+                eventObj = RGraph.FixEventObject(eventObj);
+
+                var canvas  = eventObj.target;
+                var context = canvas.getContext('2d');
+                var obj     = canvas.__object__;
+
+                var mouseCoords = RGraph.getMouseXY(eventObj);
+                var mouseX      = mouseCoords[0];
+                var mouseY      = mouseCoords[1];
+                
+                
+                for (i=0; i= xCoord
+                        && (mouseX <= xCoord + width)
+                        && mouseY >= yCoord
+                        && (mouseY <= yCoord + height)
+                        && obj.Get('chart.tooltips')
+                       ) {
+
+                       // Redraw the graph
+                        RGraph.Redraw();
+
+                        /**
+                        * Get the tooltip text
+                        */
+                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                            var text = obj.Get('chart.tooltips')(idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
+                            var text = obj.Get('chart.tooltips')[idx](idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                            var text = obj.Get('chart.tooltips')[idx];
+
+                        } else {
+                            var text = null;
+                        }
+
+                        if (String(text).length && text != null) {
+
+                            // SHOW THE CORRECT TOOLTIP
+                            RGraph.Tooltip(canvas, text, eventObj.pageX, eventObj.pageY, idx);
+                            
+                            /**
+                            * Draw a rectangle around the correct bar, in effect highlighting it
+                            */
+                            context.strokeStyle = 'black';
+                            context.fillStyle = 'rgba(255,255,255,0.8)';
+                            context.strokeRect(xCoord, yCoord, width, height);
+                            context.fillRect(xCoord, yCoord, width, height);
+    
+                            eventObj.stopPropagation();
+                        }
+                        return;
+                    }
+                }
+            }
+            this.canvas.addEventListener('click', canvas_onclick_func, false);
+            RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
+        }
+    }
\ No newline at end of file
diff --git a/libraries/RGraph.hbar.js b/libraries/RGraph.hbar.js
new file mode 100644
index 0000000..6c18ad7
--- /dev/null
+++ b/libraries/RGraph.hbar.js
@@ -0,0 +1,893 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+    
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The horizontal bar chart constructor. The horizontal bar is a minor variant
+    * on the bar chart. If you have big labels, this may be useful as there is usually
+    * more space available for them.
+    * 
+    * @param object canvas The canvas object
+    * @param array  data   The chart data
+    */
+    RGraph.HBar = function (id, data)
+    {
+        // Get the canvas and context objects
+        this.id                = id;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
+        this.canvas.__object__ = this;
+        this.data              = data;
+        this.type              = 'hbar';
+        this.coords            = [];
+        this.isRGraph          = true;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+        
+        this.max = 0;
+        this.stackedOrGrouped  = false;
+
+        // Default properties
+        this.properties = {
+            'chart.gutter':                 25,
+            'chart.background.grid':        true,
+            'chart.background.grid.color':  '#ddd',
+            'chart.background.grid.width':  1,
+            'chart.background.grid.hsize':  25,
+            'chart.background.grid.vsize':  25,
+            'chart.background.barcolor1':   'white',
+            'chart.background.barcolor2':   'white',
+            'chart.background.grid.hlines': true,
+            'chart.background.grid.vlines': true,
+            'chart.background.grid.border': true,
+            'chart.background.grid.autofit':false,
+            'chart.background.grid.autofit.numhlines': 14,
+            'chart.background.grid.autofit.numvlines': 20,
+            'chart.title':                  '',
+            'chart.title.background':       null,
+            'chart.title.xaxis':            '',
+            'chart.title.yaxis':            '',
+            'chart.title.xaxis.pos':        0.25,
+            'chart.title.yaxis.pos':        0.5,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':             null,
+            'chart.text.size':              10,
+            'chart.text.color':             'black',
+            'chart.text.font':              'Verdana',
+            'chart.colors':                 ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0'],
+            'chart.labels':                 [],
+            'chart.labels.above':           false,
+            'chart.labels.above.decimals':  0,
+            'chart.contextmenu':            null,
+            'chart.key':                    [],
+            'chart.key.background':         'white',
+            'chart.key.position':           'graph',
+            'chart.key.shadow':             false,
+            'chart.key.shadow.color':       '#666',
+            'chart.key.shadow.blur':        3,
+            'chart.key.shadow.offsetx':     2,
+            'chart.key.shadow.offsety':     2,
+            'chart.key.position.gutter.boxed': true,
+            'chart.key.position.x':         null,
+            'chart.key.position.y':         null,
+            'chart.key.color.shape':        'square',
+            'chart.key.rounded':            true,
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.units.ingraph':          false,
+            'chart.strokestyle':            'black',
+            'chart.xmax':                   0,
+            'chart.axis.color':             'black',
+            'chart.shadow':                 false,
+            'chart.shadow.color':           '#666',
+            'chart.shadow.blur':            3,
+            'chart.shadow.offsetx':         3,
+            'chart.shadow.offsety':         3,
+            'chart.vmargin':                3,
+            'chart.grouping':               'grouped',
+            'chart.tooltips':               null,
+            'chart.tooltips.effect':         'fade',
+            'chart.tooltips.css.class':      'RGraph_tooltip',
+            'chart.tooltips.highlight':     true,
+            'chart.annotatable':            false,
+            'chart.annotate.color':         'black',
+            'chart.zoom.factor':            1.5,
+            'chart.zoom.fade.in':           true,
+            'chart.zoom.fade.out':          true,
+            'chart.zoom.hdir':              'right',
+            'chart.zoom.vdir':              'down',
+            'chart.zoom.frames':            10,
+            'chart.zoom.delay':             50,
+            'chart.zoom.shadow':            true,
+            'chart.zoom.mode':              'canvas',
+            'chart.zoom.thumbnail.width':   75,
+            'chart.zoom.thumbnail.height':  75,
+            'chart.zoom.background':        true,
+            'chart.zoom.action':            'zoom',
+            'chart.resizable':              false,
+            'chart.scale.point':            '.',
+            'chart.scale.thousand':         ',',
+            'chart.scale.decimals':         null
+        }
+
+        // Check for support
+        if (!this.canvas) {
+            alert('[HBAR] No canvas support');
+            return;
+        }
+        
+        // Check the canvasText library has been included
+        if (typeof(RGraph) == 'undefined') {
+            alert('[HBAR] Fatal error: The common library does not appear to have been included');
+        }
+
+        for (i=0; i= (left)
+                        && mouseX <= (left + width)
+                        && mouseY >= top
+                        && mouseY <= (top + height)
+                        && (   typeof(obj.Get('chart.tooltips')) == 'function'
+                            || obj.Get('chart.tooltips')[i]
+                           ) ) {
+
+                        canvas.style.cursor = 'pointer';
+                        return;
+                    }
+
+                    canvas.style.cursor = 'default';
+                }
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+
+
+            /**
+            * Install the onclick event handler for the tooltips
+            */
+            //this.canvas.onclick = function (e)
+            var canvas_onclick_func = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                //var canvas = document.getElementById(this.id);
+                var canvas = e.target;
+                var obj = canvas.__object__;
+
+                /**
+                * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
+                * This "deselects" any already selected bar
+                */
+                RGraph.Redraw();
+
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(e);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0,len=obj.coords.length; i= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
+
+                        /**
+                        * Get the tooltip text
+                        */
+                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                            var text = obj.Get('chart.tooltips')(idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
+                            var text = obj.Get('chart.tooltips')[idx](idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                            var text = obj.Get('chart.tooltips')[idx];
+
+                        } else {
+                            var text = null;
+                        }
+
+                        /**
+                        * Show a tooltip if it's defined
+                        */
+                        if (String(text).length && text != null) {
+
+                            obj.context.beginPath();
+                            obj.context.strokeStyle = 'black';
+                            obj.context.fillStyle   = 'rgba(255,255,255,0.5)';
+                            obj.context.strokeRect(left, top, width, height);
+                            obj.context.fillRect(left, top, width, height);
+        
+                            obj.context.stroke();
+                            obj.context.fill();
+
+                            RGraph.Tooltip(canvas, text, e.pageX, e.pageY, i);
+                        }
+                    }
+                }
+
+                /**
+                * Stop the event bubbling
+                */
+                e.stopPropagation();
+            }
+            this.canvas.addEventListener('click', canvas_onclick_func, false);
+            RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
+
+            // This resets the bar graph
+            if (RGraph.Registry.Get('chart.tooltip')) {
+                RGraph.Registry.Get('chart.tooltip').style.display = 'none';
+                RGraph.Registry.Set('chart.tooltip', null)
+            }
+        }
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+
+        /**
+        * Draw "in graph" labels
+        */
+        RGraph.DrawInGraphLabels(this);
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+    
+    /**
+    * This draws the axes
+    */
+    RGraph.HBar.prototype.DrawAxes = function ()
+    {
+        var gutter  = this.Get('chart.gutter');
+        var halfway = ((this.canvas.width - (4 * gutter)) / 2) + (3 * gutter);
+
+        this.context.beginPath();
+        this.context.lineWidth   = 1;
+        this.context.strokeStyle = this.Get('chart.axis.color');
+
+        // Draw the Y axis
+        if (this.Get('chart.yaxispos') == 'center') {
+            this.context.moveTo(halfway, gutter);
+            this.context.lineTo(halfway, this.canvas.height - gutter);
+        } else {
+            this.context.moveTo(gutter * 3, gutter);
+            this.context.lineTo(gutter * 3, this.canvas.height - gutter);
+        }
+
+        // Draw the X axis
+        this.context.moveTo(gutter * 3, this.canvas.height - gutter);
+        this.context.lineTo(this.canvas.width - gutter, this.canvas.height - gutter);
+
+        // Draw the Y tickmarks
+        var yTickGap = (this.canvas.height - (2 * gutter)) / this.data.length;
+
+        for (y=gutter; y<(this.canvas.height - gutter); y+=yTickGap) {
+            if (this.Get('chart.yaxispos') == 'center') {
+                this.context.moveTo(halfway + 3, y);
+                this.context.lineTo(halfway  - 3, y);
+            } else {
+                this.context.moveTo(gutter * 3, y);
+                this.context.lineTo( (gutter * 3)  - 3, y);
+            }
+        }
+
+
+        // Draw the X tickmarks
+        xTickGap = (this.canvas.width - (4 * gutter) ) / 10;
+        yStart   = this.canvas.height - gutter;
+        yEnd     = (this.canvas.height - gutter) + 3;
+
+        for (x=(this.canvas.width - gutter), i=0; this.Get('chart.yaxispos') == 'center' ? x>=(3 * gutter) : x>(3*gutter); x-=xTickGap) {
+
+            if (this.Get('chart.yaxispos') != 'center' || i != 5) {
+                this.context.moveTo(x, yStart);
+                this.context.lineTo(x, yEnd);
+            }
+            i++;
+        }
+
+        this.context.stroke();
+    }
+
+
+    /**
+    * This function draws the background. The common function isn't used because the left gutter is
+    * three times as big.
+    * 
+    * @param  object obj The graph object
+    */
+    RGraph.HBar.prototype.DrawBackground = function ()
+    {
+        var gutter  = this.Get('chart.gutter');
+        var size    = this.Get('chart.text.size');
+        var font    = this.Get('chart.text.font');
+        var canvas  = this.canvas;
+        var context = this.context;
+
+        this.context.beginPath();
+
+        // Draw the horizontal bars
+        this.context.fillStyle = this.Get('chart.background.barcolor1');
+        for (var i=gutter; i < (canvas.height - gutter); i+=80) {
+            context.fillRect (gutter * 3, i, canvas.width - (gutter * 4), Math.min(40, canvas.height - gutter - i) );
+        }
+
+        this.context.fillStyle = this.Get('chart.background.barcolor2');
+        for (var i= (40 + gutter); i < (canvas.height - gutter); i+=80) {
+            context.fillRect (gutter * 3, i, canvas.width - (gutter * 4), i + 40 > (canvas.height - gutter) ? canvas.height - (gutter + i) : 40);
+        }
+        
+        this.context.stroke();
+
+        // Draw the background grid
+        if (this.Get('chart.background.grid')) {
+        
+            // If autofit is specified, use the .numhlines and .numvlines along with the width to work
+            // out the hsize and vsize
+            if (this.Get('chart.background.grid.autofit')) {
+                var vsize = (canvas.width - (4 * gutter)) / this.Get('chart.background.grid.autofit.numvlines');
+                var hsize = (canvas.height - (4 * gutter)) / this.Get('chart.background.grid.autofit.numhlines');
+                
+                this.Set('chart.background.grid.vsize', vsize);
+                this.Set('chart.background.grid.hsize', hsize);
+            }
+
+            context.beginPath();
+            context.lineWidth   = this.Get('chart.background.grid.width');
+            context.strokeStyle = this.Get('chart.background.grid.color');
+
+            // Draw the horizontal lines
+            if (this.Get('chart.background.grid.hlines')) {
+                for (y=gutter; y < (canvas.height - gutter); y+=this.Get('chart.background.grid.hsize')) {
+                    context.moveTo(gutter * 3, y);
+                    context.lineTo(canvas.width - gutter, y);
+                }
+            }
+
+            // Draw the vertical lines
+            if (this.Get('chart.background.grid.vlines')) {
+                for (x=gutter * 3; x <= (canvas.width - gutter); x+=this.Get('chart.background.grid.vsize')) {
+                    context.moveTo(x, gutter);
+                    context.lineTo(x, canvas.height - gutter);
+                }
+            }
+
+            if (this.Get('chart.background.grid.border')) {
+                // Make sure a rectangle, the same colour as the grid goes around the graph
+                context.strokeStyle = this.Get('chart.background.grid.color');
+                context.strokeRect(gutter * 3, gutter, canvas.width - (4 * gutter), canvas.height - (2 * gutter));
+            }
+        }
+        
+        context.stroke();
+
+
+        // Draw the title if one is set
+        if ( typeof(this.Get('chart.title')) == 'string') {
+            
+            RGraph.DrawTitle(canvas,
+                             this.Get('chart.title'),
+                             gutter,
+                             (3 * gutter) + ((canvas.width - (4 * gutter)) / 2),
+                             size + 2);
+        }
+
+        context.stroke();
+
+
+        // X axis title
+        if (typeof(this.Get('chart.title.xaxis')) == 'string' && this.Get('chart.title.xaxis').length) {        
+            context.beginPath();
+            RGraph.Text(context, font, size + 2, canvas.width / 2, canvas.height - (gutter * this.Get('chart.title.xaxis.pos')), this.Get('chart.title.xaxis'), 'center', 'center', false, false, false, true);
+            context.fill();
+        }
+
+
+        // Y axis title
+        if (typeof(this.Get('chart.title.yaxis')) == 'string' && this.Get('chart.title.yaxis').length) {
+            context.beginPath();
+            RGraph.Text(context, font, size + 2, gutter * this.Get('chart.title.yaxis.pos'), canvas.height / 2, this.Get('chart.title.yaxis'), 'center', 'center', false, 270, false, true);
+            context.fill();
+        }
+    }
+
+
+    /**
+    * This draws the labels for the graph
+    */
+    RGraph.HBar.prototype.DrawLabels = function ()
+    {
+        var gutter     = this.Get('chart.gutter');
+        var context    = this.context;
+        var canvas     = this.canvas;
+        var units_pre  = this.Get('chart.units.pre');
+        var units_post = this.Get('chart.units.post');
+        var text_size  = this.Get('chart.text.size');
+        var font       = this.Get('chart.text.font');
+
+
+        /**
+        * Set the units to blank if they're to be used for ingraph labels only
+        */
+        if (this.Get('chart.units.ingraph')) {
+            units_pre  = '';
+            units_post = '';
+        }
+
+
+        /**
+        * Draw the X axis labels
+        */
+        this.context.beginPath();
+        this.context.fillStyle = this.Get('chart.text.color');
+
+        //var interval = (this.canvas.width - (4 * gutter)) / (t ? 10 : 5);
+
+        if (this.Get('chart.yaxispos') == 'center') {
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (10/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[4], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (9/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (8/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (7/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (6/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', 'center');
+            
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (4/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, -1 * this.scale[0], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (3/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, -1 * this.scale[1], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (2/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, -1 * this.scale[2], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (1/10)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, -1 * this.scale[3], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (0)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, -1 * this.scale[4], units_pre, units_post), 'center', 'center');
+
+        } else {
+
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (5/5)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[4], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (4/5)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (3/5)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (2/5)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', 'center');
+            RGraph.Text(context, font, text_size, (gutter * 3) + (this.graphwidth * (1/5)), gutter + this.halfTextHeight + this.graphheight + 2, RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', 'center');
+        }
+        
+        this.context.fill();
+        this.context.stroke();
+
+        /**
+        * The Y axis labels
+        */
+        if (typeof(this.Get('chart.labels')) == 'object') {
+        
+            var xOffset = 5;
+            var font    = this.Get('chart.text.font');
+
+            // Draw the X axis labels
+            this.context.fillStyle = this.Get('chart.text.color');
+            
+            // How wide is each bar
+            var barHeight = (this.canvas.height - (2 * gutter) ) / this.Get('chart.labels').length;
+            
+            // Reset the xTickGap
+            yTickGap = (this.canvas.height - (2 * gutter)) / this.Get('chart.labels').length
+
+            // Draw the X tickmarks
+            var i=0;
+            for (y=gutter + (yTickGap / 2); y<=this.canvas.height - gutter; y+=yTickGap) {
+                RGraph.Text(this.context, font,
+                                      this.Get('chart.text.size'),
+                                      (gutter * 3) - xOffset,
+                                      y,
+                                      String(this.Get('chart.labels')[i++]),
+                                      'center',
+                                      'right');
+            }
+        }
+    }
+    
+    
+    /**
+    * This function draws the actual bars
+    */
+    RGraph.HBar.prototype.Drawbars = function ()
+    {
+        this.context.lineWidth   = 1;
+        this.context.strokeStyle = this.Get('chart.strokestyle');
+        this.context.fillStyle   = this.Get('chart.colors')[0];
+        var prevX                = 0;
+        var prevY                = 0;
+
+        /**
+        * Work out the max value
+        */
+        if (this.Get('chart.xmax')) {
+            this.scale = [
+                          (this.Get('chart.xmax') * 0.2).toFixed(this.Get('chart.scale.decimals')),
+                          (this.Get('chart.xmax') * 0.4).toFixed(this.Get('chart.scale.decimals')),
+                          (this.Get('chart.xmax') * 0.6).toFixed(this.Get('chart.scale.decimals')),
+                          (this.Get('chart.xmax') * 0.8).toFixed(this.Get('chart.scale.decimals')),
+                          (this.Get('chart.xmax')).toFixed(this.Get('chart.scale.decimals'))
+                         ];
+            this.max = this.scale[4];
+        } else {
+            var grouping = this.Get('chart.grouping');
+
+            for (i=0; i this.canvas.width ? true : false;
+
+                RGraph.Text(this.context,this.Get('chart.text.font'),this.Get('chart.text.size'),coords[i][0] + coords[i][2] + (border ? -5 : 5),coords[i][1] + (coords[i][3] / 2),RGraph.number_format(this, (this.coords[i][5]).toFixed(this.Get('chart.labels.above.decimals')), this.Get('chart.units.pre'), this.Get('chart.units.post')),'center',border ? 'right' : 'left',border,null,border ? 'rgba(255,255,255,0.9)' : null);
+
+            }
+        }
+    }
diff --git a/libraries/RGraph.hprogress.js b/libraries/RGraph.hprogress.js
new file mode 100644
index 0000000..15f9276
--- /dev/null
+++ b/libraries/RGraph.hprogress.js
@@ -0,0 +1,545 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The progress bar constructor
+    * 
+    * @param int id    The ID of the canvas tag
+    * @param int value The indicated value of the meter.
+    * @param int max   The end value (the upper most) of the meter
+    */
+    RGraph.HProgress = function (id, value, max)
+    {
+        this.id                = id;
+        this.max               = max;
+        this.value             = value;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext('2d');
+        this.canvas.__object__ = this;
+        this.type              = 'hprogress';
+        this.coords            = [];
+        this.isRGraph          = true;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+        this.properties = {
+            'chart.min':                0,
+            'chart.colors':             ['#0c0'],
+            'chart.tickmarks':          true,
+            'chart.tickmarks.color':    'black',
+            'chart.tickmarks.inner':    false,
+            'chart.gutter':             25,
+            'chart.numticks':           10,
+            'chart.numticks.inner':     50,
+            'chart.background.color':   '#eee',
+            'chart.shadow':             false,
+            'chart.shadow.color':       'rgba(0,0,0,0.5)',
+            'chart.shadow.blur':        3,
+            'chart.shadow.offsetx':     3,
+            'chart.shadow.offsety':     3,
+            'chart.title':              '',
+            'chart.title.background':   null,
+            'chart.title.hpos':         null,
+            'chart.title.vpos':         null,
+            'chart.width':              0,
+            'chart.height':             0,
+            'chart.text.size':          10,
+            'chart.text.color':         'black',
+            'chart.text.font':          'Verdana',
+            'chart.contextmenu':        null,
+            'chart.units.pre':          '',
+            'chart.units.post':         '',
+            'chart.tooltips':           [],
+            'chart.tooltips.effect':     'fade',
+            'chart.tooltips.css.class':  'RGraph_tooltip',
+            'chart.tooltips.highlight':     true,
+            'chart.annotatable':        false,
+            'chart.annotate.color':     'black',
+            'chart.zoom.mode':          'canvas',
+            'chart.zoom.factor':        1.5,
+            'chart.zoom.fade.in':       true,
+            'chart.zoom.fade.out':      true,
+            'chart.zoom.hdir':          'right',
+            'chart.zoom.vdir':          'down',
+            'chart.zoom.frames':        10,
+            'chart.zoom.delay':         50,
+            'chart.zoom.shadow':        true,
+            'chart.zoom.background':    true,
+            'chart.zoom.thumbnail.width': 100,
+            'chart.zoom.thumbnail.height': 100,
+            'chart.arrows':             false,
+            'chart.margin':             0,
+            'chart.resizable':          false,
+            'chart.label.inner':        false,
+            'chart.adjustable':         false,
+            'chart.scale.decimals':     0
+        }
+
+        // Check for support
+        if (!this.canvas) {
+            alert('[PROGRESS] No canvas support');
+            return;
+        }
+
+        // Check the common library has been included
+        if (typeof(RGraph) == 'undefined') {
+            alert('[PROGRESS] Fatal error: The common library does not appear to have been included');
+        }
+    }
+
+
+    /**
+    * A generic setter
+    * 
+    * @param string name  The name of the property to set
+    * @param string value The value of the poperty
+    */
+    RGraph.HProgress.prototype.Set = function (name, value)
+    {
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+    /**
+    * A generic getter
+    * 
+    * @param string name  The name of the property to get
+    */
+    RGraph.HProgress.prototype.Get = function (name)
+    {
+        return this.properties[name.toLowerCase()];
+    }
+
+
+    /**
+    * Draws the progress bar
+    */
+    RGraph.HProgress.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+        /**
+        * Clear all of this canvases event handlers (the ones installed by RGraph)
+        */
+        RGraph.ClearEventListeners(this.id);
+
+        // Figure out the width and height
+        this.width  = this.canvas.width - (2 * this.Get('chart.gutter'));
+        this.height = this.canvas.height - (2 * this.Get('chart.gutter'));
+        this.coords = [];
+
+        this.Drawbar();
+        this.DrawTickMarks();
+        this.DrawLabels();
+
+        this.context.stroke();
+        this.context.fill();
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+        
+        /**
+        * Alternatively, show the tooltip if requested
+        */
+        if (typeof(this.Get('chart.tooltips')) == 'function' || this.Get('chart.tooltips').length) {
+
+            // Need to register this object for redrawing
+            RGraph.Register(this);
+
+            /**
+            * Install the window onclick handler
+            */
+            window.onclick = function ()
+            {
+                RGraph.Redraw();
+            }
+
+
+            /**
+            * Install the onclick event handler for the tooltips
+            */
+            var canvas_onclick_func = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var canvas = document.getElementById(this.id);
+                var obj = canvas.__object__;
+
+                /**
+                * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
+                * This "deselects" any already selected bar
+                */
+                RGraph.Redraw();
+    
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(e);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0; i= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
+    
+                        /**
+                        * Get the tooltip text
+                        */
+                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                            var text = obj.Get('chart.tooltips')(idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
+                            var text = obj.Get('chart.tooltips')[idx](idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                            var text = obj.Get('chart.tooltips')[idx];
+
+                        } else {
+                            var text = null;
+                        }
+
+                        /**
+                        * Show a tooltip if it's defined
+                        */
+                        if (text) {
+
+                            obj.context.beginPath();
+                            obj.context.strokeStyle = 'black';
+                            obj.context.fillStyle   = 'rgba(255,255,255,0.5)';
+                            obj.context.strokeRect(left, top, width, height);
+                            obj.context.fillRect(left, top, width, height);
+        
+                            obj.context.stroke();
+                            obj.context.fill();
+
+                            RGraph.Tooltip(canvas, text, e.pageX, e.pageY, i);
+                        }
+                    }
+                }
+
+                /**
+                * Stop the event bubbling
+                */
+                e.stopPropagation();
+            }
+            this.canvas.addEventListener('click', canvas_onclick_func, false);
+            RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
+
+            /**
+            * If the cursor is over a hotspot, change the cursor to a hand
+            */
+            var canvas_onmousemove_func = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var canvas = document.getElementById(this.id);
+                var obj = canvas.__object__;
+
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(e);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0; i= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
+                        canvas.style.cursor = 'pointer';
+                        break;
+                    }
+                    
+                    canvas.style.cursor = 'default';
+                }
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * Instead of using RGraph.common.adjusting.js, handle them here
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+    /**
+    * Draws the bar
+    */
+    RGraph.HProgress.prototype.Drawbar = function ()
+    {
+        // Set a shadow if requested
+        if (this.Get('chart.shadow')) {
+            RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur'));
+        }
+
+        // Draw the shadow for MSIE
+        if (RGraph.isIE8() && this.Get('chart.shadow')) {
+            this.context.fillStyle = this.Get('chart.shadow.color');
+            this.context.fillRect(this.Get('chart.gutter') + this.Get('chart.shadow.offsetx'), this.Get('chart.gutter') + this.Get('chart.shadow.offsety'), this.width, this.height);
+        }
+
+        // Draw the outline
+        this.context.fillStyle   = this.Get('chart.background.color');
+        this.context.strokeStyle = 'black';
+        this.context.strokeRect(this.Get('chart.gutter'), this.Get('chart.gutter'), this.width, this.height);
+        this.context.fillRect(this.Get('chart.gutter'), this.Get('chart.gutter'), this.width, this.height);
+
+        // Turn off any shadow
+        RGraph.NoShadow(this);
+
+        this.context.fillStyle   = this.Get('chart.color');
+        this.context.strokeStyle = 'black';
+        
+        var margin = this.Get('chart.margin');
+
+        // Draw the actual bar itself
+        var barWidth = Math.min(this.width, ((RGraph.array_sum(this.value) - this.Get('chart.min')) / (this.max - this.Get('chart.min')) ) * this.width);
+
+        if (this.Get('chart.tickmarks.inner')) {
+
+            var spacing = (this.canvas.width - this.Get('chart.gutter') - this.Get('chart.gutter')) / this.Get('chart.numticks.inner');
+
+            this.context.lineWidth   = 1;
+            this.context.strokeStyle = '#999';
+
+            this.context.beginPath();
+            for (var x = this.Get('chart.gutter'); x 0) {
+                alert('[RGRAPH WARNING] Chrome 6 has a shadow bug, meaning you should increase the linewidth to at least 1.01');
+        }
+
+
+        // Cache the gutter as an object variable
+        this.gutter = this.Get('chart.gutter');
+
+        // Reset the data back to that which was initially supplied
+        this.data = RGraph.array_clone(this.original_data);
+
+
+        // Reset the max value
+        this.max = 0;
+
+        /**
+        * Reverse the datasets so that the data and the labels tally
+        */
+        this.data = RGraph.array_reverse(this.data);
+
+        if (this.Get('chart.filled') && !this.Get('chart.filled.range') && this.data.length > 1) {
+        
+            var accumulation = [];
+        
+            for (var set=0; set 0) {
+            RGraph.DrawBars(this);
+        }
+
+        if (this.Get('chart.axesontop') == false) {
+            this.DrawAxes();
+        }
+
+        /**
+        * Handle the appropriate shadow color. This now facilitates an array of differing
+        * shadow colors
+        */
+        var shadowColor = this.Get('chart.shadow.color');
+        
+        if (typeof(shadowColor) == 'object') {
+            shadowColor = RGraph.array_reverse(RGraph.array_clone(this.Get('chart.shadow.color')));
+        }
+
+        for (var i=(this.data.length - 1), j=0; i>=0; i--, j++) {
+
+            this.context.beginPath();
+
+            /**
+            * Turn on the shadow if required
+            */
+            if (this.Get('chart.shadow') && !this.Get('chart.filled')) {
+
+                /**
+                * Accommodate an array of shadow colors as well as a single string
+                */
+                if (typeof(shadowColor) == 'object' && shadowColor[i - 1]) {
+                    this.context.shadowColor = shadowColor[i];
+                } else if (typeof(shadowColor) == 'object') {
+                    this.context.shadowColor = shadowColor[0];
+                } else if (typeof(shadowColor) == 'string') {
+                    this.context.shadowColor = shadowColor;
+                }
+
+                this.context.shadowBlur    = this.Get('chart.shadow.blur');
+                this.context.shadowOffsetX = this.Get('chart.shadow.offsetx');
+                this.context.shadowOffsetY = this.Get('chart.shadow.offsety');
+            
+            } else if (this.Get('chart.filled') && this.Get('chart.shadow')) {
+                alert('[LINE] Shadows are not permitted when the line is filled');
+            }
+
+            /**
+            * Draw the line
+            */
+
+            if (this.Get('chart.fillstyle')) {
+                if (typeof(this.Get('chart.fillstyle')) == 'object' && this.Get('chart.fillstyle')[j]) {
+                   var fill = this.Get('chart.fillstyle')[j];
+                
+                } else if (typeof(this.Get('chart.fillstyle')) == 'string') {
+                    var fill = this.Get('chart.fillstyle');
+    
+                } else {
+                    alert('[LINE] Warning: chart.fillstyle must be either a string or an array with the same number of elements as you have sets of data');
+                }
+            } else if (this.Get('chart.filled')) {
+                var fill = this.Get('chart.colors')[j];
+
+            } else {
+                var fill = null;
+            }
+
+            /**
+            * Figure out the tickmark to use
+            */
+            if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'object') {
+                var tickmarks = this.Get('chart.tickmarks')[i];
+            } else if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'string') {
+                var tickmarks = this.Get('chart.tickmarks');
+            } else if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'function') {
+                var tickmarks = this.Get('chart.tickmarks');
+            } else {
+                var tickmarks = null;
+            }
+
+
+            this.DrawLine(this.data[i],
+                          this.Get('chart.colors')[j],
+                          fill,
+                          this.GetLineWidth(j),
+                           tickmarks);
+
+            this.context.stroke();
+        }
+
+
+
+
+
+
+
+
+
+
+
+
+        /**
+        * If tooltips are defined, handle them
+        */
+        if (this.Get('chart.tooltips') && (this.Get('chart.tooltips').length || typeof(this.Get('chart.tooltips')) == 'function')) {
+
+            // Need to register this object for redrawing
+            if (this.Get('chart.tooltips.highlight')) {
+                RGraph.Register(this);
+            }
+
+            canvas_onmousemove_func = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var canvas  = e.target;
+                var context = canvas.getContext('2d');
+                var obj     = canvas.__object__;
+                var point   = obj.getPoint(e);
+
+                if (obj.Get('chart.tooltips.highlight')) {
+                    RGraph.Register(obj);
+                }
+
+                if (   point
+                    && typeof(point[0]) == 'object'
+                    && typeof(point[1]) == 'number'
+                    && typeof(point[2]) == 'number'
+                    && typeof(point[3]) == 'number'
+                   ) {
+
+                    // point[0] is the graph object
+                    var xCoord = point[1];
+                    var yCoord = point[2];
+                    var idx    = point[3];
+
+                    if ((obj.Get('chart.tooltips')[idx] || typeof(obj.Get('chart.tooltips')) == 'function')) {
+
+                        // Get the tooltip text
+                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                            var text = obj.Get('chart.tooltips')(idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
+                            var text = obj.Get('chart.tooltips')[idx](idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                            var text = String(obj.Get('chart.tooltips')[idx]);
+
+                        } else {
+                            var text = '';
+                        }
+
+                        // Chnage the pointer to a hand
+                        canvas.style.cursor = 'pointer';
+
+                        /**
+                        * If the tooltip is the same one as is currently visible (going by the array index), don't do squat and return.
+                        */
+                        if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == idx && RGraph.Registry.Get('chart.tooltip').__canvas__.id == canvas.id) {
+                            return;
+                        }
+
+                        /**
+                        * Redraw the graph
+                        */
+                        if (obj.Get('chart.tooltips.highlight')) {
+                           // Redraw the graph
+                            RGraph.Redraw();
+                        }
+    
+                        // SHOW THE CORRECT TOOLTIP
+                        RGraph.Tooltip(canvas, text, e.pageX, e.pageY, idx);
+                        
+                        // Store the tooltip index on the tooltip object
+                        RGraph.Registry.Get('chart.tooltip').__index__ = Number(idx);
+
+                        /**
+                        * Highlight the graph
+                        */
+                        if (obj.Get('chart.tooltips.highlight')) {
+                            context.beginPath();
+                            context.moveTo(xCoord, yCoord);
+                            context.arc(xCoord, yCoord, 2, 0, 6.28, 0);
+                            context.strokeStyle = '#999';
+                            context.fillStyle = 'white';
+                            context.stroke();
+                            context.fill();
+                        }
+                        
+                        e.stopPropagation();
+                        return;
+                    }
+                }
+                
+                /**
+                * Not over a hotspot?
+                */
+                canvas.style.cursor = 'default';
+            }
+            
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        /**
+        * If the axes have been requested to be on top, do that
+        */
+        if (this.Get('chart.axesontop')) {
+            this.DrawAxes();
+        }
+
+        /**
+        * Draw the labels
+        */
+        this.DrawLabels();
+        
+        /**
+        * Draw the range if necessary
+        */
+        this.DrawRange();
+        
+        // Draw a key if necessary
+        if (this.Get('chart.key').length) {
+            RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
+        }
+
+        /**
+        * Draw " above" labels if enabled
+        */
+        if (this.Get('chart.labels.above')) {
+            this.DrawAboveLabels();
+        }
+
+        /**
+        * Draw the "in graph" labels
+        */
+        RGraph.DrawInGraphLabels(this);
+
+        /**
+        * Draw crosschairs
+        */
+        RGraph.DrawCrosshairs(this);
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+
+        /**
+        * Redraw the lines if a filled range is on the cards
+        */
+        if (this.Get('chart.filled') && this.Get('chart.filled.range') && this.data.length == 2) {
+
+            this.context.beginPath();
+            var len = this.coords.length / 2;
+            this.context.lineWidth = this.Get('chart.linewidth');
+            this.context.strokeStyle = this.Get('chart.colors')[0];
+
+            for (var i=0; i=len; --i) {
+                if (i == (this.coords.length - 1) ) {
+                    this.context.moveTo(this.coords[i][0], this.coords[i][1]);
+                } else {
+                    this.context.lineTo(this.coords[i][0], this.coords[i][1]);
+                }
+            }
+            
+            this.context.stroke();
+        } else if (this.Get('chart.filled') && this.Get('chart.filled.range')) {
+            alert('[LINE] You must have only two sets of data for a filled range chart');
+        }
+
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        /**
+        * This function enables the zoom in area mode
+        */
+        if (this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ZoomArea(this);
+        }
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * This function enables adjustments
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+    
+    /**
+    * Draws the axes
+    */
+    RGraph.Line.prototype.DrawAxes = function ()
+    {
+        var gutter = this.gutter;
+
+        // Don't draw the axes?
+        if (this.Get('chart.noaxes')) {
+            return;
+        }
+        
+        // Turn any shadow off
+        RGraph.NoShadow(this);
+
+        this.context.lineWidth   = 1;
+        this.context.strokeStyle = this.Get('chart.axis.color');
+        this.context.beginPath();
+
+        // Draw the X axis
+        if (this.Get('chart.noxaxis') == false) {
+            if (this.Get('chart.xaxispos') == 'center') {
+                this.context.moveTo(gutter, this.grapharea / 2 + gutter);
+                this.context.lineTo(this.canvas.width - gutter, this.grapharea / 2 + gutter);
+            } else {
+                this.context.moveTo(gutter, this.canvas.height - gutter);
+                this.context.lineTo(this.canvas.width - gutter, this.canvas.height - gutter);
+            }
+        }
+        
+        // Draw the Y axis
+        if (this.Get('chart.noyaxis') == false) {
+            if (this.Get('chart.yaxispos') == 'left') {
+                this.context.moveTo(gutter, gutter);
+                this.context.lineTo(gutter, this.canvas.height - (gutter) );
+            } else {
+                this.context.moveTo(this.canvas.width - gutter, gutter);
+                this.context.lineTo(this.canvas.width - gutter, this.canvas.height - gutter );
+            }
+        }
+
+        /**
+        * Draw the X tickmarks
+        */
+        if (this.Get('chart.noxaxis') == false) {
+            var xTickInterval = (this.canvas.width - (2 * gutter)) / (this.Get('chart.xticks') ? this.Get('chart.xticks') : this.data[0].length);
+    
+            for (x=gutter + (this.Get('chart.yaxispos') == 'left' ? xTickInterval : 0); x<=(this.canvas.width - gutter + 1 ); x+=xTickInterval) {
+    
+                if (this.Get('chart.yaxispos') == 'right' && x >= (this.canvas.width - gutter - 1) ) {
+                    break;
+                }
+                
+                // If the last tick is not desired...
+                if (this.Get('chart.noendxtick')) {
+                    if (this.Get('chart.yaxispos') == 'left' && x >= (this.canvas.width - gutter)) {
+                        break;
+                    } else if (this.Get('chart.yaxispos') == 'right' && x == gutter) {
+                        continue;
+                    }
+                }
+    
+                var yStart = this.Get('chart.xaxispos') == 'center' ? (this.canvas.height / 2) - 3 : this.canvas.height - gutter;
+                var yEnd = this.Get('chart.xaxispos') == 'center' ? yStart + 6 : this.canvas.height - gutter - (x % 60 == 0 ? this.Get('chart.largexticks') * this.Get('chart.tickdirection') : this.Get('chart.smallxticks') * this.Get('chart.tickdirection'));
+    
+                this.context.moveTo(x, yStart);
+                this.context.lineTo(x, yEnd);
+            }
+        
+        // Draw an extra tickmark if there is no X axis, but there IS a Y axis
+        } else if (this.Get('chart.noyaxis') == false) {
+
+            if (this.Get('chart.yaxispos') == 'left') {
+                this.context.moveTo(this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter'));
+                this.context.lineTo(this.Get('chart.gutter') - this.Get('chart.smallyticks'), this.canvas.height - this.Get('chart.gutter'));
+            } else {
+                this.context.moveTo(this.canvas.width - this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter'));
+                this.context.lineTo(this.canvas.width - this.Get('chart.gutter') + this.Get('chart.smallyticks'), this.canvas.height - this.Get('chart.gutter'));
+            }
+        }
+
+        /**
+        * Draw the Y tickmarks
+        */
+        if (this.Get('chart.noyaxis') == false) {
+            var counter    = 0;
+            var adjustment = 0;
+    
+            if (this.Get('chart.yaxispos') == 'right') {
+                adjustment = (this.canvas.width - (2 * gutter));
+            }
+    
+            if (this.Get('chart.xaxispos') == 'center') {
+                var interval = (this.grapharea / 10);
+                var lineto = (this.Get('chart.yaxispos') == 'left' ? gutter : this.canvas.width - gutter + this.Get('chart.smallyticks'));
+    
+                // Draw the upper halves Y tick marks
+                for (y=gutter; y < (this.grapharea / 2) + gutter; y+=interval) {
+                    this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? gutter - this.Get('chart.smallyticks') : this.canvas.width - gutter), y);
+                    this.context.lineTo(lineto, y);
+                }
+                
+                // Draw the lower halves Y tick marks
+                for (y=gutter + (this.halfgrapharea) + interval; y <= this.grapharea + gutter; y+=interval) {
+                    this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? gutter - this.Get('chart.smallyticks') : this.canvas.width - gutter), y);
+                    this.context.lineTo(lineto, y);
+                }
+    
+            } else {
+                var lineto = (this.Get('chart.yaxispos') == 'left' ? gutter - this.Get('chart.smallyticks') : this.canvas.width - gutter + this.Get('chart.smallyticks'));
+    
+                for (y=gutter; y < (this.canvas.height - gutter) && counter < 10; y+=( (this.canvas.height - (2 * gutter)) / 10) ) {
+    
+                    this.context.moveTo(gutter + adjustment, y);
+                    this.context.lineTo(lineto, y);
+                
+                    var counter = counter +1;
+                }
+            }
+        
+        // Draw an extra X tickmark
+        } else if (this.Get('chart.noxaxis') == false) {
+            if (this.Get('chart.yaxispos') == 'left') {
+                this.context.moveTo(this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter'));
+                this.context.lineTo(this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter') + this.Get('chart.smallxticks'));
+            } else {
+                this.context.moveTo(this.canvas.width - this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter'));
+                this.context.lineTo(this.canvas.width - this.Get('chart.gutter'), this.canvas.height - this.Get('chart.gutter') + this.Get('chart.smallxticks'));
+            }
+        }
+
+        this.context.stroke();
+    }
+
+
+    /**
+    * Draw the text labels for the axes
+    */
+    RGraph.Line.prototype.DrawLabels = function ()
+    {
+        this.context.strokeStyle = 'black';
+        this.context.fillStyle   = this.Get('chart.text.color');
+        this.context.lineWidth   = 1;
+        
+        // Turn off any shadow
+        RGraph.NoShadow(this);
+
+        // This needs to be here
+        var font      = this.Get('chart.text.font');
+        var gutter    = this.Get('chart.gutter');
+        var text_size = this.Get('chart.text.size');
+        var context   = this.context;
+        var canvas    = this.canvas;
+
+        // Draw the Y axis labels
+        if (this.Get('chart.ylabels') && this.Get('chart.ylabels.specific') == null) {
+
+            var units_pre  = this.Get('chart.units.pre');
+            var units_post = this.Get('chart.units.post');
+            var xpos       = this.Get('chart.yaxispos') == 'left' ? gutter - 5 : this.canvas.width - gutter + 5;
+            var align      = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left';
+            
+            var numYLabels = this.Get('chart.ylabels.count');
+            var bounding   = false;
+            var bgcolor    = this.Get('chart.ylabels.inside') ? this.Get('chart.ylabels.inside.color') : null;
+
+            
+            /**
+            * If the Y labels are inside the Y axis, invert the alignment
+            */
+            if (this.Get('chart.ylabels.inside') == true && align == 'left') {
+                xpos -= 10;
+                align = 'right';
+                bounding = true;
+                
+
+            } else if (this.Get('chart.ylabels.inside') == true && align == 'right') {
+                xpos += 10;
+                align = 'left';
+                bounding = true;
+            }
+
+
+
+            if (this.Get('chart.xaxispos') == 'center') {
+                var half = this.grapharea / 2;
+
+                if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) {
+                    //  Draw the upper halves labels
+                    RGraph.Text(context, font, text_size, xpos, gutter + ( (0/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, bounding, null, bgcolor);
+    
+                    if (numYLabels == 5) {
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (1/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor);
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (3/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor);
+                    }
+    
+                    if (numYLabels >= 3) {
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (2/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor);
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (4/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor);
+                    }
+                    
+                    //  Draw the lower halves labels
+                    if (numYLabels >= 3) {
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (6/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor);
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (8/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor);
+                    }
+    
+                    if (numYLabels == 5) {
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (7/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor);
+                        RGraph.Text(context, font, text_size, xpos, gutter + ( (9/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor);
+                    }
+    
+                    RGraph.Text(context, font, text_size, xpos, gutter + ( (10/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, (this.scale[4] == '1.0' ? '1.0' : this.scale[4]), units_pre, units_post), null, align, bounding, null, bgcolor);
+                
+                } else if (numYLabels == 10) {
+
+                    // 10 Y labels
+                    var interval = (this.grapharea / numYLabels) / 2;
+                
+                    for (var i=0; i= 3) {
+                        RGraph.Text(context, font, text_size, xpos, gutter + this.halfTextHeight + ((2/5) * (this.grapharea ) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor);
+                        RGraph.Text(context, font, text_size, xpos, gutter + this.halfTextHeight + ((4/5) * (this.grapharea) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor);
+                    }
+                
+                } else if (numYLabels == 10) {
+
+                    // 10 Y labels
+                    var interval = (this.grapharea / numYLabels) / 2;
+                
+                    for (var i=0; i 0) {
+
+            var yOffset  = 13;
+            var bordered = false;
+            var bgcolor  = null;
+
+            if (this.Get('chart.xlabels.inside')) {
+                yOffset = -5;
+                bordered = true;
+                bgcolor  = this.Get('chart.xlabels.inside.color');
+            }
+
+            /**
+            * Text angle
+            */
+            var angle  = 0;
+            var valign = null;
+            var halign = 'center';
+
+            if (typeof(this.Get('chart.text.angle')) == 'number' && this.Get('chart.text.angle') > 0) {
+                angle   = -1 * this.Get('chart.text.angle');
+                valign  = 'center';
+                halign  = 'right';
+                yOffset = 5
+            }
+
+            this.context.fillStyle = this.Get('chart.text.color');
+            var numLabels = this.Get('chart.labels').length;
+
+            for (i=0; i 0 ?  this.Get('chart.ymin') : (-1 * this.Get('chart.ymin')) ) ) / (this.max - this.min) ) * ((this.canvas.height - (2 * this.gutter)) ));
+
+            if (this.Get('chart.ylabels.invert')) {
+                yPos -= gutter;
+                yPos -= gutter;
+                yPos = this.canvas.height - yPos;
+            }
+
+            // Make adjustments depending on the X axis position
+            if (this.Get('chart.xaxispos') == 'center') {
+                yPos /= 2;
+            } else if (this.Get('chart.xaxispos') == 'bottom') {
+                yPos -= this.gutter; // Without this the line is out of place due to the gutter
+            }
+            
+            // Null data points
+            if (lineData[i] == null) {
+                yPos = null;
+            }
+
+            // Not always very noticeable, but it does have an effect
+            // with thick lines
+            this.context.lineCap  = 'round';
+            this.context.lineJoin = 'round';
+
+            // Plot the line if we're at least on the second iteration
+            if (i > 0) {
+                xPos = xPos + xInterval;
+            } else {
+                xPos = this.Get('chart.hmargin') + gutter; // Might need to be this.gutter - 27th August 2010
+            }
+
+            /**
+            * Add the coords to an array
+            */
+            this.coords.push([xPos, yPos]);
+            lineCoords.push([xPos, yPos]);
+        }
+
+        this.context.stroke();
+
+        /**
+        * For IE only: Draw the shadow ourselves as ExCanvas doesn't produce shadows
+        */
+        if (RGraph.isIE8() && this.Get('chart.shadow')) {
+            this.DrawIEShadow(lineCoords, this.context.shadowColor);
+        }
+
+        /**
+        * Now draw the actual line [FORMERLY SECOND]
+        */
+        this.context.beginPath();
+        this.context.strokeStyle = 'rgba(240,240,240,0.9)'; // Almost transparent - changed on 10th May 2010
+        //this.context.strokeStyle = fill;
+        if (fill) this.context.fillStyle   = fill;
+
+        var isStepped = this.Get('chart.stepped');
+        var isFilled = this.Get('chart.filled');
+
+
+        for (var i=0; i (this.canvas.height - this.Get('chart.gutter')) ) {
+                penUp = true;
+            }
+
+            if (i == 0 || penUp || !yPos || !prevY || prevY < this.gutter) {
+                if (this.Get('chart.filled') && !this.Get('chart.filled.range')) {
+                    this.context.moveTo(xPos + 1, this.canvas.height - this.gutter - (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height - (2 * this.gutter)) / 2 : 0) -1);
+                    this.context.lineTo(xPos + 1, yPos);
+
+                } else {
+                    this.context.moveTo(xPos, yPos);
+                }
+                
+                penUp = false;
+
+            } else {
+
+                // Draw the stepped part of stepped lines
+                if (isStepped) {
+                    this.context.lineTo(xPos, lineCoords[i - 1][1]);
+                }
+
+                if ((yPos >= this.gutter && yPos <= (this.canvas.height - this.gutter)) || this.Get('chart.outofbounds')) {
+
+                    if (isLast && this.Get('chart.filled') && !this.Get('chart.filled.range') && this.Get('chart.yaxispos') == 'right') {
+                        xPos -= 1;
+                    }
+
+
+                    // Added 8th September 2009
+                    if (!isStepped || !isLast) {
+                        this.context.lineTo(xPos, yPos);
+                        
+                        if (isFilled && lineCoords[i+1] && lineCoords[i+1][1] == null) {
+                            this.context.lineTo(xPos, this.canvas.height - this.gutter);
+                        }
+                    
+                    // Added August 2010
+                    } else if (isStepped && isLast) {
+                        this.context.lineTo(xPos,yPos);
+                    }
+
+
+                    penUp = false;
+                } else {
+                    penUp = true;
+                }
+            }
+        }
+
+        if (this.Get('chart.filled') && !this.Get('chart.filled.range')) {
+            var fillStyle = this.Get('chart.fillstyle');
+
+            this.context.lineTo(xPos, this.canvas.height - this.gutter - 1 -  + (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height - (2 * this.gutter)) / 2 : 0));
+            this.context.fillStyle = fill;
+
+            this.context.fill();
+            this.context.beginPath();
+        }
+
+        /**
+        * FIXME this may need removing when Chrome is fixed
+        * SEARCH TAGS: CHROME SHADOW BUG
+        */
+        if (navigator.userAgent.match(/Chrome/) && this.Get('chart.shadow') && this.Get('chart.chromefix') && this.Get('chart.shadow.blur') > 0) {
+
+            for (var i=lineCoords.length - 1; i>=0; --i) {
+                if (
+                       typeof(lineCoords[i][1]) != 'number'
+                    || (typeof(lineCoords[i+1]) == 'object' && typeof(lineCoords[i+1][1]) != 'number')
+                   ) {
+                    this.context.moveTo(lineCoords[i][0],lineCoords[i][1]);
+                } else {
+                    this.context.lineTo(lineCoords[i][0],lineCoords[i][1]);
+                }
+            }
+        }
+
+        this.context.stroke();
+
+
+        if (this.Get('chart.backdrop')) {
+            this.DrawBackdrop(lineCoords, color);
+        }
+
+        // Now redraw the lines with the correct line width
+        this.RedrawLine(lineCoords, color, linewidth);
+        
+        this.context.stroke();
+
+        // Draw the tickmarks
+        for (var i=0; i (this.canvas.height - gutter) || yPos < gutter) && !this.Get('chart.outofbounds')) {
+            return;
+        }
+
+        this.context.beginPath();
+
+        var offset   = 0;
+
+        // Reset the stroke and lineWidth back to the same as what they were when the line was drawm
+        this.context.lineWidth   = this.Get('chart.linewidth');
+        this.context.strokeStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
+        this.context.fillStyle   = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
+
+        // Cicular tick marks
+        if (   tickmarks == 'circle'
+            || tickmarks == 'filledcircle'
+            || tickmarks == 'endcircle') {
+
+            if (tickmarks == 'circle'|| tickmarks == 'filledcircle' || (tickmarks == 'endcircle') ) {
+                this.context.beginPath();
+                this.context.arc(xPos + offset, yPos + offset, this.Get('chart.ticksize'), 0, 360 / (180 / Math.PI), false);
+
+                if (tickmarks == 'filledcircle') {
+                    this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
+                } else {
+                    this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : 'white';
+                }
+
+                this.context.fill();
+                this.context.stroke();
+            }
+
+        // Halfheight "Line" style tick marks
+        } else if (tickmarks == 'halftick') {
+            this.context.beginPath();
+            this.context.moveTo(xPos, yPos);
+            this.context.lineTo(xPos, yPos + this.Get('chart.ticksize'));
+
+            this.context.stroke();
+        
+        // Tick style tickmarks
+        } else if (tickmarks == 'tick') {
+            this.context.beginPath();
+            this.context.moveTo(xPos, yPos -  this.Get('chart.ticksize'));
+            this.context.lineTo(xPos, yPos + this.Get('chart.ticksize'));
+
+            this.context.stroke();
+        
+        // Endtick style tickmarks
+        } else if (tickmarks == 'endtick') {
+            this.context.beginPath();
+            this.context.moveTo(xPos, yPos -  this.Get('chart.ticksize'));
+            this.context.lineTo(xPos, yPos + this.Get('chart.ticksize'));
+
+            this.context.stroke();
+        
+        // "Cross" style tick marks
+        } else if (tickmarks == 'cross') {
+            this.context.beginPath();
+            this.context.moveTo(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'));
+            this.context.lineTo(xPos + this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize'));
+            this.context.moveTo(xPos + this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'));
+            this.context.lineTo(xPos - this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize'));
+            
+            this.context.stroke();
+        
+        // A white bordered circle
+        } else if (tickmarks == 'borderedcircle' || tickmarks == 'dot') {
+                this.context.lineWidth   = 1;
+                this.context.strokeStyle = this.Get('chart.tickmarks.dot.color');
+                this.context.fillStyle   = this.Get('chart.tickmarks.dot.color');
+
+                // The outer white circle
+                this.context.beginPath();
+                this.context.arc(xPos, yPos, this.Get('chart.ticksize'), 0, 360 / (180 / Math.PI), false);
+                this.context.closePath();
+
+
+                this.context.fill();
+                this.context.stroke();
+                
+                // Now do the inners
+                this.context.beginPath();
+                this.context.fillStyle   = color;
+                this.context.strokeStyle = color;
+                this.context.arc(xPos, yPos, this.Get('chart.ticksize') - 2, 0, 360 / (180 / Math.PI), false);
+
+                this.context.closePath();
+
+                this.context.fill();
+                this.context.stroke();
+        
+        } else if (   tickmarks == 'square'
+                   || tickmarks == 'filledsquare'
+                   || (tickmarks == 'endsquare')
+                   || (tickmarks == 'filledendsquare') ) {
+
+            this.context.fillStyle   = 'white';
+            this.context.strokeStyle = this.context.strokeStyle; // FIXME Is this correct?
+
+            this.context.beginPath();
+            this.context.strokeRect(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'), this.Get('chart.ticksize') * 2, this.Get('chart.ticksize') * 2);
+
+            // Fillrect
+            if (tickmarks == 'filledsquare' || tickmarks == 'filledendsquare') {
+                this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
+                this.context.fillRect(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'), this.Get('chart.ticksize') * 2, this.Get('chart.ticksize') * 2);
+
+            } else if (tickmarks == 'square' || tickmarks == 'endsquare') {
+                this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : 'white';
+                this.context.fillRect((xPos - this.Get('chart.ticksize')) + 1, (yPos - this.Get('chart.ticksize')) + 1, (this.Get('chart.ticksize') * 2) - 2, (this.Get('chart.ticksize') * 2) - 2);
+            }
+
+            this.context.stroke();
+            this.context.fill();
+
+        /**
+        * FILLED arrowhead
+        */
+        } else if (tickmarks == 'filledarrow') {
+        
+            var x = Math.abs(xPos - prevX);
+            var y = Math.abs(yPos - prevY);
+
+            if (yPos < prevY) {
+                var a = Math.atan(x / y) + 1.57;
+            } else {
+                var a = Math.atan(y / x) + 3.14;
+            }
+
+            this.context.beginPath();
+                this.context.moveTo(xPos, yPos);
+                this.context.arc(xPos, yPos, 7, a - 0.5, a + 0.5, false);
+            this.context.closePath();
+
+            this.context.stroke();
+            this.context.fill();
+
+        /**
+        * Arrow head, NOT filled
+        */
+        } else if (tickmarks == 'arrow') {
+
+            var x = Math.abs(xPos - prevX);
+            var y = Math.abs(yPos - prevY);
+
+            if (yPos < prevY) {
+                var a = Math.atan(x / y) + 1.57;
+            } else {
+                var a = Math.atan(y / x) + 3.14;
+            }
+
+            this.context.beginPath();
+                this.context.moveTo(xPos, yPos);
+                this.context.arc(xPos, yPos, 7, a - 0.5 - (document.all ? 0.1 : 0.01), a - 0.4, false);
+
+                this.context.moveTo(xPos, yPos);
+                this.context.arc(xPos, yPos, 7, a + 0.5 + (document.all ? 0.1 : 0.01), a + 0.5, true);
+
+
+            this.context.stroke();
+        
+        /**
+        * Custom tick drawing function
+        */
+        } else if (typeof(tickmarks) == 'function') {
+            tickmarks(this, lineData, lineData[index], index, xPos, yPos, color, prevX, prevY);
+        }
+    }
+
+
+    /**
+    * Draws a filled range if necessary
+    */
+    RGraph.Line.prototype.DrawRange = function ()
+    {
+        /**
+        * Fill the range if necessary
+        */
+        if (this.Get('chart.filled.range') && this.Get('chart.filled')) {
+            this.context.beginPath();
+            this.context.fillStyle = this.Get('chart.fillstyle');
+            this.context.strokeStyle = this.Get('chart.fillstyle');
+            this.context.lineWidth = 1;
+            var len = (this.coords.length / 2);
+
+            for (var i=0; i=len; --i) {
+                this.context.lineTo(this.coords[i][0], this.coords[i][1])
+            }
+            this.context.stroke();
+            this.context.fill();
+        }
+    }
+
+
+    /**
+    * Redraws the line with the correct line width etc
+    * 
+    * @param array coords The coordinates of the line
+    */
+    RGraph.Line.prototype.RedrawLine = function (coords, color, linewidth)
+    {
+        if (this.Get('chart.noredraw')) {
+            return;
+        }
+
+        this.context.beginPath();
+        this.context.strokeStyle = (typeof(color) == 'object' && color ? color[0] : color);
+        this.context.lineWidth = linewidth;
+
+        var len    = coords.length;
+        var gutter = this.gutter;
+        var width  = this.canvas.width;
+        var height = this.canvas.height;
+        var penUp  = false;
+
+        for (var i=0; i 0) {
+                var prevX = coords[i - 1][0];
+                var prevY = coords[i - 1][1];
+            }
+
+
+            if ((
+                   (i == 0 && coords[i])
+                || (yPos < gutter)
+                || (prevY < gutter)
+                || (yPos > (height - gutter))
+                || (i > 0 && prevX > (width - gutter))
+                || (i > 0 && prevY > (height - gutter))
+                || prevY == null
+                || penUp == true
+               ) && !this.Get('chart.outofbounds')) {
+
+                this.context.moveTo(coords[i][0], coords[i][1]);
+                
+                penUp = false;
+
+            } else {
+
+                if (this.Get('chart.stepped') && i > 0) {
+                    this.context.lineTo(coords[i][0], coords[i - 1][1]);
+                }
+                
+                // Don't draw the last bit of a stepped chart. Now DO
+                //if (!this.Get('chart.stepped') || i < (coords.length - 1)) {
+                this.context.lineTo(coords[i][0], coords[i][1]);
+                //}
+                penUp = false;
+            }
+        }
+
+        /**
+        * If two colors are specified instead of one, go over the up bits
+        */
+        if (this.Get('chart.colors.alternate') && typeof(color) == 'object' && color[0] && color[1]) {
+            for (var i=1; i= (xCoord - 5 + obj.Get('chart.tooltips.coords.adjust')[0])
+                && mouseY <= (yCoord + 5 + obj.Get('chart.tooltips.coords.adjust')[1])
+                && mouseY >= (yCoord - 5 + obj.Get('chart.tooltips.coords.adjust')[1])) {
+
+                    return [obj, xCoord, yCoord, i];
+            }
+        }
+    }
+
+
+    /**
+    * Draws the above line labels
+    */
+    RGraph.Line.prototype.DrawAboveLabels = function ()
+    {
+        var context    = this.context;
+        var size       = this.Get('chart.labels.above.size');
+        var font       = this.Get('chart.text.font');
+        var units_pre  = this.Get('chart.units.pre');
+        var units_post = this.Get('chart.units.post');
+
+        context.beginPath();
+
+        // Don't need to check that chart.labels.above is enabled here, it's been done already
+        for (var i=0; i this.max) this.value = this.max;
+        if (this.value < this.min) this.value = this.min;
+    }
+
+
+    /**
+    * A setter
+    * 
+    * @param name  string The name of the property to set
+    * @param value mixed  The value of the property
+    */
+    RGraph.Meter.prototype.Set = function (name, value)
+    {
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+    /**
+    * A getter
+    * 
+    * @param name  string The name of the property to get
+    */
+    RGraph.Meter.prototype.Get = function (name)
+    {
+        return this.properties[name];
+    }
+
+
+    /**
+    * The function you call to draw the bar chart
+    */
+    RGraph.Meter.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+
+        // Cache the gutter as a object variable because it's used a lot
+        this.gutter  = this.Get('chart.gutter');
+
+        this.centerx = this.canvas.width / 2;
+        this.centery = this.canvas.height - this.gutter;
+        this.radius  = Math.min(this.canvas.width - (2 * this.gutter), this.canvas.height - (2 * this.gutter));
+
+        this.DrawBackground();
+        this.DrawNeedle();
+        this.DrawLabels();
+        
+        /**
+        * Draw the title
+        */
+        RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutter);
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+
+        
+        /**
+        * For MSIE only, to cover the spurious lower ends of the circle
+        */
+        if (document.all) {
+            // Cover the left tail
+            this.context.beginPath();
+            this.context.moveTo(this.gutter, this.canvas.height - this.gutter);
+            this.context.fillStyle = 'white';
+            this.context.fillRect(this.centerx - this.radius - 5, this.canvas.height - this.gutter + 1, 10, this.gutter);
+            this.context.fill();
+
+            // Cover the right tail
+            this.context.beginPath();
+            this.context.moveTo(this.canvas.width - this.gutter, this.canvas.height - this.gutter);
+            this.context.fillStyle = 'white';
+            this.context.fillRect(this.centerx + this.radius - 5, this.canvas.height - this.gutter + 1, 10, this.gutter);
+            this.context.fill();
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+
+    /**
+    * Draws the background of the chart
+    */
+    RGraph.Meter.prototype.DrawBackground = function ()
+    {
+        // Draw the shadow
+        if (this.Get('chart.shadow')) {
+            this.context.beginPath();
+                this.context.fillStyle = 'white';
+                this.context.shadowColor   = this.Get('chart.shadow.color');
+                this.context.shadowBlur    = this.Get('chart.shadow.blur');
+                this.context.shadowOffsetX = this.Get('chart.shadow.offsetx');
+                this.context.shadowOffsetY = this.Get('chart.shadow.offsety');
+                
+                this.context.arc(this.centerx, this.centery, this.radius, 3.14, 6.28, false);
+                //this.context.arc(this.centerx, this.centery, , 0, 6.28, false);
+            this.context.fill();
+
+
+            this.context.beginPath();
+                var r = (this.radius * 0.06) > 40 ? 40 : (this.radius * 0.06);
+                this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0);
+            this.context.fill();
+
+            RGraph.NoShadow(this);
+        }
+
+        // First, draw the grey tickmarks
+        this.context.beginPath();
+        this.context.strokeStyle = '#bbb'
+        for (var i=0; i<3.14; i+=(0.13/3)) {
+            this.context.arc(this.centerx, this.centery, this.radius, 3.14 + i, 3.1415 + i, 0);
+            this.context.lineTo(this.centerx, this.centery);
+        }
+        this.context.stroke();
+
+
+        // First, draw the tickmarks
+        for (var i=0; i<3.14; i+=0.13) {
+            this.context.beginPath();
+            this.context.strokeStyle = this.Get('chart.border.color');
+            this.context.arc(this.centerx, this.centery, this.radius, 3.14 + i, 3.1415 + i, 0);
+            this.context.lineTo(this.centerx, this.centery)
+            this.context.stroke();
+        }
+
+        // Draw the white circle that makes the tickmarks
+        this.context.beginPath();
+        this.context.fillStyle = 'white'
+        this.context.arc(this.centerx, this.centery, this.radius - 4, 3.1415927, 6.28, false);
+        this.context.closePath();
+        this.context.fill();
+
+        // Draw the green area
+        this.context.strokeStyle = this.Get('chart.green.color');
+        this.context.fillStyle = this.Get('chart.green.color');
+        this.context.beginPath();
+        this.context.arc(this.centerx,this.centery,this.radius * 0.85,(((this.Get('chart.green.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.green.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,false);
+        this.context.lineTo(this.centerx, this.centery);
+        this.context.closePath();
+        this.context.stroke();
+        this.context.fill();
+        
+        // Draw the yellow area
+        this.context.strokeStyle = this.Get('chart.yellow.color');
+        this.context.fillStyle = this.Get('chart.yellow.color');
+        this.context.beginPath();        this.context.arc(this.centerx,this.centery,this.radius * 0.85,(((this.Get('chart.yellow.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.yellow.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,false)
+        this.context.lineTo(this.centerx, this.centery);
+        this.context.closePath();
+        this.context.stroke();
+        this.context.fill();
+        
+        // Draw the yellow area
+        this.context.strokeStyle = this.Get('chart.red.color');
+        this.context.fillStyle = this.Get('chart.red.color');
+        this.context.beginPath();
+        this.context.arc(this.centerx,this.centery,this.radius * 0.85,(((this.Get('chart.red.start') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,(((this.Get('chart.red.end') - this.min) / (this.max - this.min)) * 3.1415927) + 3.1415927,false);
+        this.context.lineTo(this.centerx, this.centery);
+        this.context.closePath();
+        this.context.stroke();
+        this.context.fill();
+
+        // Draw the outline
+        this.context.strokeStyle = this.Get('chart.border.color');
+        this.context.lineWidth   = this.Get('chart.linewidth');
+
+        this.context.beginPath();
+        this.context.moveTo(this.centerx, this.centery);
+        this.context.arc(this.centerx, this.centery, this.radius, 3.1415927, 6.2831854, false);
+        this.context.closePath();
+
+        this.context.stroke();
+        
+        // Reset the linewidth back to 1
+        this.context.lineWidth = 1;
+    }
+
+
+    /**
+    * Draws the pointer
+    */
+    RGraph.Meter.prototype.DrawNeedle = function ()
+    {
+        // First draw the circle at the bottom
+        this.context.fillStyle = 'black';
+        this.context.lineWidth = this.radius >= 200 ? 7 : 3;
+        this.context.lineCap = 'round';
+
+        // Now, draw the pointer
+        this.context.beginPath();
+        this.context.strokeStyle = 'black';
+        var a = (((this.value - this.min) / (this.max - this.min)) * 3.14) + 3.14;
+        this.context.arc(this.centerx, this.centery, this.radius * 0.7, a, a + 0.001, false);
+        this.context.lineTo(this.centerx, this.centery);
+        this.context.stroke();
+        
+        // Draw the triangular needle head
+        this.context.beginPath();
+            this.context.lineWidth = 1;
+            //this.context.moveTo(this.centerx, this.centery);
+            this.context.arc(this.centerx, this.centery, (this.radius * 0.7) + 15, a, a + 0.001, 0);
+            this.context.arc(this.centerx, this.centery, (this.radius * 0.7) - 15, a + 0.087, a + 0.087999, 0);
+            this.context.arc(this.centerx, this.centery, (this.radius * 0.7) - 15, a - 0.087, a - 0.087999, 1);
+        this.context.fill();
+
+        // Draw the center circle
+        var r = (this.radius * 0.06) > 40 ? 40 : (this.radius * 0.06);
+
+        this.context.beginPath();
+        this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0);
+        this.context.fill();
+        
+        // Draw the centre bit of the circle
+        this.context.fillStyle = 'white';
+        this.context.beginPath();
+        this.context.arc(this.centerx, this.centery, r - 2, 0, 6.28, 0);
+        this.context.fill();
+    }
+
+
+    /**
+    * Draws the labels
+    */
+    RGraph.Meter.prototype.DrawLabels = function ()
+    {
+        var context    = this.context;
+        var radius     = this.radius;
+        var text_size  = this.Get('chart.text.size');
+        var text_font  = this.Get('chart.text.font');
+        var units_post = this.Get('chart.units.post');
+        var units_pre  = this.Get('chart.units.pre');
+        var centerx    = this.centerx;
+        var centery    = this.centery;
+        var min        = this.min;
+        var max        = this.max;
+
+        context.fillStyle = this.Get('chart.text.color');
+        context.lineWidth = 1;
+
+        context.beginPath();
+
+
+        RGraph.Text(context, text_font, text_size, centerx - radius + (0.075 * radius), centery - 10, units_pre + min + units_post, 'center', 'left', false, 270);
+        RGraph.Text(context,text_font,text_size,centerx - (Math.cos(0.62819 / 2) * (radius - (0.085 * radius)) ),centery - (Math.sin(0.682819 / 2) * (radius - (0.085 * radius)) ),units_pre + (((max - min) * (1/10)) + min) + units_post,'center','center', false, 288);
+        RGraph.Text(context,text_font,text_size,centerx - (Math.cos(0.62819) * (radius - (0.085 * radius)) ),centery - (Math.sin(0.682819) * (radius - (0.085 * radius)) ),units_pre + (((max - min) * (2/10)) + min) + units_post,'center','center', false, 306);
+        RGraph.Text(context, text_font, text_size,centerx - (Math.cos(0.95) * (radius - (0.085 * radius)) ),centery - (Math.sin(0.95) * (radius - (0.0785 * radius)) ),units_pre + (((max - min) * (3/10)) + min) + units_post,'center', 'center', false, 320);
+        RGraph.Text(context, text_font, text_size,centerx - (Math.cos(1.2566) * (radius - (0.085 * radius)) ),centery - (Math.sin(1.2566) * (radius - (0.0785 * radius)) ),units_pre + (((max - min) * (4/10)) + min) + units_post,'center', 'center', false, 342);
+        RGraph.Text(context,text_font,text_size,centerx - (Math.cos(1.57) * (radius - (0.075 * radius)) ),centery - (Math.sin(1.57) * (radius - (0.075 * radius)) ),units_pre + (((max - min) * (5/10)) + min) + units_post,'center','center', false, 0);
+        RGraph.Text(context,text_font,text_size,centerx - (Math.cos(1.88495562) * (radius - (0.075 * radius)) ),centery - (Math.sin(1.88495562) * (radius - (0.075 * radius)) ),units_pre + (((max - min)* (6/10)) + min) + units_post,'center','center', false, 18);
+        RGraph.Text(context,text_font,text_size,centerx - (Math.cos(2.1989) * (radius - (0.075 * radius)) ),centery - (Math.sin(2.1989) * (radius - (0.075 * radius)) ),units_pre + (((max - min)* (7/10)) + min) + units_post,'center','center', false, 36);
+        RGraph.Text(context,text_font,text_size,centerx - (Math.cos(2.51327416) * (radius - (0.075 * radius)) ),centery - (Math.sin(2.51327416) * (radius - (0.075 * radius)) ), units_pre + (((max - min) * (8/10)) + min) + units_post,'center','center', false, 54);
+        RGraph.Text(context,text_font,text_size,centerx - (Math.cos(2.82764832) * (radius - (0.075 * radius)) ),centery - (Math.sin(2.82764832) * (radius - (0.075 * radius)) ),units_pre + (((max - min) * (9/10)) + min) + units_post,'center','center', false, 72);
+        RGraph.Text(context, text_font, text_size,centerx + radius - (0.075 * radius),centery - 10,units_pre + (max) + units_post, 'center', 'right', false, 90);
+
+        context.fill();
+        context.stroke();
+    }
diff --git a/libraries/RGraph.modaldialog.js b/libraries/RGraph.modaldialog.js
new file mode 100644
index 0000000..2d4cc88
--- /dev/null
+++ b/libraries/RGraph.modaldialog.js
@@ -0,0 +1,244 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+    
+    ModalDialog = {}
+    ModalDialog.dialog     = null;
+    ModalDialog.background = null;
+    ModalDialog.offset     = 50;
+    ModalDialog.events     = [];
+
+    /**
+    * Shows the dialog with the supplied DIV acting as the contents
+    * 
+    * @param string id    The ID of the DIV to use as the dialogs contents
+    * @param int    width The width of the dialog
+    */
+    ModalDialog.Show = function (id, width)
+    {
+        ModalDialog.id    = id;
+        ModalDialog.width = width;
+
+        ModalDialog.ShowBackground();
+        ModalDialog.ShowDialog();
+
+        // Install the event handlers
+        window.onresize = ModalDialog.Resize;
+
+        
+        // Call them initially
+        ModalDialog.Resize();
+        
+        ModalDialog.FireCustomEvent('onmodaldialog');
+    }
+    
+    
+    /**
+    * Shows the background semi-transparent darkened DIV
+    */
+    ModalDialog.ShowBackground = function ()
+    {
+        // Create the background if neccessary
+        ModalDialog.background = document.createElement('DIV');
+        ModalDialog.background.className      = 'ModalDialog_background';
+        ModalDialog.background.style.position = 'fixed';
+        ModalDialog.background.style.top      = 0;
+        ModalDialog.background.style.left     = 0;
+        ModalDialog.background.style.width    = (screen.width + 100) + 'px';
+        ModalDialog.background.style.height   = (screen.height + 100) + 'px';
+        ModalDialog.background.style.backgroundColor = 'rgb(204,204,204)';        
+        ModalDialog.background.style.opacity = 0;
+        ModalDialog.background.style.zIndex = 3276;
+        ModalDialog.background.style.filter = "Alpha(opacity=50)";
+            
+        document.body.appendChild(ModalDialog.background);
+
+        ModalDialog.background.style.visibility = 'visible';
+    }
+
+
+    /**
+    * Shows the dialog itself
+    */
+    ModalDialog.ShowDialog = function ()
+    {
+        // Create the DIV if necessary
+        if (!ModalDialog.dialog) {
+            ModalDialog.dialog = document.createElement('DIV');
+    
+            ModalDialog.dialog.id                    = 'ModalDialog_dialog';
+            ModalDialog.dialog.className             = 'ModalDialog_dialog';
+
+            var borderRadius = '15px';
+
+            ModalDialog.dialog.style.borderRadius       = borderRadius;
+            ModalDialog.dialog.style.MozBorderRadius    = borderRadius;
+            ModalDialog.dialog.style.WebkitBorderRadius = borderRadius;
+
+            ModalDialog.dialog.style.boxShadow    = '3px 3px 3px rgba(96,96,96,0.5)';
+            ModalDialog.dialog.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
+            ModalDialog.dialog.style.WebkitBoxShadow    = 'rgba(96,96,96,0.5) 3px 3px 3px';
+
+            ModalDialog.dialog.style.position        = 'fixed';
+            ModalDialog.dialog.style.backgroundColor = 'white';
+            ModalDialog.dialog.style.width           = parseInt(ModalDialog.width) + 'px';
+            ModalDialog.dialog.style.border          = '2px solid #999';
+            ModalDialog.dialog.style.zIndex          = 32767;
+            ModalDialog.dialog.style.padding         = '5px';
+            ModalDialog.dialog.style.paddingTop      = '25px';
+            ModalDialog.dialog.style.opacity       = 0;
+            
+            if (document.all) {
+                ModalDialog.dialog.style.zIndex = 32767;
+            }
+
+
+
+            // Accomodate various browsers
+            if (navigator.userAgent.indexOf('Opera') != -1) {
+                ModalDialog.dialog.style.paddingTop = '25px';
+
+            } else if (navigator.userAgent.indexOf('MSIE') != -1) {
+                ModalDialog.dialog.style.paddingTop = '25px';
+
+            } else if (navigator.userAgent.indexOf('Safari') != -1) {
+                ModalDialog.dialog.style.paddingTop = '25px';
+            }
+
+            document.body.appendChild(ModalDialog.dialog);
+
+
+            // Now create the grey bar at the top of the dialog
+            var bar = document.createElement('DIV');
+                bar.className = 'ModalDialog_topbar';
+                bar.style.top = 0;
+                bar.style.left = 0;
+                bar.style.width = '100%';//(ModalDialog.dialog.offsetWidth - 4) + 'px';
+                bar.style.height = '20px';
+                bar.style.backgroundColor = '#bbb';
+                bar.style.borderBottom = '2px solid #999';
+                //bar.style.zIndex    = 50000;
+                bar.style.position = 'absolute';
+                var borderRadius = '11px';
+                bar.style.WebkitBorderTopLeftRadius = borderRadius;
+                bar.style.WebkitBorderTopRightRadius = borderRadius;
+                bar.style.MozBorderRadiusTopleft = borderRadius;
+                bar.style.MozBorderRadiusTopright = borderRadius;
+                bar.style.borderTopRightRadius = borderRadius;
+                bar.style.borderTopLeftRadius = borderRadius;
+            ModalDialog.dialog.appendChild(bar);
+            
+            // Add the content div
+            var content = document.createElement('DIV');
+                //content.style.paddingTop = '20px';
+                content.style.width = '100%';
+                content.style.height = '100%';
+            ModalDialog.dialog.appendChild(content);
+
+        content.innerHTML = document.getElementById(ModalDialog.id).innerHTML;
+
+            // Now reposition the dialog in the center
+            ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
+            ModalDialog.dialog.style.top  = '30%';
+        }
+        
+        // Show the dialog
+        ModalDialog.dialog.style.visibility = 'visible';
+        
+        // A simple fade-in effect
+        setTimeout('ModalDialog.dialog.style.opacity = 0.2', 50);
+        setTimeout('ModalDialog.dialog.style.opacity = 0.4', 100);
+        setTimeout('ModalDialog.dialog.style.opacity = 0.6', 150);
+        setTimeout('ModalDialog.dialog.style.opacity = 0.8', 200);
+        setTimeout('ModalDialog.dialog.style.opacity = 1', 250);
+
+        setTimeout('ModalDialog.background.style.opacity = 0.1', 50);
+        setTimeout('ModalDialog.background.style.opacity = 0.2', 100);
+        setTimeout('ModalDialog.background.style.opacity = 0.3', 150);
+        setTimeout('ModalDialog.background.style.opacity = 0.4', 200);
+        setTimeout('ModalDialog.background.style.opacity = 0.5', 250);
+    }
+
+    
+    /**
+    * Hides everything
+    */
+    ModalDialog.Close = function ()
+    {
+        if (ModalDialog.dialog) {
+            ModalDialog.dialog.style.visibility = 'hidden';
+            ModalDialog.dialog.style.opacity = 0;
+        }
+
+        if (ModalDialog.background) {
+            ModalDialog.background.style.visibility = 'hidden';
+            ModalDialog.background.style.opacity = 0;
+        }        
+    }
+    
+    // An alias
+    ModalDialog.Hide = ModalDialog.Close
+    
+    
+    /**
+    * Accommodate the window being resized
+    */
+    ModalDialog.Resize = function ()
+    {
+        if (ModalDialog.dialog) {
+            ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
+        }
+
+        ModalDialog.background.style.width  = '2500px';
+        ModalDialog.background.style.height = '2500px';
+    }
+
+
+    /**
+    * Returns the page height
+    * 
+    * @return int The page height
+    */
+    ModalDialog.AddCustomEventListener = function (name, func)
+    {
+        if (typeof(ModalDialog.events) == 'undefined') {
+            ModalDialog.events = [];
+        }
+
+        ModalDialog.events.push([name, func]);
+    }
+
+
+    /**
+    * Used to fire the ModalDialog custom event
+    * 
+    * @param object obj   The graph object that fires the event
+    * @param string event The name of the event to fire
+    */
+    ModalDialog.FireCustomEvent = function (name)
+    {
+        for (var i=0; i 0);
+    }
\ No newline at end of file
diff --git a/libraries/RGraph.odo.js b/libraries/RGraph.odo.js
new file mode 100644
index 0000000..779d07a
--- /dev/null
+++ b/libraries/RGraph.odo.js
@@ -0,0 +1,653 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+    
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The odometer constructor. Pass it the ID of the canvas tag, the start value of the odo,
+    * the end value, and the value that the pointer should point to.
+    * 
+    * @param string id    The ID of the canvas tag
+    * @param int    start The start value of the Odo
+    * @param int    end   The end value of the odo
+    * @param int    value The indicated value (what the needle points to)
+    */
+    RGraph.Odometer = function (id, start, end, value)
+    {
+        this.id                = id
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext('2d');
+        this.canvas.__object__ = this;
+        this.type              = 'odo';
+        this.isRGraph          = true;
+        this.start             = start;
+        this.end               = end;
+        this.value             = value;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+
+        this.properties = {
+            'chart.value.text':             false,
+            'chart.needle.color':           'black',
+            'chart.needle.width':           2,
+            'chart.needle.head':            true,
+            'chart.needle.tail':            true,
+            'chart.needle.type':            'pointer',
+            'chart.needle.extra':            [],
+            'chart.text.size':              10,
+            'chart.text.color':             'black',
+            'chart.text.font':              'Verdana',
+            'chart.green.max':              end * 0.75,
+            'chart.red.min':                end * 0.9,
+            'chart.green.color':            'green',
+            'chart.yellow.color':           'yellow',
+            'chart.red.color':              'red',
+            'chart.label.area':             35,
+            'chart.gutter':                 25,
+            'chart.title':                  '',
+            'chart.title.background':       null,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':             null,
+            'chart.contextmenu':            null,
+            'chart.linewidth':              1,
+            'chart.shadow.inner':           false,
+            'chart.shadow.inner.color':     'black',
+            'chart.shadow.inner.offsetx':   3,
+            'chart.shadow.inner.offsety':   3,
+            'chart.shadow.inner.blur':      6,
+            'chart.shadow.outer':           false,
+            'chart.shadow.outer.color':     '#666',
+            'chart.shadow.outer.offsetx':   0,
+            'chart.shadow.outer.offsety':   0,
+            'chart.shadow.outer.blur':      15,
+            'chart.annotatable':            false,
+            'chart.annotate.color':         'black',
+            'chart.scale.decimals':         0,
+            'chart.zoom.factor':            1.5,
+            'chart.zoom.fade.in':           true,
+            'chart.zoom.fade.out':          true,
+            'chart.zoom.hdir':              'right',
+            'chart.zoom.vdir':              'down',
+            'chart.zoom.frames':            10,
+            'chart.zoom.delay':             50,
+            'chart.zoom.shadow':            true,
+            'chart.zoom.mode':              'canvas',
+            'chart.zoom.thumbnail.width':   75,
+            'chart.zoom.thumbnail.height':  75,
+            'chart.zoom.background':        true,
+            'chart.zoom.action':            'zoom',
+            'chart.resizable':              false,
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.border':                 false,
+            'chart.tickmarks.highlighted':  false,
+            'chart.zerostart':              false,
+            'chart.labels':                 null,
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.value.units.pre':        '',
+            'chart.value.units.post':       ''
+        }
+
+        // Check the common library has been included
+        if (typeof(RGraph) == 'undefined') {
+            alert('[ODO] Fatal error: The common library does not appear to have been included');
+        }
+    }
+
+
+    /**
+    * A peudo setter
+    * 
+    * @param name  string The name of the property to set
+    * @param value mixed  The value of the property
+    */
+    RGraph.Odometer.prototype.Set = function (name, value)
+    {
+        if (name == 'chart.needle.style') {
+            alert('[RGRAPH] The RGraph property chart.needle.style has changed to chart.needle.color');
+        }
+
+        if (name == 'chart.needle.thickness') {
+            name = 'chart.needle.width';
+        }
+
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+    /**
+    * A getter
+    * 
+    * @param name  string The name of the property to get
+    */
+    RGraph.Odometer.prototype.Get = function (name)
+    {
+        return this.properties[name.toLowerCase()];
+    }
+
+
+    /**
+    * Draws the odometer
+    */
+    RGraph.Odometer.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+        // Work out a few things
+        this.radius   = Math.min(this.canvas.width / 2, this.canvas.height / 2) - this.Get('chart.gutter') - (this.Get('chart.border') ? 25 : 0);
+        this.diameter = 2 * this.radius;
+        this.centerx  = this.canvas.width / 2;
+        this.centery  = this.canvas.height / 2;
+        this.range    = this.end - this.start;
+
+        this.context.lineWidth = this.Get('chart.linewidth');
+
+        // Draw the background
+        this.DrawBackground();
+
+        // And lastly, draw the labels
+        this.DrawLabels();
+
+        // Draw the needle
+        this.DrawNeedle(this.value, this.Get('chart.needle.color'));
+        
+        /**
+        * Draw any extra needles
+        */
+        if (this.Get('chart.needle.extra').length > 0) {
+            for (var i=0; i 0) {
+            this.context.beginPath();
+            this.context.lineWidth = this.Get('chart.linewidth');
+            this.context.strokeStyle = this.Get('chart.strokestyle');
+
+            for (var i=0,len=this.angles.length; i 270 ? 2 : -2) : 0),
+                            this.centery + (((this.radius + 10) * Math.sin(a / 57.3))),
+                            labels[i],
+                            vAlignment,
+                            hAlignment);
+            }
+            
+            context.fill();
+        }
+    }
+
+
+    /**
+    * This function draws the pie chart sticks (for the labels)
+    */
+    RGraph.Pie.prototype.DrawSticks = function ()
+    {
+        var context  = this.context;
+        var segments = this.Get('chart.segments');
+        var offset   = this.Get('chart.linewidth') / 2;
+
+        for (var i=0; i 0 && this.Get('chart.key').length >= 3) {
+            this.centerx = this.centerx - this.Get('chart.gutter') + 5;
+        }
+
+        this.DrawBackground();
+        this.DrawRose();
+        this.DrawLabels();
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+        /**
+        * Tooltips
+        */
+        if (this.Get('chart.tooltips')) {
+
+            /**
+            * Register this object for redrawing
+            */
+            RGraph.Register(this);
+        
+            /**
+            * The onclick event
+            */
+            var canvas_onclick_func = function (e)
+            {
+                var obj     = e.target.__object__;
+                var canvas  = e.target;
+                var context = canvas.getContext('2d');
+
+                e = RGraph.FixEventObject(e);
+
+                RGraph.Redraw();
+                
+                var segment = RGraph.getSegment(e);
+                if (segment && obj.Get('chart.tooltips')[segment[5]]) {
+                    context.beginPath();
+                        context.strokeStyle = 'black';
+                        context.fillStyle = 'rgba(255,255,255,0.5)';
+                        context.arc(segment[0], segment[1], segment[2], segment[3] / 57.3, segment[4] / 57.3, false);
+                        context.lineTo(obj.centerx, obj.centery);
+                    context.closePath();
+                    context.fill();
+                    context.stroke();
+                    
+                    context.strokeStyle = 'rgba(0,0,0,0)';
+                    obj.DrawLabels();
+                    
+                    /**
+                    * Show the tooltip
+                    */
+                    RGraph.Tooltip(canvas, obj.Get('chart.tooltips')[segment[5]], e.pageX, e.pageY, segment[5]);
+
+                    e.stopPropagation();
+
+                    return;
+                }
+            }
+            this.canvas.addEventListener('click', canvas_onclick_func, false);
+            RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
+
+
+            /**
+            * The onmousemove event
+            */
+            var canvas_onmousemove_func = function (e)
+            {
+                var obj     = e.target.__object__;
+                var canvas  = e.target;
+                var context = canvas.getContext('2d');
+
+                e = RGraph.FixEventObject(e);
+                
+                var segment = RGraph.getSegment(e);
+
+                if (segment && obj.Get('chart.tooltips')[segment[5]]) {
+                    canvas.style.cursor = 'pointer';
+                    return;
+                }
+
+                canvas.style.cursor = 'default';
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+
+        
+        /**
+        * This function enables adjusting
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+    /**
+    * This method draws the rose charts background
+    */
+    RGraph.Rose.prototype.DrawBackground = function ()
+    {
+        this.context.lineWidth = 1;
+    
+        // Draw the background grey circles
+        this.context.strokeStyle = '#ccc';
+        for (var i=15; i -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r - this.Get('chart.gutter')) * 0.2), String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r - this.Get('chart.gutter')) * 0.4), String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r - this.Get('chart.gutter')) * 0.6), String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r - this.Get('chart.gutter')) * 0.8), String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r + this.Get('chart.gutter'), String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+        }
+
+        // The "South" axis labels
+        if (axes.indexOf('s') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r - this.Get('chart.gutter')) * 0.2), String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r - this.Get('chart.gutter')) * 0.4), String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r - this.Get('chart.gutter')) * 0.6), String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r - this.Get('chart.gutter')) * 0.8), String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r - this.Get('chart.gutter'), String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+        }
+        
+        // The "East" axis labels
+        if (axes.indexOf('e') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r - this.Get('chart.gutter')) * 0.2), this.centery, String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r - this.Get('chart.gutter')) * 0.4), this.centery, String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r - this.Get('chart.gutter')) * 0.6), this.centery, String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r - this.Get('chart.gutter')) * 0.8), this.centery, String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + r - this.Get('chart.gutter'), this.centery, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+        }
+
+        // The "West" axis labels
+        if (axes.indexOf('w') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r - this.Get('chart.gutter')) * 0.2), this.centery, String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r - this.Get('chart.gutter')) * 0.4), this.centery, String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r - this.Get('chart.gutter')) * 0.6), this.centery, String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r - this.Get('chart.gutter')) * 0.8), this.centery, String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - r + this.Get('chart.gutter'), this.centery, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
+        }
+
+        RGraph.Text(context, font_face, font_size, this.centerx,  this.centery, typeof(this.Get('chart.ymin')) == 'number' ? String(Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals'))) : '0', 'center', 'center', true, false, color);
+    }
+
+
+    /**
+    * Draws the circular labels that go around the charts
+    * 
+    * @param labels array The labels that go around the chart
+    */
+    RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r)
+    {
+        var position = this.Get('chart.labels.position');
+        var r        = r - this.Get('chart.gutter') + 10;
+
+        for (var i=0; i 0 && this.Get('chart.key').length >= 3) {
+            this.centerx = this.centerx - this.Get('chart.gutter') + 5;
+        }
+        
+        /**
+        * Populate the colors array for the purposes of generating the key
+        */
+        if (typeof(this.Get('chart.key')) == 'object' && RGraph.is_array(this.Get('chart.key')) && this.Get('chart.key')[0]) {
+            for (var i=0; i (xCoord - offset) &&
+                        mouseY < (yCoord + offset) &&
+                        mouseY > (yCoord - offset) &&
+                        typeof(tooltip) == 'string' &&
+                        tooltip.length > 0
+                       ) {
+
+                        overHotspot = true;
+                        canvas.style.cursor = 'pointer';
+
+                        if (!RGraph.Registry.Get('chart.tooltip') || RGraph.Registry.Get('chart.tooltip').__text__ != tooltip) {
+    
+                            if (obj.Get('chart.tooltips.highlight')) {
+                                RGraph.Redraw();
+                            }
+    
+                            /**
+                            * Get the tooltip text
+                            */
+                            if (typeof(tooltip) == 'function') {
+                                var text = String(tooltip(i));
+    
+                            } else {
+                                var text = String(tooltip);
+                            }
+    
+                            RGraph.Tooltip(canvas, text, event.pageX + 5, event.pageY - 5, i);
+    
+                            /**
+                            * Highlight the tickmark
+                            */
+                            if (obj.Get('chart.tooltips.highlight')) {
+                                context.beginPath();
+                                context.fillStyle = 'rgba(255,255,255,0.5)';
+                                context.arc(xCoord, yCoord, 3, 0, 6.2830, 0);
+                                context.fill();
+                            }
+                        }
+                    }
+                }
+                
+                if (!overHotspot) {
+                    canvas.style.cursor = 'default';
+                }
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+
+        // Draw the title if any has been set
+        if (this.Get('chart.title')) {
+            RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.Get('chart.gutter'), this.centerx, this.Get('chart.text.size') + 2);
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+    /**
+    * This method draws the rose charts background
+    */
+    RGraph.Rscatter.prototype.DrawBackground = function ()
+    {
+        this.context.lineWidth = 1;
+    
+        // Draw the background grey circles
+        this.context.strokeStyle = '#ccc';
+        for (var i=15; i -1) {
+            RGraph.Text(context,font_face,font_size,this.centerx,this.centery - ((r) * 0.2),String(this.scale[0]),'center','center',true,false,color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        // The "South" axis labels
+        if (axes.indexOf('s') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.2), String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+        
+        // The "East" axis labels
+        if (axes.indexOf('e') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        // The "West" axis labels
+        if (axes.indexOf('w') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+        
+        // Draw the center minimum value (but only if there's at least one axes labels stipulated)
+        if (this.Get('chart.labels.axes').length > 0) {
+            RGraph.Text(context, font_face, font_size, this.centerx,  this.centery, this.Get('chart.ymin') > 0 ? String(this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals'))) : '0', 'center', 'center', true, false, color);
+        }
+
+        /**
+        * Draw the key
+        */
+        if (key && key.length) {
+            RGraph.DrawKey(this, key, this.Get('chart.colors'));
+        }
+    }
+
+
+    /**
+    * Draws the circular labels that go around the charts
+    * 
+    * @param labels array The labels that go around the chart
+    */
+    RGraph.Rscatter.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r)
+    {
+        var position = this.Get('chart.labels.position');
+        var r        = r + 10;
+
+        for (var i=0; i 0) {
+
+            this.scale = [];
+            this.max   = this.Get('chart.ymax');
+            this.min   = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0;
+
+            this.scale[0] = ((this.max - this.min) * (1/5)) + this.min;
+            this.scale[1] = ((this.max - this.min) * (2/5)) + this.min;
+            this.scale[2] = ((this.max - this.min) * (3/5)) + this.min;
+            this.scale[3] = ((this.max - this.min) * (4/5)) + this.min;
+            this.scale[4] = ((this.max - this.min) * (5/5)) + this.min;
+
+            var decimals = this.Get('chart.scale.decimals');
+
+            this.scale = [
+                          Number(this.scale[0]).toFixed(decimals),
+                          Number(this.scale[1]).toFixed(decimals),
+                          Number(this.scale[2]).toFixed(decimals),
+                          Number(this.scale[3]).toFixed(decimals),
+                          Number(this.scale[4]).toFixed(decimals)
+                         ];
+
+        } else {
+
+            var i = 0;
+            var j = 0;
+
+            for (i=0; i= (xCoord - offset) &&
+                            mouseCoords[1] <= (yCoord + offset) &&
+                            mouseCoords[1] >= (yCoord - offset) &&
+                            tooltip &&
+                            tooltip.length > 0) {
+        
+                            overHotspot = true;
+                            canvas.style.cursor = 'pointer';
+    
+                            if (
+                                !RGraph.Registry.Get('chart.tooltip') ||
+                                RGraph.Registry.Get('chart.tooltip').__text__ != tooltip ||
+                                RGraph.Registry.Get('chart.tooltip').__index__ != i ||
+                                RGraph.Registry.Get('chart.tooltip').__dataset__ != set
+                               ) {
+                                
+                                if (obj.Get('chart.tooltips.highlight')) {
+                                    RGraph.Redraw();
+                                }
+
+                                /**
+                                * Get the tooltip text
+                                */
+                                if (typeof(tooltip) == 'function') {
+                                    var text = String(tooltip(i));
+        
+                                } else {
+                                    var text = String(tooltip);
+                                }
+
+                                RGraph.Tooltip(canvas, text, e.pageX, e.pageY, i);
+                                RGraph.Registry.Get('chart.tooltip').__dataset__ = set;
+                                
+                                /**
+                                * Draw a circle around the mark
+                                */
+                                if (obj.Get('chart.tooltips.highlight')) {
+                                    context.beginPath();
+                                    context.fillStyle = 'rgba(255,255,255,0.5)';
+                                    context.arc(xCoord, yCoord, 3, 0, 6.28, 0);
+                                    context.fill();
+                                }
+                            }
+                        }
+                    }
+                }
+
+                /**
+                * Reset the pointer
+                */
+                if (!overHotspot) {
+                    canvas.style.cursor = 'default';
+                }
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+        
+        
+        /**
+        * Draw the key if necessary
+        */
+        if (this.Get('chart.key') && this.Get('chart.key').length) {
+            RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.line.colors'));
+        }
+
+
+        /**
+        * Draw crosschairs
+        */
+        RGraph.DrawCrosshairs(this);
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+
+    /**
+    * Draws the axes of the scatter graph
+    */
+    RGraph.Scatter.prototype.DrawAxes = function ()
+    {
+        var canvas      = this.canvas;
+        var context     = this.context;
+        var graphHeight = this.canvas.height - (this.Get('chart.gutter') * 2);
+        var gutter      = this.Get('chart.gutter');
+
+        context.beginPath();
+        context.strokeStyle = this.Get('chart.axis.color');
+        context.lineWidth   = 1;
+
+        // Draw the Y axis
+        if (this.Get('chart.yaxispos') == 'left') {
+            context.moveTo(gutter, gutter);
+            context.lineTo(gutter, this.canvas.height - gutter);
+        } else {
+            context.moveTo(canvas.width - gutter, gutter);
+            context.lineTo(canvas.width - gutter, canvas.height - gutter);
+        }
+
+
+        // Draw the X axis
+        if (this.Get('chart.xaxis')) {
+            if (this.Get('chart.xaxispos') == 'center') {
+                context.moveTo(gutter, canvas.height / 2);
+                context.lineTo(canvas.width - gutter, canvas.height / 2);
+            } else {
+                context.moveTo(gutter, canvas.height - gutter);
+                context.lineTo(canvas.width - gutter, canvas.height - gutter);
+            }
+        }
+
+        /**
+        * Draw the Y tickmarks
+        */
+        for (y=gutter; y < canvas.height - gutter + (this.Get('chart.xaxispos') == 'center' ? 1 : 0) ; y+=(graphHeight / 5) / 2) {
+
+            // This is here to accomodate the X axis being at the center
+            if (y == (canvas.height / 2) ) continue;
+
+            if (this.Get('chart.yaxispos') == 'left') {
+                context.moveTo(gutter, y);
+                context.lineTo(gutter - 3, y);
+            } else {
+                context.moveTo(canvas.width - gutter +3, y);
+                context.lineTo(canvas.width - gutter, y);
+            }
+        }
+
+
+        /**
+        * Draw the X tickmarks
+        */
+        if (this.Get('chart.xticks') && this.Get('chart.xaxis')) {
+
+            var x  = 0;
+            var y  =  (this.Get('chart.xaxispos') == 'center') ? (this.canvas.height / 2) : (this.canvas.height - gutter);
+            this.xTickGap = (this.canvas.width - (2 * gutter) ) / this.Get('chart.labels').length;
+    
+            for (x = (gutter + (this.Get('chart.yaxispos') == 'left' ? this.xTickGap / 2 : 0) ); x<=(canvas.width - gutter - (this.Get('chart.yaxispos') == 'left' ? 0 : 1)); x += this.xTickGap / 2) {
+                
+                if (this.Get('chart.yaxispos') == 'left' && this.Get('chart.noendxtick') == true && x == (canvas.width - gutter) ) {
+                    continue;
+                
+                } else if (this.Get('chart.yaxispos') == 'right' && this.Get('chart.noendxtick') == true && x == gutter) {
+                    continue;
+                }
+
+                context.moveTo(x, y - (this.Get('chart.xaxispos') == 'center' ? 3 : 0));
+                context.lineTo(x, y + 3);
+            }
+        }
+
+        context.stroke();
+    }
+
+
+    /**
+    * Draws the labels on the scatter graph
+    */
+    RGraph.Scatter.prototype.DrawLabels = function ()
+    {
+        this.context.fillStyle = this.Get('chart.text.color');
+        var font       = this.Get('chart.text.font');
+        var xMin       = this.Get('chart.xmin');
+        var xMax       = this.Get('chart.xmax');
+        var yMax       = this.scale[4];
+        var gutter     = this.Get('chart.gutter');
+        var text_size  = this.Get('chart.text.size');
+        var units_pre  = this.Get('chart.units.pre');
+        var units_post = this.Get('chart.units.post');
+        var numYLabels = this.Get('chart.ylabels.count');
+        var context    = this.context;
+        var canvas     = this.canvas;
+
+        this.halfTextHeight = text_size / 2;
+
+            
+        this.halfGraphHeight = (this.canvas.height - (2 * this.Get('chart.gutter'))) / 2;
+
+        /**
+        * Draw the Y yaxis labels, be it at the top or center
+        */
+        if (this.Get('chart.ylabels')) {
+
+            var xPos  = this.Get('chart.yaxispos') == 'left' ? gutter - 5 : canvas.width - gutter + 5;
+            var align = this.Get('chart.yaxispos') == 'right' ? 'left' : 'right';
+
+            if (this.Get('chart.xaxispos') == 'center') {
+
+
+                /**
+                * Specific Y labels
+                */
+                if (typeof(this.Get('chart.ylabels.specific')) == 'object') {
+                
+                    var labels = this.Get('chart.ylabels.specific');
+                
+                    for (var i=0; i= 5) {
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (1/10) ), RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', align);
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (3/10) ), RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', align);
+                    }
+        
+                    if (numYLabels >= 3) {
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (2/10) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', align);
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (4/10) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', align);
+                    }
+                    
+                    // Draw the bottom halves labels
+                    if (numYLabels >= 3) {
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (1/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', align);
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (3/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', align);
+                    }
+        
+                    if (numYLabels == 5) {
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (2/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', align);
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (4/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', align);
+                    }
+        
+                    RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (5/10) ) + this.halfGraphHeight, '-' + RGraph.number_format(this, this.scale[4], units_pre, units_post), 'center', align);
+                
+                } else if (numYLabels == 10) {
+                    // 10 Y labels
+                    var interval = (this.grapharea / numYLabels) / 2;
+                
+                    for (var i=0; i= 5) {
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (1/5) ), RGraph.number_format(this, this.scale[3], units_pre, units_post), 'center', align);
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (3/5) ), RGraph.number_format(this, this.scale[1], units_pre, units_post), 'center', align);
+                    }
+    
+                    if (numYLabels >= 3) {
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (2/5) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), 'center', align);
+                        RGraph.Text(context, font, text_size, xPos, gutter + ((canvas.height - (2 * gutter)) * (4/5) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), 'center', align);
+                    }
+                } else if (numYLabels == 10) {
+
+                    // 10 Y labels
+                    var interval = (this.grapharea / numYLabels) / 2;
+                
+                    for (var i=0; i 0) {
+            angle  = -1 * this.Get('chart.text.angle');
+            valign = 'center';
+            halign = 'right';
+            yPos -= 10;
+        }
+
+        for (i=0; i= 2) {
+
+            this.context.lineCap     = 'round';
+            this.context.lineJoin    = 'round';
+            this.context.lineWidth   = this.GetLineWidth(i);// i is the index of the set of coordinates
+            this.context.strokeStyle = this.Get('chart.line.colors')[i];
+            this.context.beginPath();
+            
+            var len = this.coords[i].length;
+
+            for (var j=0; j (xCoord - 5)
+                        && y > (yCoord - 5)
+                        && y < (yCoord + 5)
+                       ) {
+
+                        if (!RGraph.Registry.Get('chart.tooltip') || RGraph.Registry.Get('chart.tooltip').__index__ != idx) {
+
+                            /**
+                            * Get the tooltip text
+                            */
+                            if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                                var text = String(obj.Get('chart.tooltips')(i));
+
+                            } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'function') {
+                                var text = String(obj.Get('chart.tooltips')[i](i));
+                            
+                            } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'string') {
+                                var text = String(obj.Get('chart.tooltips')[i]);
+
+                            } else {
+                                var text = null;
+                            }
+
+                            if (typeof(text) == 'string' && text.length) {
+                       
+                                overHotspot = true;
+                                obj.canvas.style.cursor = 'pointer';
+
+                                RGraph.Clear(obj.canvas);
+                                obj.Draw();
+                                
+                                if (obj.Get('chart.tooltips.highlight')) {
+                                    obj.context.beginPath();
+                                    obj.context.strokeStyle = 'gray';
+                                    obj.context.fillStyle   = 'white';
+                                    obj.context.arc(xCoord, yCoord, 2, 0, 6.28, 0);
+                                    obj.context.fill();
+                                    obj.context.stroke();
+                                }
+                                
+                                RGraph.Tooltip(obj.canvas, text, e.pageX, e.pageY, idx);
+                            }
+                        } else if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == idx) {
+                            overHotspot = true;
+                            obj.canvas.style.cursor = 'pointer';
+                        }
+                    }
+                }
+
+                if (!overHotspot) {
+                    obj.canvas.style.cursor = 'default';
+                }
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+    }
+
+
+    /**
+    * Gets the coordinates for a particular mark
+    * 
+    * @param  number i The index of the data (ie which one it is)
+    * @return array    A two element array of the coordinates
+    */
+    RGraph.Tradar.prototype.GetCoordinates = function (i)
+    {
+        // The number  of data points
+        var len = this.data.length;
+
+        // The magnitude of the data (NOT the x/y coords)
+        var mag = (this.data[i] / this.max) * (this.size / 2);
+
+        /**
+        * Get the angle
+        */
+        var angle = (6.28 / len) * i; // In radians
+
+        /**
+        * Work out the X/Y coordinates
+        */
+        var x = Math.cos(angle) * mag;
+        var y = Math.sin(angle) * mag;
+
+        /**
+        * Put the coordinate in the right quadrant
+        */
+        x = this.centerx + x;
+        y = this.centery + (i == 0 ? 0 : y);
+        
+        return [x,y];
+    }
+    
+    
+    /**
+    * This function adds the labels to the chart
+    */
+    RGraph.Tradar.prototype.DrawLabels = function ()
+    {
+        var labels = this.Get('chart.labels');
+
+        if (labels && labels.length > 0) {
+
+            this.context.lineWidth = 1;
+            this.context.fillStyle = this.Get('chart.text.color');
+            
+            var offsetx = this.Get('chart.labels.offsetx'); // Not used yet
+            var offsety = this.Get('chart.labels.offsety'); // Not used yet
+
+            for (var i=0; i -1) {
+            RGraph.Text(context,font_face,font_size,this.centerx,this.centery - (r * 0.2),String(this.scale[0]),'center','center',true,false,color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        // The "South" axis labels
+        if (axes.indexOf('s') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+        
+        // The "East" axis labels
+        if (axes.indexOf('e') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        // The "West" axis labels
+        if (axes.indexOf('w') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        RGraph.Text(context, font_face, font_size, this.centerx,  this.centery, '0', 'center', 'center', true, false, color);
+    }
\ No newline at end of file
diff --git a/libraries/RGraph.vprogress.js b/libraries/RGraph.vprogress.js
new file mode 100644
index 0000000..1003d9b
--- /dev/null
+++ b/libraries/RGraph.vprogress.js
@@ -0,0 +1,554 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The progress bar constructor
+    * 
+    * @param int id    The ID of the canvas tag
+    * @param int value The indicated value of the meter.
+    * @param int max   The end value (the upper most) of the meter
+    */
+    RGraph.VProgress = function (id, value, max)
+    {
+        this.id                = id;
+        this.max               = max;
+        this.value             = value;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext('2d');
+        this.canvas.__object__ = this;
+        this.type              = 'vprogress';
+        this.coords            = [];
+        this.isRGraph          = true;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+        this.properties = {
+            'chart.colors':             ['#0c0'],
+            'chart.tickmarks':          true,
+            'chart.tickmarks.color':    'black',
+            'chart.tickmarks.inner':    false,
+            'chart.gutter':             25,
+            'chart.numticks':           10,
+            'chart.numticks.inner':     50,
+            'chart.background.color':   '#eee',
+            'chart.shadow':             false,
+            'chart.shadow.color':       'rgba(0,0,0,0.5)',
+            'chart.shadow.blur':        3,
+            'chart.shadow.offsetx':     3,
+            'chart.shadow.offsety':     3,
+            'chart.title':              '',
+            'chart.title.background':   null,
+            'chart.title.hpos':         null,
+            'chart.title.vpos':         null,
+            'chart.width':              0,
+            'chart.height':             0,
+            'chart.text.size':          10,
+            'chart.text.color':         'black',
+            'chart.text.font':          'Verdana',
+            'chart.contextmenu':        null,
+            'chart.units.pre':          '',
+            'chart.units.post':         '',
+            'chart.tooltips':           [],
+            'chart.tooltips.effect':    'fade',
+            'chart.tooltips.css.class': 'RGraph_tooltip',
+            'chart.tooltips.highlight': true,
+            'chart.tooltips.coords.adjust': [0,0],
+            'chart.annotatable':        false,
+            'chart.annotate.color':     'black',
+            'chart.zoom.mode':          'canvas',
+            'chart.zoom.factor':        1.5,
+            'chart.zoom.fade.in':       true,
+            'chart.zoom.fade.out':      true,
+            'chart.zoom.hdir':          'right',
+            'chart.zoom.vdir':          'down',
+            'chart.zoom.frames':        10,
+            'chart.zoom.delay':         50,
+            'chart.zoom.shadow':        true,
+            'chart.zoom.background':    true,
+            'chart.zoom.action':        'zoom',
+            'chart.arrows':             false,
+            'chart.margin':             0,
+            'chart.resizable':          false,
+            'chart.label.inner':        false,
+            'chart.labels.count':       10,
+            'chart.labels.position':    'right',
+            'chart.adjustable':         false,
+            'chart.min':                0,
+            'chart.scale.decimals':     0
+        }
+
+        // Check for support
+        if (!this.canvas) {
+            alert('[PROGRESS] No canvas support');
+            return;
+        }
+
+        // Check the common library has been included
+        if (typeof(RGraph) == 'undefined') {
+            alert('[PROGRESS] Fatal error: The common library does not appear to have been included');
+        }
+    }
+
+
+    /**
+    * A generic setter
+    * 
+    * @param string name  The name of the property to set
+    * @param string value The value of the poperty
+    */
+    RGraph.VProgress.prototype.Set = function (name, value)
+    {
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+    /**
+    * A generic getter
+    * 
+    * @param string name  The name of the property to get
+    */
+    RGraph.VProgress.prototype.Get = function (name)
+    {
+        return this.properties[name.toLowerCase()];
+    }
+
+
+    /**
+    * Draws the progress bar
+    */
+    RGraph.VProgress.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+        /**
+        * Clear all of this canvases event handlers (the ones installed by RGraph)
+        */
+        RGraph.ClearEventListeners(this.id);
+
+        // Figure out the width and height
+        this.width  = this.canvas.width - (2 * this.Get('chart.gutter'));
+        this.height = this.canvas.height - (2 * this.Get('chart.gutter'));
+        this.coords = [];
+
+        this.Drawbar();
+        this.DrawTickMarks();
+        this.DrawLabels();
+
+        this.context.stroke();
+        this.context.fill();
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+        
+        /**
+        * Alternatively, show the tooltip if requested
+        */
+        if (typeof(this.Get('chart.tooltips')) == 'function' || this.Get('chart.tooltips').length) {
+
+            // Need to register this object for redrawing
+            RGraph.Register(this);
+
+            /**
+            * Install the window onclick handler
+            */
+            window.onclick = function ()
+            {
+                RGraph.Redraw();
+            }
+
+
+            /**
+            * Install the onclick event handler for the tooltips
+            */
+            //this.canvas.onclick = function (e)
+            var canvas_onclick_func = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var canvas = document.getElementById(this.id);
+                var obj = canvas.__object__;
+
+                /**
+                * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
+                * This "deselects" any already selected bar
+                */
+                RGraph.Redraw();
+    
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(e);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0; i= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
+    
+                        /**
+                        * Get the tooltip text
+                        */
+                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
+                            var text = obj.Get('chart.tooltips')(idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
+                            var text = obj.Get('chart.tooltips')[idx](idx);
+                        
+                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
+                            var text = obj.Get('chart.tooltips')[idx];
+
+                        } else {
+                            var text = null;
+                        }
+
+                        /**
+                        * Show a tooltip if it's defined
+                        */
+                        if (text) {
+
+                            obj.context.beginPath();
+                            obj.context.strokeStyle = 'black';
+                            obj.context.fillStyle   = 'rgba(255,255,255,0.5)';
+                            obj.context.strokeRect(left, top, width, height);
+                            obj.context.fillRect(left, top, width, height);
+        
+                            obj.context.stroke();
+                            obj.context.fill();
+
+                            RGraph.Tooltip(canvas, text, e.pageX, e.pageY, i);
+                        }
+                    }
+                }
+
+                /**
+                * Stop the event bubbling
+                */
+                e.stopPropagation();
+            }
+            this.canvas.addEventListener('click', canvas_onclick_func, false);
+            RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
+
+
+            /**
+            * If the cursor is over a hotspot, change the cursor to a hand
+            */
+            //this.canvas.onmousemove = function (e)
+            var canvas_onmousemove_func = function (e)
+            {
+                e = RGraph.FixEventObject(e);
+
+                var canvas = document.getElementById(this.id);
+                var obj = canvas.__object__;
+
+                /**
+                * Get the mouse X/Y coordinates
+                */
+                var mouseCoords = RGraph.getMouseXY(e);
+
+                /**
+                * Loop through the bars determining if the mouse is over a bar
+                */
+                for (var i=0; i= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
+                        canvas.style.cursor = 'pointer';
+                        break;
+                    }
+                    
+                    canvas.style.cursor = 'default';
+                }
+            }
+            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+        }
+        
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+        
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+        
+        /**
+        * Instead of using RGraph.common.adjusting.js, handle them here
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+
+    /**
+    * Draw the bar itself
+    */
+    RGraph.VProgress.prototype.Drawbar = function ()
+    {
+        // Set a shadow if requested
+        if (this.Get('chart.shadow')) {
+            RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur'));
+        }
+
+        // Draw the shadow for MSIE
+        if (document.all && this.Get('chart.shadow')) {
+            this.context.fillStyle = this.Get('chart.shadow.color');
+            this.context.fillRect(this.Get('chart.gutter') + this.Get('chart.shadow.offsetx'), this.Get('chart.gutter') + this.Get('chart.shadow.offsety'), this.width, this.height);
+        }
+
+        // Draw the outline
+        this.context.fillStyle   = this.Get('chart.background.color');
+        this.context.strokeStyle = 'black';
+        this.context.strokeRect(this.Get('chart.gutter'), this.Get('chart.gutter'), this.width, this.height);
+        this.context.fillRect(this.Get('chart.gutter'), this.Get('chart.gutter'), this.width, this.height);
+
+        // Turn off any shadow
+        RGraph.NoShadow(this);
+
+        this.context.strokeStyle = 'black';
+        this.context.fillStyle   = this.Get('chart.colors')[0];
+        var margin = this.Get('chart.margin');
+        var barHeight = this.canvas.height - this.Get('chart.gutter') - this.Get('chart.gutter');
+
+        // Draw the actual bar itself
+        if (typeof(this.value) == 'number') {
+
+            this.context.lineWidth   = 1;
+            this.context.strokeStyle = '#999';
+
+        } else if (typeof(this.value) == 'object') {
+
+            this.context.beginPath();
+            this.context.strokeStyle = '#999';
+
+            var startPoint = this.canvas.height - this.Get('chart.gutter');
+            
+            for (var i=0; i
+ 
+
+
+

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

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

+Weather 
+
+Lighting 
+
+Music 
+
+Cameras 
+
+Security 
+
+Climate 
+
+News 
+
+Receipes 
+
+Groceries 
+
+Traffic 
+
+Power 
+

+

\ No newline at end of file
diff --git a/middle.html b/middle.html
new file mode 100644
index 0000000..a55a07f
--- /dev/null
+++ b/middle.html
@@ -0,0 +1 @@
+MIDDLE ACTIONS
diff --git a/news.html b/news.html
new file mode 100644
index 0000000..16dda0d
--- /dev/null
+++ b/news.html
@@ -0,0 +1,11 @@
+
+
+

+
+
+
+
+
+
+
+

diff --git a/news.php b/news.php
new file mode 100644
index 0000000..5552d8c
--- /dev/null
+++ b/news.php
@@ -0,0 +1,47 @@
+";
+$array=xml2array($output);
+$array2=xml2array($output2);
+$array3=xml2array($output3);
+$array4=xml2array($output4);
+#print_r($array4);
+
+#exit();
+
+#echo "
";
+echo "";
+  echo "";
+  echo "";
+  echo "";
+  echo "";
+  echo "";
+  echo "";
+echo "
".$array['rss']['channel']['title']."".$array2['rdf:RDF']['channel']['title']."".$array3['rss']['channel']['title']."".$array4['rss']['channel']['title']."
".$array['rss']['channel']['item']['0']['title']."".$array2['rdf:RDF']['item']['0']['title']."".$array3['rss']['channel']['item']['0']['title']."".$array4['rss']['channel']['item']['0']['title']."
".$array['rss']['channel']['item']['1']['title']."".$array2['rdf:RDF']['item']['1']['title']."".$array3['rss']['channel']['item']['1']['title']."".$array4['rss']['channel']['item']['1']['title']."
".$array['rss']['channel']['item']['2']['title']."".$array2['rdf:RDF']['item']['2']['title']."".$array3['rss']['channel']['item']['2']['title']."".$array4['rss']['channel']['item']['2']['title']."
".$array['rss']['channel']['item']['3']['title']."".$array2['rdf:RDF']['item']['3']['title']."".$array3['rss']['channel']['item']['3']['title']."".$array4['rss']['channel']['item']['3']['title']."
".$array['rss']['channel']['item']['4']['title']."".$array2['rdf:RDF']['item']['4']['title']."".$array3['rss']['channel']['item']['4']['title']."".$array4['rss']['channel']['item']['4']['title']."
";
+#echo "
";
+?>
diff --git a/other_icons/Security.jpg b/other_icons/Security.jpg
new file mode 100644
index 0000000..9d17359
Binary files /dev/null and b/other_icons/Security.jpg differ
diff --git a/other_icons/audio.jpg b/other_icons/audio.jpg
new file mode 100644
index 0000000..eada484
Binary files /dev/null and b/other_icons/audio.jpg differ
diff --git a/other_icons/audio.png b/other_icons/audio.png
new file mode 100644
index 0000000..3b4f857
Binary files /dev/null and b/other_icons/audio.png differ
diff --git a/other_icons/cameras.jpg b/other_icons/cameras.jpg
new file mode 100644
index 0000000..da15102
Binary files /dev/null and b/other_icons/cameras.jpg differ
diff --git a/other_icons/cameras.png b/other_icons/cameras.png
new file mode 100644
index 0000000..c325f0b
Binary files /dev/null and b/other_icons/cameras.png differ
diff --git a/other_icons/climate.jpg b/other_icons/climate.jpg
new file mode 100644
index 0000000..b597f9e
Binary files /dev/null and b/other_icons/climate.jpg differ
diff --git a/other_icons/climate.png b/other_icons/climate.png
new file mode 100644
index 0000000..5f465bb
Binary files /dev/null and b/other_icons/climate.png differ
diff --git a/other_icons/events.jpg b/other_icons/events.jpg
new file mode 100644
index 0000000..672f5c7
Binary files /dev/null and b/other_icons/events.jpg differ
diff --git a/other_icons/events.png b/other_icons/events.png
new file mode 100644
index 0000000..c388cfa
Binary files /dev/null and b/other_icons/events.png differ
diff --git a/other_icons/lighting.jpg b/other_icons/lighting.jpg
new file mode 100644
index 0000000..3b09c4a
Binary files /dev/null and b/other_icons/lighting.jpg differ
diff --git a/other_icons/lighting.png b/other_icons/lighting.png
new file mode 100644
index 0000000..c39cb88
Binary files /dev/null and b/other_icons/lighting.png differ
diff --git a/other_icons/power.jpg b/other_icons/power.jpg
new file mode 100644
index 0000000..86e955a
Binary files /dev/null and b/other_icons/power.jpg differ
diff --git a/other_icons/power.png b/other_icons/power.png
new file mode 100644
index 0000000..23d0c7e
Binary files /dev/null and b/other_icons/power.png differ
diff --git a/other_icons/status.jpg b/other_icons/status.jpg
new file mode 100644
index 0000000..451a25e
Binary files /dev/null and b/other_icons/status.jpg differ
diff --git a/other_icons/status.png b/other_icons/status.png
new file mode 100644
index 0000000..306509c
Binary files /dev/null and b/other_icons/status.png differ
diff --git a/pxweather.class.php b/pxweather.class.php
new file mode 100644
index 0000000..fef3ff1
--- /dev/null
+++ b/pxweather.class.php
@@ -0,0 +1,257 @@
+_city = $city;
+		$this->_force = $force;
+
+	}
+
+	function setOption($option, $value) {
+
+		switch($option) {
+			case EASYWEATHER_URL:
+				$this->_url = $value;
+				break;
+			case EASYWEATHER_CACHE:
+				$this->_cache = $value;
+				break;
+			case EASYWEATHER_CACHEFOR:
+				$this->_age = $value;
+				break;
+			case EASYWEATHER_CACHEAT:
+				$this->_cachepath = $value;
+				break;
+		}
+
+	}
+
+	/*
+	** Return a pretty-printed version of the XML array
+	*/
+	function toString($array = null) {
+
+		 if ($array == null) {
+			$array = $this->_xml;
+		 }
+
+		 echo "
";
+		 print_r($array);
+		 echo "
";
+	}
+
+	/*
+	** Return a specific field from the current weather report
+	*/
+	function getCurrent($field) {
+		$o = $this->_getObservation();
+
+		if (array_key_exists($field, $o)) {
+			return $o[$field];
+		}
+		else {
+			return null;
+		}
+	}
+
+	function getSunrise() {
+		$a = $this->_getAlmanac();
+
+		return $a["sunrise"];
+	}
+
+	function getSunset() {
+		$a = $this->_getAlmanac();
+
+		return $a["sunset"];
+	}
+
+	function getForecasts() {
+
+		// need to remove a layer of separation
+
+		$forecasts = $this->_xml["forexml"]["#"]["forecast"];
+
+		$returnArray = array();
+
+		$i = 0;
+
+		foreach ($forecasts as $forecast) {
+			$returnArray[$i] = $forecast["@"];
+			$i++;
+		}
+
+		return $returnArray;
+
+	}
+
+	function getDaycasts() {
+
+		// need to remove a layer of separation
+
+		$daycasts = $this->_xml["forexml"]["#"]["daycast"];
+
+		$returnArray = array();
+
+		$i = 0;
+
+		foreach ($daycasts as $daycast) {
+			$returnArray[$i] = $daycast["@"];
+			$i++;
+		}
+
+		return $returnArray;
+	}
+
+	/*
+	** Returns a weather condition string given a code (i.e 'TS')
+	*/
+	function weatherString($code) {
+
+		switch($code) {
+			case "TS":
+				return "Thunderstorms";
+				break;
+			case "RA":
+				return "Rain";
+				break;
+			case "MC":
+				return "Mostly cloudy";
+				break;
+			case "SU":
+				return "Sunny";
+				break;
+			case "MO":
+				return "Mostly clear";
+				break;
+			case "PC":
+				return "Partly cloudy";
+				break;
+			case "SN":
+				return "Snow";
+				break;
+			case "CL":
+				return "Overcast";
+				break;
+			case "FG":
+				return "Fog";
+				break;
+		}
+
+		return null;
+
+	}
+
+	function load() {
+
+		$filename = "$this->_cachepath/weather.$this->_city.cache";
+
+		// if not force, check cache for valid file
+		if (!$this->_force && $this->_cache) {
+
+			if (file_exists($filename)
+					&& filemtime($filename) > (time() - ($this->_age * 60))) {
+
+				$file = fopen($filename, "r");
+				$this->_xml = unserialize(fread($file, filesize($filename)));
+				fclose($file);
+
+				return;
+			}
+		}
+
+		// if force, or no valid cache file, get XML fresh
+
+		$this->_xml = $this->_getXML();
+
+		if ($this->_cache) {
+			$file = fopen($filename, "w");
+			fwrite($file, serialize($this->_xml));
+			fclose($file);
+		}
+
+	}
+
+	function _getXML() {
+
+		$ch = curl_init();
+		curl_setopt($ch, CURLOPT_URL,				$this->_url . "?" . $this->_city);
+		curl_setopt($ch, CURLOPT_HEADER,			false);
+		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 	true);
+
+		#echo $this->_url . "?" . $this->_city;
+		#exit;
+
+		$xml = curl_exec($ch);
+
+		#print_r($xml);
+		#exit;
+
+		if (curl_errno($ch)) {
+			trigger_error("cURL Error in Weather._getXML: " . curl_error($ch), E_WARNING);
+			return null;
+		}
+
+		curl_close($ch);
+
+		return xmlize($xml);
+
+	}
+
+	function _getObservation() {
+
+		return $this->_xml["forexml"]["#"]["observation"][0]["@"];
+
+	}
+
+	// array with keys "sunrise" and "sunset"
+	function _getAlmanac() {
+
+		return $this->_xml["forexml"]["#"]["almanac"][0]["@"];
+	}
+
+}
+	
+?>
diff --git a/pxweather/LICENSE.txt b/pxweather/LICENSE.txt
new file mode 100755
index 0000000..b860267
--- /dev/null
+++ b/pxweather/LICENSE.txt
@@ -0,0 +1,340 @@
+		    GNU GENERAL PUBLIC LICENSE
+		       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.
+                       51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+			    Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Library General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+		    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+			    NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+		     END OF TERMS AND CONDITIONS
+
+	    How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    
+    Copyright (C)   
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program; if not, write to the Free Software
+    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  , 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Library General
+Public License instead of this License.
diff --git a/pxweather/README.txt b/pxweather/README.txt
new file mode 100755
index 0000000..eb99501
--- /dev/null
+++ b/pxweather/README.txt
@@ -0,0 +1,302 @@
+pxWeather - Readme
+==================
+
+    A PHP class to retrieve, parse, and organize weather data for easy
+    access.
+	
+    Version 0.1
+    -----------
+    http://pxweather.abbett.org/
+    
+	
+        Copyright (C) 2005 Jonathan M. Abbett
+                           
+                           
+
+        This program is free software; you can redistribute it and/or modify 
+        it under the terms of the GNU General Public License version 2, as 
+        published by the Free Software Foundation.
+
+        This program is distributed in the hope that it will be useful, but 
+        WITHOUT ANY WARRANTY; without even the implied warranty of 
+        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU 
+        General Public License for more details.
+
+        You should have received a copy of the GNU General Public License
+        along with this program; if not, write to the Free Software
+        Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307
+        USA
+    
+    
+    Requirements:
+        PHP 4.1.0 or later, installed with cURL support
+        
+    
+    Summary:
+        pxWeather gives you easy access to National Weather Service forecasts
+        and current conditions for integration into your PHP application. To
+        improve performance and decrease load on the data source, pxWeather
+        can cache weather data locally.
+
+        
+    Download:
+        The latest version will always be available at
+        https://sourceforge.net/projects/pxweather/
+
+        
+    Credits:
+        Many thanks go to Hans Anderson for his XMLize utility, which makes
+        short work of XML parsing.  XMLize, which is included in this 
+        distribution, can be found at http://www.hansanderson.com/php/xml/
+
+        
+    Installation:
+        - Decompress your .zip or .tar.gz file.
+        - Copy pxweather.inc.php to your PHP-enabled website.
+        - If you use PHP5, copy xmlize-php5.inc.php to the same directory
+          on your website.  If you use PHP4, copy xmlize-php4.inc.php.
+        - If you intend to use caching, create a new directory for cache
+          files to live.  Make sure it has proper read/write permissions set.
+
+          (NOTE: by default, pxWeather will use the local subdirectory 
+          "cache" to read/write cache files. You may use pxWeather's
+          setOption method to set a different directory.)
+
+
+    Testing Your Installation:
+        Test your installation with the following bit of code.  This code
+        assumes it's running in the same directory as pxweather/xmlize and
+        that caching uses the default settings.
+        
+        load();
+            echo $w->getCurrent("temp.string");
+        
+        ?>
+        
+        When you run it, you should see the current temperature for
+        Boston, MA in degrees Farenheit and Celsius.
+
+        
+    Configuring pxWeather:
+        All pxWeather configuration is done through the class constructor
+        and the class's setOption method.  The examples below assume you've
+        already loaded pxweather.class.php, as above.
+        
+        To set a city other than Boston, MA, call the constructor with the
+        $city variable set:
+        
+        
+        
+        Sometimes, two cities (i.e. Portland, ME and Portland, OR) have the
+        same name.  So, in any case where there might be ambiguity, consider
+        using the ICAO location code for your city.  The FAA maintains a 
+        list of codes for the USA at
+        https://pilotweb.nas.faa.gov/qryhtml/icao/USA.html
+        
+        
+        
+        To force pxWeather to ignore its cache, and retrieve data directly
+        from the source, you can call the constructor with the $force 
+        variable set to true:
+        
+        
+        
+        Other, less-common settings can be changed with the setOption method.
+        For example, to disable caching:
+        
+        setOption("PXWEATHER_CACHE", false);
+            
+        ?>
+        
+        Four options may be set this way:
+        
+            PXWEATHER_URL         (URL)
+            The URL used to retrieve XML weather data.
+
+            PXWEATHER_CACHE       (true/false)
+            Enable/disable caching; enabled by default.
+
+            PXWEATHER_CACHEFOR    (number)
+            Number of minutes to keep cached data; 60 by default.
+
+            PXWEATHER_CACHEAT     (path)
+            The directory where cache files should be stored; 'cache' by
+            default.
+
+            
+    Accessing Data:
+        pxWeather extracts four kinds of data from the XML feed:
+        
+            1. Current conditions
+            2. Almanac times
+            3. Forecasts
+            4. Daycasts
+        
+        Current conditions can be retrieved with the getCurrent()
+        method, which takes a field name as argument.  The following are
+        valid field names:
+        
+            FIELD NAME         EXAMPLE VALUE
+            -----------------  ---------------------
+            city               Boston, MA
+	    longname           Boston, MA
+	    ident              KBOS
+	    latitude           42.37
+	    longitude          -71.03
+	    timezone           -5
+	    daylight_saving    1
+	    night              0
+	    weather_code       PC
+	    observation_name   KBOS (Boston, MA)
+	    time               5 PM EDT 24 JUN 05
+	    temp.string        86 F (30 C)
+	    temp.F             86
+	    temp.C             30
+	    dewpt.string       53 F (11 C)
+	    dewpt.F            53
+	    dewpt.C            11
+	    rel_hum.string     32 %
+	    rel_hum.percent    32
+	    wind.string        SW at 17 knt
+	    wind_direct        SW
+	    wind_speed.knt     17
+	    heat_index.F       84
+	    pressure.string    1016.7 mb (30.03 in)
+	    pressure.mb        1016.7
+	    pressure.in        30.03
+	    skies              mostly cloudy
+	    text_weather       haze
+	    
+	The example from above:
+	
+        load();
+            echo $w->getCurrent('temp.string');
+        
+        ?>
+        
+        Almanac times (sunrise, sunset) can be retrieved with the methods
+        getSunrise() and getSunset().  They take no arguments, and return
+        time strings in 12-hour format (i.e. 5:08 AM).
+        
+        Forecasts include a day name, a weather code, a low or high
+        temperature, and a text description of the forecast.  Forecasts for
+        approximately the next six days and nights can be retrieved with the
+        getForecasts() method, which takes no arguments.  The method returns
+        an array containing all forecasts.  The example below cycles through
+        each forecast, translates its weather code into a readable string
+        with the weatherString() method, and prints high/low temperatures
+        and text forecast.
+        
+        load();
+            
+            echo "
";
+            
+            foreach($w->getForecasts() as $forecast)
+            {
+                echo "FORECAST FOR " . $forecast['day']. ":\n";
+                echo $w->weatherString($forecast['weather']) . "\n";
+            	
+                if (isset($forecast['low_temp']))
+                    echo "Low temperature: " . $forecast['low_temp'] . "\n";
+
+                if (isset($forecast['high_temp']))
+                    echo "High temperature: " . $forecast['high_temp'] . "\n";
+            	    
+                echo "Description: " . $forecast['text'] . "\n\n";
+            	
+            }
+            
+            echo "
";
+        
+        ?>
+        
+        Daycasts are very similar to forecasts, but are not split into 
+        individual day and night reports and do not have text forecast
+        descriptions.  An example like above:
+        
+        load();
+            
+            echo "
";
+            
+            foreach($w->getDaycasts() as $daycast)
+            {
+                echo "DAYCAST FOR " . $daycast['day']. ":\n";
+                echo $w->weatherString($daycast['weather']) . "\n";
+
+                if (isset($daycast['low_temp']))
+                    echo "Low temperature: " . $daycast['low_temp'] . "\n";
+
+                if (isset($daycast['high_temp']))
+                    echo "High temperature: " . $daycast['high_temp'] . "\n\n";
+            }
+            
+            echo "
";
+        
+
+        ?>
+        
+        If you want to inspect the entire weather data structure, use the 
+        toString() method:
+        
+        load();
+            
+            $w->toString();
+        
+        ?>
+
+        
+    Feedback and Requests:
+        SourceForge hosts a variety of forums to express your constructive
+        feedback:
+        
+            - Feature Requests
+            http://sourceforge.net/tracker/?atid=753105&group_id=142667
+            - Support Requests
+            http://sourceforge.net/tracker/?atid=753103&group_id=142667
+            - Open Discussion
+            http://sourceforge.net/forum/forum.php?forum_id=477711
+            
+        All feedback and requests should be channeled through those outlets,
+        and not sent by e-mail.
+        
+        
+    Thank you for using pxWeather!
diff --git a/pxweather/pxweather.class.php b/pxweather/pxweather.class.php
new file mode 100755
index 0000000..1ec7697
--- /dev/null
+++ b/pxweather/pxweather.class.php
@@ -0,0 +1,251 @@
+_city = strtoupper($city);
+		$this->_force = $force;
+
+	}
+
+	function setOption($option, $value) {
+
+		switch($option) {
+			case EASYWEATHER_URL:
+				$this->_url = $value;
+				break;
+			case EASYWEATHER_CACHE:
+				$this->_cache = $value;
+				break;
+			case EASYWEATHER_CACHEFOR:
+				$this->_age = $value;
+				break;
+			case EASYWEATHER_CACHEAT:
+				$this->_cachepath = $value;
+				break;
+		}
+
+	}
+
+	/*
+	** Return a pretty-printed version of the XML array
+	*/
+	function toString($array = null) {
+
+		 if ($array == null) {
+			$array = $this->_xml;
+		 }
+
+		 echo "
";
+		 print_r($array);
+		 echo "
";
+	}
+
+	/*
+	** Return a specific field from the current weather report
+	*/
+	function getCurrent($field) {
+		$o = $this->_getObservation();
+
+		if (array_key_exists($field, $o)) {
+			return $o[$field];
+		}
+		else {
+			return null;
+		}
+	}
+
+	function getSunrise() {
+		$a = $this->_getAlmanac();
+
+		return $a["sunrise"];
+	}
+
+	function getSunset() {
+		$a = $this->_getAlmanac();
+
+		return $a["sunset"];
+	}
+
+	function getForecasts() {
+
+		// need to remove a layer of separation
+
+		$forecasts = $this->_xml["forexml"]["#"]["forecast"];
+
+		$returnArray = array();
+
+		$i = 0;
+
+		foreach ($forecasts as $forecast) {
+			$returnArray[$i] = $forecast["@"];
+			$i++;
+		}
+
+		return $returnArray;
+
+	}
+
+	function getDaycasts() {
+
+		// need to remove a layer of separation
+
+		$daycasts = $this->_xml["forexml"]["#"]["daycast"];
+
+		$returnArray = array();
+
+		$i = 0;
+
+		foreach ($daycasts as $daycast) {
+			$returnArray[$i] = $daycast["@"];
+			$i++;
+		}
+
+		return $returnArray;
+	}
+
+	/*
+	** Returns a weather condition string given a code (i.e 'TS')
+	*/
+	function weatherString($code) {
+
+		switch($code) {
+			case "TS":
+				return "Thunderstorms";
+				break;
+			case "RA":
+				return "Rain";
+				break;
+			case "MC":
+				return "Mostly cloudy";
+				break;
+			case "SU":
+				return "Sunny";
+				break;
+			case "MO":
+				return "Mostly clear";
+				break;
+			case "PC":
+				return "Partly cloudy";
+				break;
+			case "SN":
+				return "Snow";
+				break;
+			case "CL":
+				return "Overcast";
+				break;
+			case "FG":
+				return "Fog";
+				break;
+		}
+
+		return null;
+
+	}
+
+	function load() {
+
+		$filename = "$this->_cachepath/weather.$this->_city.cache";
+
+		// if not force, check cache for valid file
+		if (!$this->_force && $this->_cache) {
+
+			if (file_exists($filename)
+					&& filemtime($filename) > (time() - ($this->_age * 60))) {
+
+				$file = fopen($filename, "r");
+				$this->_xml = unserialize(fread($file, filesize($filename)));
+				fclose($file);
+
+				return;
+			}
+		}
+
+		// if force, or no valid cache file, get XML fresh
+
+		$this->_xml = $this->_getXML();
+
+		if ($this->_cache) {
+			$file = fopen($filename, "w");
+			fwrite($file, serialize($this->_xml));
+			fclose($file);
+		}
+
+	}
+
+	function _getXML() {
+
+		$ch = curl_init();
+		curl_setopt($ch, CURLOPT_URL,				$this->_url . "?" . $this->_city);
+		curl_setopt($ch, CURLOPT_HEADER,			false);
+		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 	true);
+
+		$xml = curl_exec($ch);
+
+		if (curl_errno($ch)) {
+			trigger_error("cURL Error in Weather._getXML: " . curl_error($ch), E_WARNING);
+			return null;
+		}
+
+		curl_close($ch);
+
+		return xmlize($xml);
+
+	}
+
+	function _getObservation() {
+
+		return $this->_xml["forexml"]["#"]["observation"][0]["@"];
+
+	}
+
+	// array with keys "sunrise" and "sunset"
+	function _getAlmanac() {
+
+		return $this->_xml["forexml"]["#"]["almanac"][0]["@"];
+	}
+
+}
+	
+?>
\ No newline at end of file
diff --git a/pxweather/xmlize-php4.inc.php b/pxweather/xmlize-php4.inc.php
new file mode 100755
index 0000000..f73aaa3
--- /dev/null
+++ b/pxweather/xmlize-php4.inc.php
@@ -0,0 +1,168 @@
+' . implode("", $traverse_array . '
';
+ *
+ *
+ */ 
+
+function traverse_xmlize($array, $arrName = "array", $level = 0) {
+
+    foreach($array as $key=>$val)
+    {
+        if ( is_array($val) )
+        {
+            traverse_xmlize($val, $arrName . "[" . $key . "]", $level + 1);
+        } else {
+            $GLOBALS['traverse_array'][] = '$' . $arrName . '[' . $key . '] = "' . $val . "\"\n";
+        }
+    }
+
+    return 1;
+
+}
+
+?>
\ No newline at end of file
diff --git a/pxweather/xmlize-php5.inc.php b/pxweather/xmlize-php5.inc.php
new file mode 100755
index 0000000..42e509c
--- /dev/null
+++ b/pxweather/xmlize-php5.inc.php
@@ -0,0 +1,174 @@
+ attached is the modified script. Basically it has a new optional parameter
+	> to specify an OUTPUT encoding. If not specified, it defaults to UTF-8.
+	> I recommend you to read this PHP bug. There you can see how PHP4, PHP5.0.0
+	> and PHP5.0.2 will handle this.
+	> http://bugs.php.net/bug.php?id=29711
+	> Ciao, Eloy :-)
+ ##
+ *
+ */
+
+function xmlize($data, $WHITE=1, $encoding='UTF-8') {
+
+    $data = trim($data);
+    $vals = $index = $array = array();
+    $parser = xml_parser_create($encoding);
+    xml_parser_set_option($parser, XML_OPTION_CASE_FOLDING, 0);
+    xml_parser_set_option($parser, XML_OPTION_SKIP_WHITE, $WHITE);
+    xml_parse_into_struct($parser, $data, $vals, $index);
+    xml_parser_free($parser);
+
+    $i = 0;
+
+    $tagname = $vals[$i]['tag'];
+    if ( isset ($vals[$i]['attributes'] ) )
+    {
+        $array[$tagname]['@'] = $vals[$i]['attributes'];
+    } else {
+        $array[$tagname]['@'] = array();
+    }
+
+    $array[$tagname]["#"] = xml_depth($vals, $i);
+
+
+    return $array;
+}
+
+/*
+ *
+ * You don't need to do anything with this function, it's called by
+ * xmlize.  It's a recursive function, calling itself as it goes deeper
+ * into the xml levels.  If you make any improvements, please let me know.
+ *
+ *
+ */
+
+function xml_depth($vals, &$i) {
+    $children = array();
+
+    if ( isset($vals[$i]['value']) )
+    {
+        array_push($children, $vals[$i]['value']);
+    }
+
+    while (++$i < count($vals)) {
+
+        switch ($vals[$i]['type']) {
+
+           case 'open':
+
+                if ( isset ( $vals[$i]['tag'] ) )
+                {
+                    $tagname = $vals[$i]['tag'];
+                } else {
+                    $tagname = '';
+                }
+
+                if ( isset ( $children[$tagname] ) )
+                {
+                    $size = sizeof($children[$tagname]);
+                } else {
+                    $size = 0;
+                }
+
+                if ( isset ( $vals[$i]['attributes'] ) ) {
+                    $children[$tagname][$size]['@'] = $vals[$i]["attributes"];
+
+                }
+
+                $children[$tagname][$size]['#'] = xml_depth($vals, $i);
+
+            break;
+
+
+            case 'cdata':
+                array_push($children, $vals[$i]['value']);
+            break;
+
+            case 'complete':
+                $tagname = $vals[$i]['tag'];
+
+                if( isset ($children[$tagname]) )
+                {
+                    $size = sizeof($children[$tagname]);
+                } else {
+                    $size = 0;
+                }
+
+                if( isset ( $vals[$i]['value'] ) )
+                {
+                    $children[$tagname][$size]["#"] = $vals[$i]['value'];
+                } else {
+                    $children[$tagname][$size]["#"] = '';
+                }
+
+                if ( isset ($vals[$i]['attributes']) ) {
+                    $children[$tagname][$size]['@']
+                                             = $vals[$i]['attributes'];
+                }
+
+            break;
+
+            case 'close':
+                return $children;
+            break;
+        }
+
+    }
+
+        return $children;
+
+
+}
+
+
+/* function by acebone@f2s.com, a HUGE help!
+ *
+ * this helps you understand the structure of the array xmlize() outputs
+ *
+ * usage:
+ * traverse_xmlize($xml, 'xml_');
+ * print '
' . implode("", $traverse_array . '
';
+ *
+ *
+ */
+
+function traverse_xmlize($array, $arrName = "array", $level = 0) {
+
+    foreach($array as $key=>$val)
+    {
+        if ( is_array($val) )
+        {
+            traverse_xmlize($val, $arrName . "[" . $key . "]", $level + 1);
+        } else {
+            $GLOBALS['traverse_array'][] = '$' . $arrName . '[' . $key . '] = "' . $val . "\"\n";
+        }
+    }
+
+    return 1;
+
+}
+
+?>
\ No newline at end of file
diff --git a/right-arrow.html b/right-arrow.html
new file mode 100644
index 0000000..efc1ff2
--- /dev/null
+++ b/right-arrow.html
@@ -0,0 +1,46 @@
+
+
+
+
+
diff --git a/rotate-weather.php b/rotate-weather.php
new file mode 100644
index 0000000..bcb4868
--- /dev/null
+++ b/rotate-weather.php
@@ -0,0 +1,6 @@
+

+
+
+
+

diff --git a/russ.txt b/russ.txt
new file mode 100644
index 0000000..c227083
--- /dev/null
+++ b/russ.txt
@@ -0,0 +1 @@
+0
\ No newline at end of file
diff --git a/security1.html b/security1.html
new file mode 100644
index 0000000..f92965e
--- /dev/null
+++ b/security1.html
@@ -0,0 +1,19 @@
+
+
+
+
+

+CAM1
+
+CAM2
+
+CAM3
+
+CAM4
+
+CAM5
+
+CAM6
+
+CAM7
+

diff --git a/set_climate_status.php b/set_climate_status.php
new file mode 100644
index 0000000..b60de24
--- /dev/null
+++ b/set_climate_status.php
@@ -0,0 +1,35 @@
+$device,
+  'submit'=>$state
+);
+
+foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
+rtrim($fields_string,'&');
+
+
+$ch = curl_init();
+
+curl_setopt($ch, CURLOPT_URL,"http://isy99/change");
+
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
+curl_setopt($ch, CURLOPT_USERPWD, 'admin:admin');
+curl_setopt($ch,CURLOPT_POST,count($fields));
+curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);
+
+
+
+
+$output = curl_exec($ch);
+
+#echo "
";
+
+#print_r($output);
+
+exit;
+
+?>
diff --git a/set_isy99i_status.php b/set_isy99i_status.php
new file mode 100644
index 0000000..dc54072
--- /dev/null
+++ b/set_isy99i_status.php
@@ -0,0 +1,48 @@
+$device,
+  'submit'=>$state
+);
+
+foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
+rtrim($fields_string,'&');
+
+$ch = curl_init();
+
+if ("nodes"==substr($device,0,5)) {
+  $string="http://isy99/rest/nodes/".rawurlencode(substr($device,-10))."/cmd/$state";
+} else  {
+  if ($state=="DON") {
+    $state="runThen";
+  } else {
+    $state="runElse";
+  }
+  $string="http://isy99/rest/programs/".rawurlencode(substr($device,-4))."/$state";
+}
+curl_setopt($ch, CURLOPT_URL,"$string");
+
+#echo "-$string-";
+#exit;
+
+#echo "http://isy99/rest/nodes/$device/cmd/$state";
+
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
+curl_setopt($ch, CURLOPT_USERPWD, 'admin:admin');
+curl_setopt($ch, CURLOPT_HEADER, 0);
+#curl_setopt($ch,CURLOPT_POST,count($fields));
+#curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);
+
+
+
+$output = curl_exec($ch);
+
+#echo "
";
+
+#print_r($output);
+
+#curl_close($ch);
+?>
diff --git a/set_summon_status.php b/set_summon_status.php
new file mode 100644
index 0000000..9850723
--- /dev/null
+++ b/set_summon_status.php
@@ -0,0 +1,10 @@
+
diff --git a/thermometer-blank-black.png b/thermometer-blank-black.png
new file mode 100644
index 0000000..584c4b8
Binary files /dev/null and b/thermometer-blank-black.png differ
diff --git a/thermometer-blank.png b/thermometer-blank.png
new file mode 100644
index 0000000..0242c0e
Binary files /dev/null and b/thermometer-blank.png differ
diff --git a/thermometer.php b/thermometer.php
new file mode 100644
index 0000000..c4befa1
--- /dev/null
+++ b/thermometer.php
@@ -0,0 +1,403 @@
+
+//
+// New with version 1.01 - $autoScale = true; enables autoranging on output scale.  The program will
+// add majortick values to maximum or substract majortick values from minimum to always show the
+// scale, current, minimum, maximum on the graphic.
+//------------ settings ------------------
+$wxSoftware         = 'WD';                           // 'WD' for Weather-Display, 'VWS' for Virtual Weather Station,
+                                                      // 'CU' for Cumulus
+//
+$UOM = 'F';                                           // set to 'C' for Celsius/Centigrade, 'F'=Fahrenheit
+//
+$autoScale = true;                                    // set to false to disable autoscale.
+//
+// you only have to set one of these correctly based on the $useWD selection
+// $wxSoftware = 'WD' : set the $clientrawfile
+// $wxSoftware = 'VWS': set the $wflashDir
+// $wxSoftware = 'CU': set the $realtimefile
+//
+$clientrawfile = './clientraw.txt';                // relative file address for WD clientraw.txt
+$wflashDir     = './wflash/Data/';                 // directory for the the VWS wflash.txt and wflash2.txt files
+//                                                 // relative to directory location of this script (include
+//                                                 // trailing '/' in the specification
+$realtimefile  = './realtime.txt';                 // relative file location for Cumulus realtime.txt file
+//
+// settings for ranges -- adjust for your climate :-)
+// Fahrenheit settings
+$TmaxF = 105;     // maximum °F temperature on thermometer
+$TminF = 10;      // minimum °F temperature on thermometer
+$TincrF = 5;      // increment number of degrees °F for major/minor ticks on thermometer
+$TMajTickF = 10;  // major tick with value when °F scale number divisible by this
+// Centigrade settings
+$TmaxC = 40;      // maximum °C temperature on thermometer
+$TminC = -10;     // minimum °C temperature on thermometer
+$TincrC = 2;      // increment number of degrees °C for major/minor ticks on thermometer
+$TMajTickC = 10;  // major tick with value when °C scale number divisible by this
+//
+$invertColor = true; // set to true if thermometer display is over black background
+$BlankGraphic  = './thermometer-blank.png'; // relative file address for thermometer blank image PNG
+$BlankGraphicBlack = './thermometer-blank-black.png'; // for black background use
+//------------ end settings --------------
+// overrides from Settings.php if available
+if(file_exists("Settings.php")) { include_once("Settings.php"); }
+global $SITE;
+if (isset($SITE['uomTemp'])) 	{
+  $UOM = preg_replace('|°|is','',$SITE['uomTemp']);
+  if ($UOM <> 'F' and $UOM <> 'C') { $UOM = 'F'; }
+}
+if (isset($SITE['clientrawfile']) ) {$clientrawfile = $SITE['clientrawfile']; }
+if (isset($SITE['wflashdir']) ) {$wflashDir = $SITE['wflashdir']; }
+if (isset($SITE['realtimefile']) ) {$realtimefile = $SITE['realtimefile']; }
+$CSSstyle = '';
+# was there a style selected from the form input
+if (isset($_COOKIE['CSSstyle'])) {
+       $_SESSION['CSSstyle'] = $_COOKIE['CSSstyle'];
+       $CSSstyle = $_COOKIE['CSSstyle'];
+  } else if (isset($_SESSION['CSSstyle']) and $_SESSION['CSSstyle'] <> '' ) {
+       $CSSstyle = $_SESSION['CSSstyle'];
+  }
+if (preg_match('|black|i',$CSSstyle) ) {
+	$invertColor = true; 
+}
+// end of overrides from Settings.php
+
+// -------------------begin code ------------------------------------------
+if (isset($_REQUEST['sce']) && strtolower($_REQUEST['sce']) == 'view' ) {
+   //--self downloader --
+   $filenameReal = __FILE__;
+   $download_size = filesize($filenameReal);
+   header('Pragma: public');
+   header('Cache-Control: private');
+   header('Cache-Control: no-cache, must-revalidate');
+   header("Content-type: text/plain");
+   header("Accept-Ranges: bytes");
+   header("Content-Length: $download_size");
+   header('Connection: close');
+   
+   readfile($filenameReal);
+   exit;
+}
+
+if( ! function_exists("gd_info")){
+  die("Sorry.. this script requires the GD library in PHP to function.");
+}
+
+
+if (isset($_REQUEST['sw']) and strtolower($_REQUEST['sw']) == 'wd') { $wxSoftware = 'WD'; } // testing
+if (isset($_REQUEST['sw']) and strtolower($_REQUEST['sw']) == 'vws') { $wxSoftware = 'VWS'; } // testing
+if (isset($_REQUEST['sw']) and strtolower($_REQUEST['sw']) == 'cu') { $wxSoftware = 'CU'; } // testing
+
+if (isset($_REQUEST['uom']) and strtolower($_REQUEST['uom']) == 'c') { $UOM = 'C'; }
+if (isset($_REQUEST['uom']) and strtolower($_REQUEST['uom']) == 'f') { $UOM = 'F'; }
+if (isset($_REQUEST['dark'])) {$invertColor = strtolower($_REQUEST['dark'])=='y'; }
+
+if ($wxSoftware == 'WD') { // Get the Weather-Display clientraw.txt data file
+
+      //$dataraw = file_get_contents($clientrawfile);
+
+      // clean up any blank lines
+      
+      #$dataraw = trim($dataraw);
+      $dataraw = preg_replace("/[\r\n]+[\s\t]*[\r\n]+/","\n",$dataraw);
+      $data = explode(" ", $dataraw);
+	  
+	  //$curtemp = CtoF('50',1);
+	  //$mintemp = CtoF('20',1);
+	  //$maxtemp = CtoF('80',1);
+	  #$curtemp = '';
+	  $curtemp = $_GET['t'];
+	  $mintemp = $_GET['mint'];
+	  $maxtemp = $_GET['maxt'];
+	  
+  } // end Weather Display data
+  
+if ($wxSoftware == 'VWS') { // Get the VWS Weather Flash data files
+  
+      $filename = "${wflashDir}wflash.txt";
+      $file = file($filename);
+      $file = implode('',$file);
+      $data = explode(",",$file);;
+  
+	  $curtemp = FtoC($data[9],1);
+	  
+      $filename = "${wflashDir}wflash2.txt";
+      $file = file($filename);
+      $file = implode('',$file);
+      $data = explode(",",$file);;
+	  
+	  $mintemp = FtoC($data[92],1);
+	  $maxtemp = FtoC($data[36],1);
+   }
+
+if ($wxSoftware == 'CU') { // Get the Cumulus realtime.txt file
+  
+      $dataraw = file_get_contents($realtimefile);
+
+      // clean up any blank lines
+      $dataraw = trim($dataraw);
+      $dataraw = preg_replace("/[\r\n]+[\s\t]*[\r\n]+/","\n",$dataraw);
+      $data = explode(" ", $dataraw);
+	  $inUOM = $data[14];
+      if ($inUOM == 'F' and $UOM == 'C') {
+		$curtemp = FtoC($data[2],1);
+		$mintemp = FtoC($data[28],1);
+		$maxtemp = FtoC($data[26],1);
+	  } elseif ($inUOM == 'C' and $UOM == 'F') {
+		$curtemp = CtoF($data[2],1);
+		$mintemp = CtoF($data[28],1);
+		$maxtemp = CtoF($data[26],1);
+	  } else {
+		$curtemp = $data[2];
+		$mintemp = $data[28];
+		$maxtemp = $data[26];
+		$UOM = $inUOM;
+	  }
+   }
+
+if (isset($_REQUEST['current'])) { $curtemp = $_REQUEST['current']; } // for testing
+if (isset($_REQUEST['min'])) { $mintemp = $_REQUEST['min']; } // for testing
+if (isset($_REQUEST['max'])) { $maxtemp = $_REQUEST['max']; } // for testing
+
+
+if ($UOM == 'F') { // use Fahrenheit settings
+    $Tmax = $TmaxF;   // maximum temperature on thermometer
+    $Tmin = $TminF;    // minimum temperature on thermometer
+    $Tincr = $TincrF;    // increment number of degrees for major/minor ticks on thermometer
+    $TMajTick = $TMajTickF;// major tick with value when scale number divisible by this
+  } else { // use Centigrade settings
+    $Tmax = $TmaxC;    // maximum temperature on thermometer
+    $Tmin = $TminC;   // minimum temperature on thermometer
+    $Tincr = $TincrC;    // increment number of degrees for major/minor ticks on thermometer
+    $TMajTick = $TMajTickC;// major tick with value when scale number divisible by this
+}
+
+      if($autoScale) { autoscale($curtemp,$mintemp,$maxtemp); }
+	  
+      genThermometer($curtemp, $mintemp,$maxtemp); // make graphic!
+	  
+return;
+	  
+// ----------- functions ----------------------------------------------------------
+//
+function genThermometer( $current,$min,$max ) {
+
+   global $UOM,$BlankGraphic,$BlankGraphicBlack,$wxSoftware,$invertColor;
+   global  $Tmax,$Tmin,$Tincr,$TMajTick;
+
+// draw a filled thermometer with scale, min max on a blank thermometer image
+ $BGfile = $invertColor?$BlankGraphicBlack:$BlankGraphic;
+ $image = LoadPNG($BGfile);
+ 
+ // settings relative to the thermometer image file defines the drawing area
+ // for the thermometer filling
+ // these settings are SPECIFICALLY for the thermometer-blank.png image background
+ 
+ $minX = 20; // left
+ $maxX = 24; // right
+ $minY = 20; // top
+ $maxY = 140;// bottom
+ 
+
+ $width = imagesx($image);
+ $height = imagesy($image);
+ $font = 1;
+
+ $bg    = imagecolorallocate($image,255,255,255 );
+ $tx    = imagecolorallocate($image,0,0,0);
+ $blue  = imagecolorallocate($image,0,0,255);
+ $red   = imagecolorallocate($image,255,0,0);
+ if ($invertColor) {
+   $tx    = imagecolorallocate($image,255,255,255);
+   $blue  = imagecolorallocate($image,0,192,255);
+   $red   = imagecolorallocate($image,255,32,32);
+ }
+  
+ $Trange = $Tmax - $Tmin; // total temperature range
+ 
+ $Tpct = ($current-$Tmin)/($Trange); // percent for current temperature of range
+  
+ $Y = (1-$Tpct)*($maxY-$minY)+$minY; // upper location for fill
+  
+// fill the thermometer with a red bar from bottom to $Y 
+  imagefilledrectangle( $image,
+                 $minX,
+                 $Y,
+                 $maxX,
+                 $maxY,
+                 $red );
+				 
+// Draw tick marks and scale values on right
+			 
+ for ($T=$Tmin;$T<=$Tmax;$T+=$Tincr) {
+   
+     $Tpct = ($T-$Tmin)/($Trange);
+     $Y = (1-$Tpct)*($maxY-$minY)+$minY;
+	 
+	 if ($T == 0 or ($T % $TMajTick) == 0) { // Major Tick
+	 
+	    imagefilledrectangle( $image,
+            $maxX+7 ,
+            $Y ,
+            $maxX+12,
+            $Y +1, $tx );
+
+        imagestring($image, $font,
+            $maxX + 14,
+            $Y - (ImageFontHeight($font)/2),
+            sprintf( "%2d", $T),$tx);
+	 } else { // Minor tick
+     	imagefilledrectangle( $image,
+            $maxX+7,
+            $Y ,
+            $maxX+9,
+            $Y +1, $tx );
+	 }
+
+ 
+ } // end do ticks legend
+ 
+ if(isset($min)) { // put on minimum temp bar/value
+ 
+//     $Tpct = ($min-$Tmin)/($Trange);
+     $Tpct = ( ( (float)$min-$Tmin )/ $Trange );
+     $Y = (1-$Tpct)*($maxY-$minY)+$minY;
+	 imagefilledrectangle( $image,
+            $minX - 18,
+            $Y ,
+            $minX - 5,
+           $Y +1, $blue );
+      $tstr = sprintf('%2d',round($min,0));
+	  $tsize = strlen($tstr)*imagefontwidth($font+1);
+      imagestring($image, $font+1,
+            $minX - $tsize - 3 ,
+            $Y + 2 ,
+            $tstr,$blue);
+
+ }
+ 
+ if(isset($max)) { // put on maximum temp bar/value
+ 
+     $Tpct = ($max-$Tmin)/($Trange);
+     $Y = (1-$Tpct)*($maxY-$minY)+$minY;
+	 imagefilledrectangle( $image,
+            $minX - 18,
+            $Y ,
+            $minX - 5,
+            $Y +1, $red );
+ 
+      $tstr = sprintf('%2d',round($max,0));
+	  $tsize = strlen($tstr)*imagefontwidth($font+1);
+
+      imagestring($image, $font+1,
+            $minX - $tsize - 3 ,
+            $Y - imagefontheight($font+1),
+            $tstr,$red);
+ }
+
+ // put legend on top with UOM
+ 
+    $cnt = '°' . $UOM;
+    imagestring( $image, $font+2, ($width/2)-((strlen($cnt)/2)*ImageFontWidth($font+2)),
+       (10-(ImageFontHeight($font+2) / 2)),
+       $cnt, $tx);
+
+// write current temperature on thermometer bulb	
+//    $tstr = sprintf('%2d',round($current,0));
+//	$tsize = strlen($cnt)*imagefontwidth($font);
+
+//    imagestring($image, $font,
+//            ($minX+$maxX)/2 - $tsize/2 -2 ,
+//            $maxY+6,
+//            $tstr,$bg);
+
+	
+//imagestring( $image, $font, ($width/2)-((strlen($wxSoftware)/2)*imagefontwidth($font)),
+//   $height-imagefontheight($font),
+//	$wxSoftware,$tx);
+
+ // send the image
+ header("content-type: image/png");
+ imagepng($image);
+ imagedestroy($image);
+
+} // end genThermometer
+
+// load PNG image 
+function LoadPNG ($imgname) { 
+   $im = @imagecreatefrompng ($imgname); /* Attempt to open */ 
+   if (!$im) { /* See if it failed */ 
+       $im  = imagecreate (150, 30); /* Create a blank image */ 
+       $bgc = imagecolorallocate ($im, 255, 255, 255); 
+       $tc  = imagecolorallocate ($im, 0, 0, 0); 
+       imagefilledrectangle ($im, 0, 0, 150, 30, $bgc); 
+       /* Output an errmsg */ 
+       imagestring ($im, 1, 5, 5, "Error loading $imgname", $tc); 
+   } 
+   return $im; 
+} 
+
+// CtoF: converts degrees Celcius to degress Farenheight (from Anolecomputing.com)
+function CtoF($value, $precision) {
+  global $UOM;
+  if ($UOM <> 'F') { 
+    return round($value,$precision); 
+  } else { 
+    return round($value = (($value * 9 / 5) + 32),$precision); 
+  }
+} // end function C_to_F
+
+// FtoC: converts degress Farenheight to degrees Celcius  (from Anolecomputing.com)
+function FtoC($value, $precision) {
+  global $UOM;
+  if ($UOM == 'F') { 
+    return round($value,$precision); 
+  } else { 
+    return round(($value - 32) * (5/9),$precision); 
+  }
+} // end function F to C
+
+// autoscale function .. adjust scale to fit current conditions if need be.
+
+function autoscale($curtemp,$mintemp,$maxtemp) {
+
+   global  $Tmax,$Tmin,$Tincr,$TMajTick;
+   
+   $highest = max($curtemp,$Tmax,$maxtemp);
+   $lowest = min($curtemp,$Tmin,$mintemp);
+   
+   
+   while ($Tmax < $highest) {
+     $Tmax += $TMajTick;
+   }
+  
+   while ($Tmin > $lowest) {
+     $Tmin = $Tmin - $TMajTick;
+   }
+   
+   return;
+
+
+}
+?>
diff --git a/title_status.php b/title_status.php
new file mode 100644
index 0000000..83aef8a
--- /dev/null
+++ b/title_status.php
@@ -0,0 +1,22 @@
+Inside:";
+  $ch = curl_init();
+  curl_setopt($ch, CURLOPT_URL,"http://isy99/rest/nodes/2C%20B%202B%201");
+
+  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+  curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
+  curl_setopt($ch, CURLOPT_USERPWD, 'admin:admin');
+
+  $output = curl_exec($ch);
+  $array=xml2array($output);
+  #echo "
";
+  #print_r($array);
+  #exit;
+  echo substr(($array['nodeInfo']['node']['property']['0_attr']['formatted']),0,-1)." F";
+?>
diff --git a/top.html b/top.html
new file mode 100644
index 0000000..f929fdc
--- /dev/null
+++ b/top.html
@@ -0,0 +1 @@
+
diff --git a/traffic-iframe.html b/traffic-iframe.html
new file mode 100644
index 0000000..4f7111f
--- /dev/null
+++ b/traffic-iframe.html
@@ -0,0 +1,46 @@
+
+
+  
+    
+    Google Maps JavaScript API Example: Traffic Overlays
+    
+    
+  
+
+  
+    

+    

+    

+    
+    

+  
+
+
diff --git a/traffic.html b/traffic.html
new file mode 100644
index 0000000..f499ec6
--- /dev/null
+++ b/traffic.html
@@ -0,0 +1 @@
+