source: Dev/trunk/RGraph/docs/you-dont-need-to-spend-a-lot-of-money.html @ 77

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

RGraph
File size: 9.0 KB
RevLine 
[77]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.