updated removed
[home-automation.git] / RGraph / examples / hbar.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 - horizontal bar chart</title>
22     
23     <meta name="keywords" content="rgraph html5 canvas example horizontal bar chart" />
24     <meta name="description" content="RGraph: Horizontal Bar chart example" />
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
29     <script src="../libraries/RGraph.common.core.js" ></script>
30     <script src="../libraries/RGraph.common.context.js" ></script>
31     <script src="../libraries/RGraph.common.annotate.js" ></script>
32     <script src="../libraries/RGraph.common.tooltips.js" ></script>
33     <script src="../libraries/RGraph.common.zoom.js" ></script>
34     <script src="../libraries/RGraph.common.resizing.js" ></script>
35     <script src="../libraries/RGraph.hbar.js" ></script>
36     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
37
38     <script>
39         /**
40         * The onload function creates the graph
41         */
42         window.onload = function ()
43         {
44             var hbar1 = new RGraph.HBar('hbar1', [1000,1000,3000,4000,4000,3600,2000,750,1000,2000,3000,5000]);
45             
46             var grad = hbar1.context.createLinearGradient(0,0,450,0);
47             grad.addColorStop(0, 'white');
48             grad.addColorStop(1, 'red');
49             
50             hbar1.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
51             hbar1.Set('chart.title', 'Results (annotatable, context, zoom)');
52             hbar1.Set('chart.title.xaxis', 'Sales');
53             hbar1.Set('chart.title.yaxis', 'Month');
54             hbar1.Set('chart.colors', [grad]);
55             hbar1.Set('chart.strokestyle', 'rgba(0,0,0,0)');
56             hbar1.Set('chart.units.pre', '$');
57             hbar1.Set('chart.units.post', 'k');
58             hbar1.Set('chart.background.barcolor1', 'white');
59             hbar1.Set('chart.background.barcolor2', 'white');
60             hbar1.Set('chart.background.grid.autofit', true);
61             hbar1.Set('chart.vmargin', 2);
62             hbar1.Set('chart.text.style', '#333');
63
64             if (!RGraph.isIE8()) {
65                 hbar1.Set('chart.zoom.vdir', 'center');
66                 hbar1.Set('chart.contextmenu', [['Get PNG', RGraph.showPNG], ['Zoom in', RGraph.Zoom], ['Clear', function () {RGraph.Clear(hbar1.canvas); hbar1.Draw();}]]);
67                 hbar1.Set('chart.annotatable', true);
68             }
69
70             hbar1.Set('chart.grouping', 'grouped');
71             hbar1.Set('chart.gutter', 30);
72             hbar1.Set('chart.labels.above', true);
73             
74             var size = RGraph.getGutterSuggest(hbar1, hbar1.data) + 5;
75             hbar1.Set('chart.gutter', size);
76
77             hbar1.Draw();
78
79             var hbar3 = new RGraph.HBar('hbar3', [[3,2,3], [3,4,5], [5,6,7], [7,8,6], [9,10,9], [10,15,3]]);
80             hbar3.Set('chart.labels', ['Fred', 'Barney', 'Julia', 'Francis', 'Hoolio', 'Jemima']);
81             hbar3.Set('chart.labels.above', true);
82             hbar3.Set('chart.units.post', 'k');
83             hbar3.Set('chart.units.pre', '$');
84             hbar3.Set('chart.gutter', 40);
85             hbar3.Set('chart.colors', ['green', 'red', '#ccf']);
86             hbar3.Set('chart.shadow', false);
87             
88             hbar3.Set('chart.key', ['Monday', 'Tuesday', 'Wednesday']);
89             hbar3.Set('chart.key.shadow', true);
90             hbar3.Set('chart.key.shadow.blur', 15);
91             hbar3.Set('chart.key.shadow.offsetx', 0);
92             hbar3.Set('chart.key.shadow.offsety', 0);
93             hbar3.Set('chart.key.shadow.color', '#ccc');
94             
95             hbar3.Set('chart.shadow', true);
96             hbar3.Set('chart.shadow.offsety', 0);
97             hbar3.Set('chart.shadow.offsetx', 0);
98             hbar3.Set('chart.shadow.color', '#aaa');
99             hbar3.Set('chart.shadow.blur', 10);
100             hbar3.Set('chart.grouping', 'grouped');
101             hbar3.Set('chart.title', 'Drinks consumed last week (tooltips)');
102
103             hbar3.Set('chart.tooltips', [
104                                          'Fred on Monday', '...on Tuesday', '...on Wednesday',
105                                          'Barney on Monday', '...on Tuesday', '...on Wednesday',
106                                          'Julia on Monday', '...on Tuesday', '...on Wednesday',
107                                          'Francis on Monday', '...on Tuesday', '...on Wednesday',
108                                          'Hoolio on Monday', '...on Tuesday', '...on Wednesday',
109                                          'Jemima on Monday', '...on Tuesday', '...on Wednesday'
110                                         ]);
111
112             hbar3.Set('chart.strokestyle', 'rgba(0,0,0,0)');
113             hbar3.Set('chart.background.grid.autofit', true);
114             hbar3.Draw();           
115         }
116     </script>
117 </head>
118 <body>
119
120     <!-- Social networking buttons -->
121     
122     <script>
123         function HideTwitterDIV ()
124         {
125             document.getElementById("twitter_div").style.opacity = 0;
126             document.getElementById("twitter_div").style.display = 'none';
127         }
128
129
130         function ShowTwitterDIV (e)
131         {
132             var e   = RGraph.FixEventObject(document.all ? event : e);
133             var div = document.getElementById("twitter_div");
134             var img = document.getElementById("twitter_icon");
135
136             div.style.display = 'block';
137             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
138             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
139
140             /**
141             * Fade it in
142             */
143             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
144             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
145             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
146             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
147             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
148
149             e.stopPropagation();
150
151             return false;
152         }
153
154         /**
155         * This code installs the event handler that hides the Twitter DIV
156         */
157         if (RGraph.isIE8()) {
158              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
159         } else {
160             window.addEventListener('click', HideTwitterDIV, false);
161         }
162     </script>
163
164     <!-- The twitter DIV --> 
165     <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;"> 
166         <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>
167         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a> 
168     </div>
169
170     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
171         <script>
172             // Opera fix
173             if (navigator.userAgent.indexOf('Opera') == -1) {
174               document.getElementById("social_icons").style.position = 'fixed';
175               document.getElementById("twitter_div").style.position = 'fixed';
176     
177             }
178         </script>
179     
180         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
181     
182     
183             <div id="social">
184                 <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">
185                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /> 
186                 </a> 
187      
188                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
189                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
190                 </a>
191     
192     
193 <!--
194                 <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">
195                     <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"/>
196                 </a>
197     
198     
199                 <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">
200                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
201                 </a>
202     
203                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed"> 
204                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" /> 
205                 </a>
206     
207                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
208                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" /> 
209                 </a>
210 -->
211             </div>
212     </div>
213     <!-- /Social networking buttons -->
214
215     <div id="breadcrumb">
216         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
217         >
218         <a href="./index.html">Examples</a>
219         >
220         Horizontal Bar chart
221     </div>
222
223
224     <h1>RGraph: HTML5 canvas graph library - Horizontal bar chart</h1>
225
226     <script>
227         if (RGraph.isIE8()) {
228             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>');
229         }
230     </script>
231     
232     <p>
233         A horizontal bar chart can be useful when your labels are too big for a regular bar chart.
234     </p>
235     
236     <ul>
237         <li><a href="../docs/hbar.html">The API documentation</a></li>
238     </ul>
239
240     <canvas id="hbar1" width="450" height="400" style="border: 1px dashed gray">[No canvas support]</canvas>
241     <canvas id="hbar3" width="450" height="400">[No canvas support]</canvas>
242
243 </body>
244 </html>