source: Dev/trunk/RGraph/docs/what-is-a-graph.html @ 77

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

RGraph
File size: 11.8 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    <title>RGraph: What is a graph?</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas charts graph what " />
24    <meta name="description" content="RGraph: What is a graph?" />
25   
26    <meta property="og:title" content="RGraph: What is a graph?" />
27    <meta property="og:description" content="A brief description and a few examples of a graph " />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
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 src="../libraries/RGraph.common.core.js" ></script>
34    <script src="../libraries/RGraph.bar.js" ></script>
35    <script src="../libraries/RGraph.line.js" ></script>
36    <script src="../libraries/RGraph.pie.js" ></script>
37
38
39    <script>
40      var _gaq = _gaq || [];
41      _gaq.push(['_setAccount', 'UA-54706-2']);
42      _gaq.push(['_trackPageview']);
43   
44      (function() {
45        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
46        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
47        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
48      })();
49    </script>
50</head>
51
52<body>
53
54   
55    <!-- Social networking buttons -->
56        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
57            <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>
58            <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>
59        </div>
60
61        <script>
62            // Opera fix
63            if (navigator.userAgent.indexOf('Opera') == -1) {
64              document.getElementById("social_icons").style.position = 'fixed';
65            }
66        </script>
67    <!-- Social networking buttons -->
68
69    <div id="breadcrumb">
70        <a href="../index.html">RGraph: Javascript charts and graph library</a>
71        >
72        <a href="index.html">Documentation</a>
73        >
74        What is a graph?
75    </div>
76
77    <h1>RGraph: <span>Javascript charts and graph library</span> - What is a graph?</h1>
78
79    <script>
80        if (RGraph.isIE8()) {
81            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>');
82        }
83    </script>
84   
85    <p>
86        If you're new to charting and graphing, this page is a brief description of charts, the benefits of using
87        <a href="#javascript.charts">Javascript charts</a> and some descriptions of the commonest chart types.
88    </p>
89   
90    <ul>
91        <li><a href="#introduction">Introduction</a></li>
92        <li><a href="#javascript.charts">Javascript charts</a></li>
93        <li><a href="#what.is.rgraph">What is RGraph?</a></li>
94        <li><a href="#what.is.a.bar.chart">What is a Bar chart?</a></li>
95        <li><a href="#what.is.a.line.chart">What is a Line chart?</a></li>
96        <li><a href="#what.is.a.pie.chart">What is a Pie chart?</a></li>
97        <li><a href="#other.chart.types">Other chart types</a></li>
98    </ul>
99   
100    <a name="introduction"></a>
101    <h2>Introduction</h2>
102        <p>
103            A graph (or chart to use the correct term - a graph in computer science is
104            <a href="http://en.wikipedia.org/wiki/Graph_theory" rel="nofollow" target="_blank">something else</a>)
105            is simply a graphical representation of your
106            data. This representation will be easier to understand than a long list of numbers and far more illustrative (of trends for
107            example). The actual data is represented by different symbols depending on the chart type - bars in a Bar chart, lines
108            in a Line chart and slices in a Pie chart. Different chart types can represent different sets of data better. For example
109            a Line chart can be used to represent chonological data quite well and a Pie chart might be better at representing percentages.
110        </p>
111   
112    <a name="javascript.charts"></a>
113    <h2>Javascript charts</h2>
114        <p>
115            <b>Javascript charts</b> are charts which are made using browser based Javascript. New HTML5 features allow far easier
116            creation of charts, such as the <b>HTML5 canvas</b> tag. Charts made in this way (ie in the users browser) are often
117            faster than their server based
118            counterparts and can be used as a way of reducing bandwidth/load/stress on your server. They can therefore be used to
119            prolong the life of your hardware, at the same time as improving the resposiveness of your website.
120        </p>
121   
122    <a name="what.is.rgraph"></a>
123    <h2>What is RGraph?</h2>
124       
125        <p>
126            RGraph is a <b>Javascript charts</b> library that makes it far easier to produce these charts (roughly 20 different
127            types). It uses the HTML5 canvas tag in conjunction with Javascript to draw the charts.
128        </p>
129
130    <a name="what.is.a.bar.chart"></a>
131    <h2>What is a Bar chart?</h2>
132   
133        <canvas id="myBar" width="600" height="250" style="float: right">[No canvas support]</canvas>
134        <script>
135            myBar = new RGraph.Bar('myBar', [4,8,12,4,6,8,7]);
136            myBar.Set('chart.labels', ['John', 'Lucy','Kevin','Julian','Vera','Bob','Peter']);
137            myBar.Set('chart.title', 'An example Bar chart');
138            myBar.Set('chart.background.grid.autofit', true);
139            myBar.Set('chart.strokestyle', '#300');
140            myBar.Set('chart.linewidth', 5);
141            myBar.Set('chart.shadow', true);
142            myBar.Set('chart.shadow.offsetx', 0);
143            myBar.Set('chart.shadow.offsety',0);
144            myBar.Set('chart.shadow.blur', 15);
145            myBar.Set('chart.colors', ['faa']);
146            myBar.Draw();
147        </script>
148   
149        <p>
150            A Bar chart represents data with one bar, or segment of a bar, for each piece of data. There's an example of a Bar
151            chart on the right. The RGraph Bar chart can be grouped or stacked, and the X axis can be either at the bottom, center
152            or the top.
153        </p>
154       
155        <p>
156            You can see the full range of bar chart options on the <a href="bar.html">Bar chart documentation</a> page.
157        </p>
158       
159    <br clear="all" />
160
161    <a name="what.is.a.line.chart"></a>
162    <h2>What is a Line chart?</h2>
163   
164        <canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas>
165        <script>
166            myLine = new RGraph.Line('myLine', [4,8,12,4,6,8,7], [8,9,6,15,12,18,16]);
167            myLine.Set('chart.labels', ['John', 'Lucy','Kevin','Julian','Vera','Bob','Peter']);
168            myLine.Set('chart.title', 'An example Line chart');
169            myLine.Set('chart.linewidth', 2);
170            myLine.Set('chart.shadow', true);
171            myLine.Set('chart.hmargin', 10);
172            myLine.Set('chart.tickmarks', 'endcircle');
173            myLine.Set('chart.background.grid.autofit', true);
174            myLine.Draw();
175        </script>
176   
177        <p>
178            A Line chart represents data through a series of points, connected by a line. There's an example of a Line chart
179            to the right. You can have multiple lines on the chart, it can be filled, stepped or ranged. Like the Bar chart,
180            the X axis can either at the bottom, center or the top.
181        </p>
182       
183        <p>
184            You can see the full range of line chart options on the <a href="line.html">Line chart documentation</a> page.
185        </p>
186       
187    <br clear="all" />
188   
189    <a name="what.is.a.pie.chart"></a>
190    <h2>What is a Pie chart?</h2>
191   
192        <canvas id="myPie" width="600" height="250" style="float: right">[No canvas support]</canvas>
193        <script>
194            myPie = new RGraph.Pie('myPie', [4,8,12,4,6,8,7]);
195            myPie.Set('chart.labels', ['John', 'Lucy','Kevin','Julian','Vera','Bob','Peter']);
196            myPie.Set('chart.title', 'An example Pie chart');
197            myPie.Set('chart.exploded', [15,15]);
198            myPie.Set('chart.shadow', true);
199            myPie.Draw();
200        </script>
201       
202        <p>
203            A Pie chart represents data as segments of circle. As such, it can be good at showing things such as precentages.
204            Bear in mind though that it has been criticized as not being the easiest way to compare individual sections. More
205            information is available on the <a href="http://en.wikipedia.org/wiki/Pie_chart" target="_blank" rel="nofollow">Wikipedia page</a>.
206        </p>
207
208        <p>
209            You can see the full range of Pie chart options on the <a href="pie.html">Pie chart documentation</a> page.
210        </p>
211       
212    <br clear="all" /> 
213   
214    <a name="other.chart.types"></a>
215    <h2>Other chart types</h2>
216        <p>
217            RGraph supports roughly 20 different types of chart in total. Besides the Bar, Line and Pie there is: Bipolar, Donut, Funnel,
218            Gantt, Horizontal Bar, Horizontal Progress Bar, LED display, Meter, Odometer, Radar, Radial Scatter, Rose, Scatter,
219            Thermometer, Vertical Progress Bar and Waterfall chart. For more information on each chart type you can read the
220            appropriate chart types documentation page. Besides the individual chart documentation pages you can also
221            read about the many features of RGraph.
222        </p>
223       
224        <p align="right">
225            <b>
226                <a href="index.html">Full documentation &raquo;</a>
227            </b>
228        </p>
229
230</body>
231</html>
Note: See TracBrowser for help on using the repository browser.