source: Dev/branches/Cartis/Tiles preview/js/RGraph/docs/led.html @ 283

Last change on this file since 283 was 283, checked in by tjcschipper, 13 years ago

Cartis Mockup werkt!

W
I
N
N
I
N
G
File size: 9.8 KB
Line 
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: Javascript charts and graph library - LED Grid documentation</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas charts docs LED chart" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about LED charts" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
29
30    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31    <link rel="icon" type="image/png" href="../images/favicon.png">
32
33    <script>
34      var _gaq = _gaq || [];
35      _gaq.push(['_setAccount', 'UA-54706-2']);
36      _gaq.push(['_trackPageview']);
37   
38      (function() {
39        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
40        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
41        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
42      })();
43    </script>
44
45</head>
46<body>
47
48    <!-- Social networking buttons -->
49        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
50            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
51            <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
52        </div>
53
54        <script>
55            // Opera fix
56            if (navigator.userAgent.indexOf('Opera') == -1) {
57              document.getElementById("social_icons").style.position = 'fixed';
58            }
59        </script>
60    <!-- Social networking buttons -->
61
62    <div id="breadcrumb">
63        <a href="../index.html">RGraph: Javascript charts and graph library</a>
64        >
65        <a href="index.html">Documentation</a>
66        >
67        LED Grids
68    </div>
69
70    <h1>RGraph: <span>Javascript charts and graph library</span> - LED Grid documentation</h1>
71
72    <script>
73        if (RGraph.isIE8()) {
74            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
75        }
76    </script>
77
78    <p>
79        The LED grid can be used to represent simple letters and numbers.
80    </p>
81   
82    <p>
83        The example file is <a href="../examples/led.html">here</a>.
84    </p>
85   
86    <pre class="code">
87&lt;script&gt;
88    window.onload = function ()
89    {
90        var led = new RGraph.LED('myCanvas', '456461');
91        led.Set('chart.dark', '#666');
92        led.Set('chart.light', 'rgba(255,255,255,1)');
93        led.Draw();
94    }
95&lt;/script&gt;
96</pre>
97
98    <h2>Properties</h2>
99   
100    <p>
101        You can use these properties to control how the LED grid apears.
102    </p>
103   
104    <ul>
105        <li><a href="#chart configuration">Chart configuration</a></li>
106        <li><a href="#interactive features">Interactive features</a></li>
107        <li><a href="#zoom">Zoom</a></li>
108    </ul>
109
110
111<a name="chart configuration"></a>
112<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>
113<b>chart.dark</b><br />
114            Color of the darkened (ie unlit) lights<br /><i>Default: #eee</i><br /><br />
115            <a name="chart.light"></a>
116<b>chart.light</b><br />
117            Color of lit lights<br /><i>Default: #f66</i><br /><br />
118            <a name="chart.background"></a>
119<b>chart.background</b><br />
120            The color of the background.<br /><i>Default: white</i><br /><br />
121<a name="interactive features"></a>
122<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>
123
124
125
126            <a name="chart.resizable"></a>
127            <b>chart.resizable</b><br />
128            Defaulting to false, this determines whether your chart 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 />
129            <i>Default: false</i><br /><br />
130
131            <a name="chart.resize.handle.background"></a>
132            <b>chart.resize.handle.background</b><br />
133            With this you can specify the background color for the resize handle. If you're adjusting the position of the
134            handle then you may need this to make the handle stand out more.<br />
135            <i>Default: null</i><br /><br />
136
137
138<a name="zoom"></a>
139<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>
140<b>chart.zoom.mode</b><br />
141            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 />
142            <a name="chart.zoom.factor"></a>
143<b>chart.zoom.factor</b><br />
144            This is the factor that the chart will be zoomed by (bigger values means more zoom)<br /><i>Default: 1.5</i><br /><br />
145            <a name="chart.zoom.fade.in"></a>
146<b>chart.zoom.fade.in</b><br />
147            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 />
148            <a name="chart.zoom.fade.out"></a>
149<b>chart.zoom.fade.out</b><br />
150            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 />
151            <a name="chart.zoom.hdir"></a>
152<b>chart.zoom.hdir</b><br />
153            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 />
154            <a name="chart.zoom.vdir"></a>
155<b>chart.zoom.vdir</b><br />
156            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 />
157            <a name="chart.zoom.delay"></a>
158<b>chart.zoom.delay</b><br />
159            The delay (in milliseconds) between frames.<br /><i>Default: 50</i><br /><br />
160            <a name="chart.zoom.frames"></a>
161<b>chart.zoom.frames</b><br />
162            The number of frames in the zoom animation.<br /><i>Default: 10</i><br /><br />
163            <a name="chart.zoom.shadow"></a>
164<b>chart.zoom.shadow</b><br />
165            Whether or not the zoomed canvas has a shadow or not.<br /><i>Default: true</i><br /><br />
166            <a name="chart.zoom.thumbnail.width"></a>
167<b>chart.zoom.thumbnail.width</b><br />
168            When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
169            <a name="chart.zoom.thumbnail.height"></a>
170<b>chart.zoom.thumbnail.height</b><br />
171            When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br /><i>Default: 75</i><br /><br />
172            <a name="chart.zoom.background"></a>
173<b>chart.zoom.background</b><br />
174            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 />
175</div><!-- /DOCS --><br /><br />
176
177</body>
178</html>
Note: See TracBrowser for help on using the repository browser.