RGraph/docs/led.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <!--
   7         /**
   8         * o------------------------------------------------------------------------------o
   9         * | This file is part of the RGraph package - you can learn more at:             |
  10         * |                                                                              |
  11         * |                          http://www.rgraph.net                               |
  12         * |                                                                              |
  13         * | This package is licensed under the RGraph license. For all kinds of business |
  14         * | purposes there is a small one-time licensing fee to pay and for non          |
  15         * | commercial  purposes it is free to use. You can read the full license here:  |
  16         * |                                                                              |
  17         * |                      http://www.rgraph.net/LICENSE.txt                       |
  18         * o------------------------------------------------------------------------------o
  19         */
  20     -->
  21     <title>RGraph: HTML5 canvas graph library - LED Grid documentation</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs LED chart" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about the LED chart" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="../images/favicon.png">
  28 </head>
  29 <body>
  30
  31     <!-- Social networking buttons -->
  32     <script src="../libraries/RGraph.common.core.js" ></script>
  33
  34     <script>
  35         function HideTwitterDIV ()
  36         {
  37             document.getElementById("twitter_div").style.opacity = 0;
  38             document.getElementById("twitter_div").style.display = 'none';
  39         }
  40
  41
  42         function ShowTwitterDIV (e)
  43         {
  44             var e   = RGraph.FixEventObject(document.all ? event : e);
  45             var div = document.getElementById("twitter_div");
  46             var img = document.getElementById("twitter_icon");
  47
  48             div.style.display = 'block';
  49             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  50             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  51
  52             /**
  53             * Fade it in
  54             */
  55             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  56             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  57             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  58             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  59             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  60
  61             e.stopPropagation();
  62
  63             return false;
  64         }
  65
  66         /**
  67         * This code installs the event handler that hides the Twitter DIV
  68         */
  69         if (RGraph.isIE8()) {
  70              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  71         } else {
  72             window.addEventListener('click', HideTwitterDIV, false);
  73         }
  74     </script>
  75
  76     <!-- The twitter DIV -->
  77     <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
  78         <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
  79         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  80     </div>
  81
  82     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  83         <script>
  84             // Opera fix
  85             if (navigator.userAgent.indexOf('Opera') == -1) {
  86               document.getElementById("social_icons").style.position = 'fixed';
  87               document.getElementById("twitter_div").style.position = 'fixed';
  88
  89             }
  90         </script>
  91
  92         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
  93
  94
  95             <div id="social">
  96                 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
  97                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
  98                 </a>
  99
 100                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 101                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 102                 </a>
 103
 104
 105 <!--
 106                 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
 107                     <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 108                 </a>
 109
 110
 111                 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
 112                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 113                 </a>
 114
 115                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 116                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 117                 </a>
 118
 119                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 120                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 121                 </a>
 122 -->
 123             </div>
 124     </div>
 125     <!-- /Social networking buttons -->
 126
 127     <div id="breadcrumb">
 128         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 129         >
 130         <a href="index.html">Documentation</a>
 131         >
 132         LED Grid
 133     </div>
 134
 135     <h1>RGraph: HTML5 canvas graph library - LED Grid documentation</h1>
 136
 137     <script>
 138         if (RGraph.isIE8()) {
 139             document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
 140         }
 141     </script>
 142
 143     <p>
 144         The LED grid can be used to represent simple letters and numbers.
 145     </p>
 146
 147     <p>
 148         The example file is <a href="../examples/led.html">here</a>.
 149     </p>
 150
 151     <pre class="code">
 152 &lt;script&gt;
 153     window.onload = function ()
 154     {
 155         var led = new RGraph.LED('myCanvas', '456461');
 156         led.Set('chart.dark', '#666');
 157         led.Set('chart.light', 'rgba(255,255,255,1)');
 158         led.Draw();
 159     }
 160 &lt;/script&gt;
 161 </pre>
 162
 163     <h2>Properties</h2>
 164
 165     <p>
 166         You can use these properties to control how the LED grid apears.
 167     </p>
 168
 169     <ul>
 170         <li><a href="#chart configuration">Chart configuration</a></li>
 171         <li><a href="#interactive features">Interactive features</a></li>
 172         <li><a href="#zoom">Zoom</a></li>
 173     </ul>
 174
 175
 176 <a name="chart configuration"></a>
 177 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Chart configuration</h3>            <a name="chart.dark"></a>
 178 <b>chart.dark</b><br />
 179             Color of the darkened (ie unlit) lights<br /><i>Default: #eee</i><br /><br />
 180             <a name="chart.light"></a>
 181 <b>chart.light</b><br />
 182             Color of lit lights<br /><i>Default: #f66</i><br /><br />
 183             <a name="chart.background"></a>
 184 <b>chart.background</b><br />
 185             The color of the background.<br /><i>Default: white</i><br /><br />
 186 <a name="interactive features"></a>
 187 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Interactive features</h3>            <a name="chart.resizable"></a>
 188 <b>chart.resizable</b><br />
 189             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).<br /><i>Default: false</i><br /><br />
 190 <a name="zoom"></a>
 191 <h3 style="border: 1px solid #aaa; background-color: #eee; font-style: italic; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px">Zoom</h3>            <a name="chart.zoom.mode"></a>
 192 <b>chart.zoom.mode</b><br />
 193             Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: <i>thumbnail</i> and <i>canvas</i>.<br /><i>Default: canvas</i><br /><br />
 194             <a name="chart.zoom.factor"></a>
 195 <b>chart.zoom.factor</b><br />
 196             This is the factor that the graph will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
 197             <a name="chart.zoom.fade.in"></a>
 198 <b>chart.zoom.fade.in</b><br />
 199             Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
 200             <a name="chart.zoom.fade.out"></a>
 201 <b>chart.zoom.fade.out</b><br />
 202             Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.<br /><i>Default: true</i><br /><br />
 203             <a name="chart.zoom.hdir"></a>
 204 <b>chart.zoom.hdir</b><br />
 205             The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br /><i>Default: right</i><br /><br />
 206             <a name="chart.zoom.vdir"></a>
 207 <b>chart.zoom.vdir</b><br />
 208             The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br /><i>Default: down</i><br /><br />
 209             <a name="chart.zoom.delay"></a>
 210 <b>chart.zoom.delay</b><br />
 211             The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
 212             <a name="chart.zoom.frames"></a>
 213 <b>chart.zoom.frames</b><br />
 214             The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
 215             <a name="chart.zoom.shadow"></a>
 216 <b>chart.zoom.shadow</b><br />
 217             Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
 218             <a name="chart.zoom.thumbnail.width"></a>
 219 <b>chart.zoom.thumbnail.width</b><br />
 220             When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
 221             <a name="chart.zoom.thumbnail.height"></a>
 222 <b>chart.zoom.thumbnail.height</b><br />
 223             When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
 224             <a name="chart.zoom.background"></a>
 225 <b>chart.zoom.background</b><br />
 226             Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br /><i>Default: true</i><br /><br />
 227 </div><!-- /DOCS --><br /><br />
 228
 229 </body>
 230 </html>