source: Dev/branches/jQueryUI/client/RGraph/docs/you-dont-need-to-spend-a-lot-of-money.html @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.
File size: 9.0 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
22    <title>RGraph: Javascript charts and graph library - You don't need to spend a lot of money to get attractive charts</title>
23
24    <meta name="keywords" content="rgraph html5 canvas charts money" />
25    <meta name="description" content="RGraph: You don't need to spend a lot of money..." />
26   
27    <meta property="og:title" content="RGraph: What is HTML5 canvas?" />
28    <meta property="og:description" content="A brief description and a few examples of HTML5 canvas " />
29    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
30
31    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
32    <link rel="icon" type="image/png" href="../images/favicon.png">
33
34    <script src="http://dev.rgraph.net/libraries/RGraph.common.core.js" ></script>
35    <script src="http://dev.rgraph.net/libraries/RGraph.common.tooltips.js" ></script>
36    <script src="http://dev.rgraph.net/libraries/RGraph.bar.js" ></script>
37    <script src="http://dev.rgraph.net/libraries/RGraph.line.js" ></script>
38    <script src="http://dev.rgraph.net/libraries/RGraph.pie.js" ></script>
39    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
40   
41    <style>
42        .RGraph_tooltip {
43            color: white ! important;
44            background-color: rgba(64,64,64,0.7) ! important;
45            box-shadow: 5px 5px 10px black ! important;
46            padding: 3px ! important;
47            font-weight: bold;
48            text-align: center ! important;
49        }
50    </style>
51</head>
52<body>
53
54    <!-- Social networking buttons -->
55        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
56            <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>
57            <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>
58        </div>
59
60        <script>
61            // Opera fix
62            if (navigator.userAgent.indexOf('Opera') == -1) {
63              document.getElementById("social_icons").style.position = 'fixed';
64            }
65        </script>
66    <!-- Social networking buttons -->
67
68    <div id="breadcrumb">
69        <a href="../index.html">RGraph: Javascript charts and graph library</a>
70        >
71        <a href="index.html">Documentation</a>
72        >
73        You don't need to spend a lot of money
74    </div>
75
76    <h1>RGraph: <span>Javascript charts and graph library</span> - You don't need to spend a lot of money to get attractive charts</h1>
77
78    <div style="position: relative; display: inline-block; float: right; width: 520px; height: 250px; text-align: left">
79        <canvas id="bar_cvs" width="500" height="200" style="width: 0.1px; background-color: #333; border: #C0C0C0 solid 1px; border-radius: 15px; box-shadow: 0 0 35px #6B6860" >[No canvas support]</canvas>
80        <canvas id="pie_cvs" width="130" height="60" style="width: 0.1px; position: absolute; left: 0; top: 0">[No canvas support]</canvas>
81    </div>
82   
83    <p>
84        You don't need to spend a lot of money to get good looking charts, as the chart to the right shows. It's a Bar,
85        Line and Pie chart combination, complete with Line and Pie chart tooltips.
86    </p>
87   
88    <p>
89        There are two canvas tags - one for the Line/Bar chart and the other for the Pie chart. The Pie chart canvas is
90        positioned over the other by using CSS and relative/absolute positioning.
91    </p>
92
93    <script>
94   
95        bar_data = [60,85,90,90,87,91,86,99,115,105];
96       
97        function getTooltip (idx)
98        {
99            var rainfall =  bar_data;
100            var years    = ['2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011'];
101
102            var str = years[idx] + ': ' + line.data[0][idx] + '°C, ' + rainfall[idx] + 'mm';
103
104            return String(str);
105        }
106
107        bar = new RGraph.Bar('bar_cvs', bar_data);
108        bar.Set('chart.colors', ['#4572A7']);
109        bar.Set('chart.background.grid.vlines', false);
110        bar.Set('chart.background.grid.autofit', true);
111        bar.Set('chart.background.grid.autofit.numhlines', 5);
112        bar.Set('chart.background.grid.border', false);
113        bar.Set('chart.labels', ['2001','2002','2003','2004','2005','2006','2007','2008','2009','2010']);
114        bar.Set('chart.text.color', '#4572A7');
115        bar.Set('chart.text.color', 'white');
116        bar.Set('chart.noaxes', true);
117        bar.Set('chart.gutter.left', 75);
118        bar.Set('chart.gutter.right', 65);
119        bar.Set('chart.ylabels.count', 3);
120        bar.Set('chart.units.post', 'mm');
121        bar.Set('chart.title.yaxis', 'Rainfall');
122        bar.Set('chart.title.yaxis.pos', 0.15);
123        bar.Set('chart.strokestyle', 'white');
124        bar.Set('chart.linewidth', 3);
125        bar.Set('chart.hmargin', 10);
126       
127
128        line = new RGraph.Line('bar_cvs', [9,8,8.5,8,7.5,8,9,10,10.5,10]);
129        line.Set('chart.ymax', 30);
130        line.Set('chart.ylabels.count', 3);
131        line.Set('chart.colors', ['yellow', '#4572A7']);
132        line.Set('chart.tickmarks', 'filledcircle');
133        line.Set('chart.yaxispos', 'right');
134        line.Set('chart.gutter.left', 75);
135        line.Set('chart.gutter.right', 65);
136        line.Set('chart.background.grid', false);
137        line.Set('chart.text.color', 'yellow');
138        line.Set('chart.linewidth', 2);
139        line.Set('chart.units.post', '°C');
140        line.Set('chart.noaxes', true);
141        line.Set('chart.title.yaxis', 'Avg. Temp');
142        line.Set('chart.title.yaxis.position', 'right');
143        line.Set('chart.title.yaxis.pos', 0.8);
144        line.Set('chart.tooltips', getTooltip);
145        line.Set('chart.tooltips.highlight', false);
146
147        bar.Set('chart.line', line);
148        bar.Draw();
149       
150        // Draw the pie chart
151        pie = new RGraph.Pie('pie_cvs', [6740, 2020]);
152        pie.Set('chart.gutter.top', 5);
153        pie.Set('chart.gutter.bottom', 5);
154        pie.Set('chart.gutter.left', 5);
155        pie.Set('chart.gutter.right', 5);
156        pie.Set('chart.align', 'left');
157        pie.Set('chart.exploded', [0,7]);
158        pie.Set('chart.strokestyle', '#eee');
159        pie.Set('chart.labels', ['','Sunshine']);
160        pie.Set('chart.labels.sticks', [false, true]);
161        pie.Set('chart.labels.sticks.color', '#eee')
162        pie.Set('chart.colors', ['#5683B8', 'yellow']);
163        pie.Set('chart.text.color', '#ddd');
164        pie.Set('chart.tooltips', ['Non-sunshine hours (including night): 6740','Sunshine hours: 2020']);
165        pie.Set('chart.tooltips.event', 'onmousemove');
166        pie.Set('chart.highlight.style', '2d');
167        pie.Set('chart.highlight.style.2d.fill', '#666');
168        pie.Set('chart.shadow', true);
169        pie.Set('chart.shadow.color', '#fff');
170        pie.Set('chart.shadow.offsetx', 0);
171        pie.Set('chart.shadow.offsety', 0);
172        pie.Set('chart.shadow.blur', 15);
173        pie.Draw();
174       
175        (function ()
176        {
177            $('#bar_cvs').animate({
178                width: '500px',
179                height: '200px'
180            }, 1000);
181
182            $('#pie_cvs').animate({
183                width: '130px',
184                height: '60px',
185                left: parseInt(bar.Get('chart.gutter.left')) + 'px',
186                top: parseInt(bar.Get('chart.gutter.top')) + 'px'
187            }, 1000);
188        })()
189       
190       
191    </script>
192</body>
193</html>
Note: See TracBrowser for help on using the repository browser.