source: Dev/branches/jQueryUI/client/RGraph/examples/scatter.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: 8.9 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 - scatter charts</title>
23   
24    <meta name="keywords" content="rgraph html5 canvas example scatter chart" />
25    <meta name="description" content="RGraph: Javascript charts and graph library - Scatter charts example" />
26   
27    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
28    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
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="../libraries/RGraph.common.core.js" ></script>
35    <script src="../libraries/RGraph.common.tooltips.js" ></script>
36    <script src="../libraries/RGraph.scatter.js" ></script>
37    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
38
39    <script>
40        window.onload = function ()
41        {
42
43            var data = [
44                     [10,15,'red'],[13,16,'red'],[12,11,'red'],[15,16,'red'],[20,19,'red'],[19,16,'red'],[13,15,'red'],[11,12,'red'],[13,16,'red'],[5,19,'red'],[16,15,'red'],[13,15,'red'],[14,14,'red'],[12,12,'red'],
45                     [5,4,'green'],[6,14,'green'],[19,12,'green'],[3,5,'green'],[1,16,'green'],[13,5,'green'],[15,15,'green'],[13,5,'green'],[4,9,'green'],[16,6,'green'],[13,18,'green'],[18,12,'green'],[19,18,'green'],[13,16,'green'],[15,14,'green'],
46                     [12,4,'blue'],[4,23,'blue'],[13,8,'blue'],[12,12,'blue'],[18,4,'blue'],[4,18,'blue'],[11,2,'blue'],[4,3,'blue'],[5,8,'blue'],[1,9,'blue'],[4,6,'blue'],[16,8,'blue'],[17,8,'blue'],[19,9,'blue'],[13,5,'blue'],[16,21,'blue'],
47                     [12,4],[13,12],[11,16],[4,19],[4,3],[5,6],[1,9],[4,12],[6,12],[8,8],[16,6],[13,5],[15,13],[23,23,'red'], [1,1, 'gray'],
48                     [1,4,'gray'], [2,3,'gray'], [1,6,'gray'], [2,3,'gray'], [2,5,'gray'], [3,7,'gray'], [1,4,'gray'], [2,7,'gray']
49                    ];
50
51            var scatter1 = new RGraph.Scatter('scatter1', data);
52            scatter1.Set('chart.ylabels.count', 10);
53            scatter1.Set('chart.background.hbars', [[0,null,'rgba(0,255,0,0.3)']]);
54            scatter1.Set('chart.background.grid.autofit', true);
55            scatter1.Set('chart.background.grid.autofit.numhlines', 10);
56            scatter1.Set('chart.labels', [['Week 1', 0], ['Week 2', 7], ['Week 3', 14], ['Week 4', 21]]);
57            scatter1.Set('chart.labels.specific.align', 'center');
58            scatter1.Set('chart.xmax', 28); // Necessary
59            scatter1.Set('chart.defaultcolor', 'black'); // Optional
60            scatter1.Set('chart.title', 'A scatter chart');
61            scatter1.Set('chart.gutter.left', 40);
62            scatter1.Set('chart.tickmarks', 'square');
63            scatter1.Set('chart.ticksize', 4);
64            scatter1.Set('chart.ymax', 30);
65            scatter1.Set('chart.units.pre', '$');
66            scatter1.Set('chart.line.colors', ['red','blue','black']);
67            scatter1.Set('chart.key', ['Bob','Fred','Gaz']);
68            scatter1.Draw();
69
70           
71           
72            var scatter2 = new RGraph.Scatter('scatter2', [
73                                                       [10,[21,22,26,31,35, 'red', 'green']],
74                                                       [105,[10,10,15,25,30, 'red', 'green']],
75                                                       [125,[10,15,25,35,45, 'red', 'green']],
76                                                       [325,[10,15,25,35,45, 'yellow', 'green', 30]] // The last value is the width (in pixels)
77                                                      ]);
78            scatter2.Set('chart.title', 'A Scatter chart boxplot');
79            scatter2.Set('chart.tickmarks', null);
80            scatter2.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']);
81            scatter2.Set('chart.xmax', 365);
82            scatter2.Set('chart.ymax', 50);
83            scatter2.Set('chart.ymin', 10);
84            scatter2.Set('chart.boxplot.width', 12); // The default width
85            scatter2.Set('chart.background.vbars', [[182.5, 91.125, 'rgba(0,255,0,0.5)']]);
86            scatter2.Draw();
87        }
88    </script>
89
90    <script>
91      var _gaq = _gaq || [];
92      _gaq.push(['_setAccount', 'UA-54706-2']);
93      _gaq.push(['_trackPageview']);
94   
95      (function() {
96        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
97        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
98        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
99      })();
100    </script>
101</head>
102<body>
103
104   
105    <!-- Social networking buttons -->
106        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
107            <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>
108            <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>
109        </div>
110
111        <script>
112            // Opera fix
113            if (navigator.userAgent.indexOf('Opera') == -1) {
114              document.getElementById("social_icons").style.position = 'fixed';
115            }
116        </script>
117    <!-- Social networking buttons -->
118
119
120<div id="breadcrumb">
121    <a href="../index.html">RGraph: Javascript charts and graph library</a>
122    >
123    <a href="./index.html">Examples</a>
124    >
125    Scatter charts
126</div>
127
128<h1>RGraph: <span>Javascript charts and graph library</span> - Scatter charts</h1>
129
130    <script>
131        if (RGraph.isIE8()) {
132            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>');
133        }
134    </script>
135   
136    <p>
137        Scatter charts use two variables to plot points and makes it clear where there are congregations. The data points
138        make up the X and Y coordinates. The labels on the X axis are separate from the X units, allowing you to "group" them. For
139        example, like the example, you could set the maxium X value to be 365, but only have four labels. That way you would
140        have a granularity of a day, but the X axis would only have four labels. Like the example.
141    </p>
142
143    <div>
144        <ul>
145            <li><a href="../docs/scatter.html">Scatter charts API documentation</a></li>
146        </ul>
147    </div>
148
149    <canvas id="scatter1" width="450" height="200">[No canvas support]</canvas>
150    <canvas id="scatter2" width="450" height="200">[No canvas support]</canvas>
151
152   
153   
154</body>
155</html>
Note: See TracBrowser for help on using the repository browser.