source: Dev/trunk/RGraph/docs/thermometer.html @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 12.6 KB
RevLine 
[77]1<!DOCTYPE html>
2<html> 
3<head> 
4    <meta http-equiv="X-UA-Compatible" content="chrome=1">
5    <!--
6        /**
7        * o------------------------------------------------------------------------------o
8        * | This file is part of the RGraph package - you can learn more at:             |
9        * |                                                                              |
10        * |                          http://www.rgraph.net                               |
11        * |                                                                              |
12        * | This package is licensed under the RGraph license. For all kinds of business |
13        * | purposes there is a small one-time licensing fee to pay and for non          |
14        * | commercial  purposes it is free to use. You can read the full license here:  |
15        * |                                                                              |
16        * |                      http://www.rgraph.net/LICENSE.txt                       |
17        * o------------------------------------------------------------------------------o
18        */
19    -->
20    <title>RGraph: Javascript charts and graph library - thermometer documentation</title>
21   
22    <meta name="keywords" content="rgraph html5 canvas chart docs thermometer chart" />
23    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about the Thermometer charts" />
24   
25    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
26    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
27    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
28 
29    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
30    <link rel="icon" type="image/png" href="../images/favicon.png">
31
32    <script>
33      var _gaq = _gaq || [];
34      _gaq.push(['_setAccount', 'UA-54706-2']);
35      _gaq.push(['_trackPageview']);
36   
37      (function() {
38        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
39        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
40        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
41      })();
42    </script>
43
44</head>
45<body>
46
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        Thermometer charts
68    </div>
69 
70    <h1>RGraph: <span>Javascript charts and graph library</span> - Thermometer charts documentation</h1>
71    <script>
72        if (RGraph.isIE8()) {
73            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>');
74        }
75    </script>
76 
77    <p>
78        Thermometer charts, along with progress bars, are a prime candidate for use in a status panel. Much like the progress bars,
79        but the design may be better suited to your application/website etc.
80    </p>
81   
82    <p>
83        The example file is <a href="../examples/thermometer.html">here</a>.
84    </p>
85
86    <ul>
87        <li><a href="#available.properties">Properties</a></li>
88    </ul>
89
90    <pre class="code">
91&lt;script&gt;
92    window.onload = function ()
93    {
94        var thermometer = new RGraph.Thermometer('myCanvas', data);
95        thermometer.Set('chart.gutter.left', 45);
96        thermometer.Set('chart.gutter.right', 45);
97        thermometer.Set('chart.colors', ['rgba(255,0,0,1)']);
98        thermometer.Draw();
99    }
100&lt;/script&gt;
101</pre>
102
103    <a name="available.properties"></a>
104    <h2>Properties</h2>
105 
106    <p>
107        You can use these properties to control how the chart apears. You can set them by using the Set() method. Eg:
108    </p>
109   
110    <p>
111        <b>myBar.Set('name', 'value');</b>
112    </p>
113   
114    <ul>
115        <li><a href="#margins">Margins</a></li>
116        <li><a href="#colors">Colors</a></li>
117        <li><a href="#labels">Labels and text</a></li>
118        <li><a href="#shadow">Shadow</a></li>
119        <li><a href="#interactive">Interactive features</a></li>
120        <li><a href="#zoom">Zoom</a></li>
121    </ul>
122
123
124<a name="margins"></a>
125<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">Margins</h3>
126
127            <a name="chart.gutter.left"></a>
128            <b>chart.gutter.left</b><br />
129            The left gutter of the chart, (the gutter is where the labels and title are)).<br />
130            <i>Default: 15</i><br /><br />
131
132            <a name="chart.gutter.right"></a>
133            <b>chart.gutter.right</b><br />
134            The right gutter of the chart, (the gutter is where the labels and title are).<br />
135            <i>Default: 15</i><br /><br />
136
137            <a name="chart.gutter.top"></a>
138            <b>chart.gutter.top</b><br />
139            The top gutter of the chart, (the gutter is where the labels and title are).<br />
140            <i>Default: 15</i><br /><br />
141
142            <a name="chart.gutter.bottom"></a>
143            <b>chart.gutter.bottom</b><br />
144            The bottom gutter of the chart, (the gutter is where the labels and title are).<br />
145            <i>Default: 15</i><br /><br />
146
147<a name="colors"></a>
148<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">Colors</h3>
149           
150            <a name="chart.colors"></a>
151            <b>chart.colors</b><br />
152            An array of the colors of the actual bars. <br />
153            <i>Default: An array - ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0']</i><br /><br />
154
155
156<a name="labels"></a>
157<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">Labels and text</h3>
158
159        <a name="chart.value.label"></a>
160        <b>chart.value.label</b><br />
161        This controls whether the Thermometers value is shown in text.<br />
162        <i>Default: true</i><br /><br />
163
164<a name="shadow"></a>
165<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">Shadow</h3>
166
167            <a name="chart.shadow"></a>
168            <b>chart.shadow</b><br />
169            Whether a drop shadow is applied. <br /><i>Default: true</i><br /><br />
170           
171            <a name="chart.shadow.color"></a>
172            <b>chart.shadow.color</b><br />
173            The color of the shadow. <br /><i>Default: gray</i><br /><br />
174           
175            <a name="chart.shadow.offsetx"></a>
176            <b>chart.shadow.offsetx</b><br />
177            The X offset of the shadow. <br /><i>Default: 0</i><br /><br />
178           
179            <a name="chart.shadow.offsety"></a>
180            <b>chart.shadow.offsety</b><br />
181            The Y offset of the shadow.  <br /><i>Default: 0</i><br /><br />
182           
183            <a name="chart.shadow.blur"></a>
184            <b>chart.shadow.blur</b><br />
185            The severity of the shadow blurring effect. <br /><i>Default: 15</i><br /><br />
186
187<a name="interactive"></a>
188<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>
189
190            <a name="chart.adjustable"></a>
191            <b>chart.adjustable</b><br />
192            Defaulting to false, this determines whether your bar chart will be adjustable.<br />
193            <i>Default: false</i><br /><br />
194
195<a name="zoom"></a>
196<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>
197
198            <a name="chart.zoom.mode"></a>
199            <b>chart.zoom.mode</b><br />
200            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 />
201            <i>Default: canvas</i><br /><br />
202           
203            <a name="chart.zoom.factor"></a>
204            <b>chart.zoom.factor</b><br />
205            This is the factor that the chart will be zoomed by (bigger values means more zoom)<br />
206            <i>Default: 1.5</i><br /><br />
207
208            <a name="chart.zoom.fade.in"></a>
209            <b>chart.zoom.fade.in</b><br />
210            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 />
211            <i>Default: true</i><br /><br />
212
213            <a name="chart.zoom.fade.out"></a>
214            <b>chart.zoom.fade.out</b><br />
215            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 />
216            <i>Default: true</i><br /><br />
217
218            <a name="chart.zoom.hdir"></a>
219            <b>chart.zoom.hdir</b><br />
220            The horizontal direction of the zoom. Possible values are: <i>left</i>, <i>center</i>, <i>right</i><br />
221            <i>Default: right</i><br /><br />
222
223            <a name="chart.zoom.vdir"></a>
224            <b>chart.zoom.vdir</b><br />
225            The vertical direction of the zoom. Possible values are: <i>up</i>, <i>center</i>, <i>down</i><br />
226            <i>Default: down</i><br /><br />
227
228            <a name="chart.zoom.delay"></a>
229            <b>chart.zoom.delay</b><br />
230            The delay (in milliseconds) between frames.<br />
231            <i>Default: 50</i><br /><br />
232
233            <a name="chart.zoom.frames"></a>
234            <b>chart.zoom.frames</b><br />
235            The number of frames in the zoom animation.<br />
236            <i>Default: 10</i><br /><br />
237
238            <a name="chart.zoom.shadow"></a>
239            <b>chart.zoom.shadow</b><br />
240            Whether or not the zoomed canvas has a shadow or not.<br />
241            <i>Default: true</i><br /><br />
242
243            <a name="chart.zoom.thumbnail.width"></a>
244            <b>chart.zoom.thumbnail.width</b><br />
245            When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.<br />
246            <i>Default: 75</i><br /><br />
247
248            <a name="chart.zoom.thumbnail.height"></a>
249            <b>chart.zoom.thumbnail.height</b><br />
250            When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.<br />
251            <i>Default: 75</i><br /><br />
252
253            <a name="chart.zoom.background"></a>
254            <b>chart.zoom.background</b><br />
255            Defaulting to true, this determines whether the zoom has a dark, semi-opaque background that covers the entire web page.<br />
256            <i>Default: true</i><br /><br />
257
258</div>
259   
260   
261</body>
262</html>
Note: See TracBrowser for help on using the repository browser.