source: Dev/trunk/RGraph/examples/index.html @ 77

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

RGraph
File size: 7.0 KB
RevLine 
[77]1<?php ob_start('ob_gzhandler') ?>
2<!DOCTYPE html>
3<!--
4    /**
5    * o------------------------------------------------------------------------------o
6    * | This file is part of the RGraph package - you can learn more at:             |
7    * |                                                                              |
8    * |                          http://www.rgraph.net                               |
9    * |                                                                              |
10    * | This package is licensed under the RGraph license. For all kinds of business |
11    * | purposes there is a small one-time licensing fee to pay and for non          |
12    * | commercial  purposes it is free to use. You can read the full license here:  |
13    * |                                                                              |
14    * |                      http://www.rgraph.net/LICENSE.txt                       |
15    * o------------------------------------------------------------------------------o
16    */
17-->
18<html>
19<head>
20    <title>RGraph: Javascript charts and graph library - example charts</title>
21
22    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
23    <link rel="icon" type="image/png" href="../images/favicon.png">
24
25    <meta name="keywords" content="rgraph charts html5 javascript charts canvas" />
26    <meta name="description" content="RGraph: Javascript charts and graph library - examples" />
27   
28    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
29    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
30    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
31   
32    <script src="../libraries/RGraph.common.core.js" ></script>
33    <script src="../libraries/RGraph.common.tooltips.js" ></script>
34    <script src="../libraries/RGraph.rose.js" ></script>
35
36    <script>
37      var _gaq = _gaq || [];
38      _gaq.push(['_setAccount', 'UA-54706-2']);
39      _gaq.push(['_trackPageview']);
40   
41      (function() {
42        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
43        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
44        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
45      })();
46    </script>
47   
48    <script>
49        window.onload = function ()
50        {
51            var rose1 = new RGraph.Rose('cvs', [41,37,16,3,3,45,26,25,24,12,34,60,36,24,23,12]);
52            rose1.Set('chart.colors.alpha', 0.5);
53            rose1.Set('chart.colors', ['rgb(0,255,0)', 'red']);
54            rose1.Set('chart.gutter.top', 30);
55            rose1.Set('chart.labels', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']);
56            rose1.Set('chart.tooltips', ['Bev','Ben','Violet','Olga','Wez','Tristan','Hoolio','Nevil','Gary','Pete','Lou','Jim','Rich','Dave','Kevin','Jamie']);
57            rose1.Draw();
58        }
59    </script>
60</head>
61<body>
62
63   
64    <!-- Social networking buttons -->
65        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
66            <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>
67            <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>
68        </div>
69
70        <script>
71            // Opera fix
72            if (navigator.userAgent.indexOf('Opera') == -1) {
73              document.getElementById("social_icons").style.position = 'fixed';
74            }
75        </script>
76    <!-- Social networking buttons -->
77
78
79<div id="breadcrumb">
80    <a href="../index.html">RGraph: Javascript charts and graph library</a>
81    >
82    Examples
83</div>
84
85<h1>RGraph: <span>Javascript charts and graph library</span> - Example charts</h1>
86
87    <script>
88        if (RGraph.isIE8()) {
89            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>');
90        }
91    </script>
92
93    <div style="background-color: #ffb; border: 2px dashed #000; padding: 3px">
94        12th July 2011: The Tradar chart has been renamed to the Radar chart. You WILL need to update your code slightly.
95    </div>
96
97<p>
98    The following example charts are available:
99</p>
100
101<div style="float: right; text-align: center; width: 430px">
102    <b>A Rose chart of sales statistics</b>
103    <canvas id="cvs" width="430" height="400" style="margin-right: 100px">[No canvas support]</canvas>
104</div>
105
106</div>
107
108<ul>
109    <li><a href="bar.html">Bar charts</a></li>
110    <li><a href="bipolar.html">Bi-polar charts</a></li>
111    <li><a href="donut.html">Donut charts</a></li>
112    <li><a href="funnel.html">Funnel charts</a></li>
113    <li><a href="gantt.html">Gantt charts</a></li>
114    <li><a href="hbar.html">Horizontal Bar charts</a></li>
115    <li><a href="hprogress.html">Horizontal progress bar</a></li>
116    <li><a href="led.html">LED grid</a></li>
117    <li><a href="line.html">Line charts</a></li>
118    <li><a href="meter.html">Meter charts</a></li>
119    <li><a href="odo.html">Odometer charts</a></li>
120    <li><a href="pie.html">Pie charts</a></li>
121    <li><a href="radar.html">Radar charts</a></li>
122    <li><a href="rscatter.html">Radial scatter charts</a></li>
123    <li><a href="rose.html">Rose charts</a></li>
124    <li><a href="scatter.html">Scatter charts</a></li>
125    <li><a href="thermometer.html">Thermometer charts</a></li>
126    <li><a href="vprogress.html">Vertical progress bar</a></li>
127    <li><a href="waterfall.html">Waterfall charts</a></li>
128</ul>
129
130<ul>
131    <li><a href="basic.html">A basic example (for implementation help)</a></li>
132</ul>
133
134    <h4>More examples</h4>
135   
136    <p>
137        There are more usage examples as well as implementation guidance in the <a href="../docs/index.html">documentation</a>.
138    </p>
139
140</body>
141</html>
Note: See TracBrowser for help on using the repository browser.