-
Notifications
You must be signed in to change notification settings - Fork 10
/
default.html
307 lines (215 loc) · 11.8 KB
/
default.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="robots" content="noindex, follow">
<title>RGraph: Free JavaScript charts and graphs for your website</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen" />
<style>
body {
text-align: left;
padding-top: 10px;
}
ul {
list-style: none;
}
</style>
<script src="js/jquery.min.351.js"></script>
</head>
<body>
<!--
Images - using two links - one around each image prevents
a spurious underline being shown.
-->
<div style="text-align: center">
<a href="https://www.rgraph.net" target="_blank">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 530" width="450" height="150" style="margin-left: 25px">
<rect x="0" y="150" width="1820" height="490" fill="black" />
<g transform="translate(0,650) scale(0.1,-0.1)" fill="white" stroke="none">
<path d="M1 3878 c1 -1046 3 -1211 14 -1139 19 122 43 202 95 326 64 154 143 270 269 396 161 161 333 268 539 335 140 46 278 64 494 64 l178 0 0 -260 0 -260 -157 0 c-224 0 -353 -26 -491 -100 -136 -72 -260 -205 -332 -354 -77 -161 -73 -116 -77 -933 l-4 -733 -265 0 -264 0 0 -610 0 -610 9130 0 9130 0 0 2550 0 2550 -9130 0 -9130 0 1 -1222z m15879 383 l0 -669 80 54 c303 202 696 267 1053 173 431 -113 784 -440 922 -852 67 -202 67 -194 72 -1009 l5 -738 -266 0 -266 0 0 706 c0 615 -2 714 -16 777 -50 216 -168 388 -349 506 -138 90 -259 125 -435 125 -152 0 -217 -15 -355 -83 -169 -84 -271 -186 -355 -356 -87 -175 -83 -134 -87 -952 l-4 -723 -260 0 -259 0 0 1855 0 1855 260 0 260 0 0 -669z m-11850 -426 c515 -116 906 -511 1017 -1025 16 -78 18 -145 18 -795 0 -650 -2 -717 -18 -795 -60 -278 -185 -500 -393 -700 -173 -167 -381 -279 -614 -331 -76 -17 -140 -22 -322 -26 l-228 -5 0 261 0 261 144 0 c169 0 271 12 376 46 199 63 385 233 474 436 l25 57 -472 4 c-516 4 -523 5 -712 69 -330 112 -603 353 -758 669 -106 218 -132 331 -132 584 0 137 4 200 18 265 87 401 347 735 711 913 104 51 221 92 321 111 44 8 89 17 100 20 47 11 372 -2 445 -19z m3485 -235 l0 -255 -195 -6 c-209 -7 -282 -20 -405 -74 -161 -72 -315 -230 -392 -403 -59 -135 -57 -104 -63 -902 l-5 -735 -263 -3 -263 -2 4 762 c3 675 5 771 20 833 100 413 346 726 712 907 215 107 360 136 655 134 l195 -1 0 -255z m2365 245 c224 -33 403 -108 597 -252 235 -174 410 -438 483 -731 35 -140 39 -253 40 -960 l0 -683 -752 4 c-829 4 -794 1 -993 69 -390 132 -700 443 -835 838 -83 243 -82 587 2 834 157 463 565 805 1053 881 109 17 290 17 405 0z m3485 -9 c147 -22 248 -55 383 -121 377 -187 632 -512 719 -915 25 -120 25 -410 0 -530 -31 -141 -94 -305 -161 -415 -84 -139 -225 -293 -360 -393 -89 -67 -261 -154 -377 -192 -167 -55 -228 -60 -736 -60 l-463 0 0 -530 0 -530 -260 0 -260 0 0 1253 c0 1360 -1 1338 56 1519 135 431 489 772 917 884 168 44 376 55 542 30z"/>
<path d="M3625 3330 c-83 -14 -147 -36 -245 -86 -237 -121 -388 -341 -422 -613 -39 -320 140 -655 424 -795 176 -87 189 -89 711 -94 l457 -4 0 460 c0 428 -1 464 -20 538 -62 240 -217 424 -445 530 -41 19 -102 41 -137 49 -81 19 -246 27 -323 15z"/>
<path d="M9520 3321 c-218 -46 -387 -158 -504 -334 -93 -140 -136 -277 -136 -435 0 -279 134 -531 361 -678 87 -57 136 -78 236 -105 72 -20 110 -22 526 -26 360 -4 451 -2 463 8 14 12 16 61 11 464 -5 480 -7 492 -60 623 -79 196 -250 369 -436 441 -156 60 -308 74 -461 42z"/>
<path d="M13063 3319 c-89 -10 -174 -39 -278 -92 -63 -32 -101 -61 -175 -136 -106 -107 -159 -188 -194 -301 -40 -126 -46 -208 -46 -646 l0 -414 421 0 c527 0 573 6 749 96 571 293 568 1126 -5 1410 -148 73 -313 102 -472 83z"/>
</g>
</svg>
</div>
<ul class="main-contents-list">
<li><a href="#demos-of-charts-local">Demos of charts (local)</a></li>
<li><a href="#demos-of-charts-online">Demos of charts (online)</a></li>
<li><a href="#the-rgraph-license">The RGraph license</a></li>
<li><a href="#other-pages-on-rgraph-net">Other pages on rgraph.net</a></li>
</ul>
<!-- 3D Bar chart -->
<p>
<div style="float: right">
<div id="cc" style="width: 600px; height: 300px"></div>
</div>
<script src="./libraries/RGraph.svg.common.core.js" ></script>
<script src="./libraries/RGraph.svg.common.tooltips.js" ></script>
<script src="./libraries/RGraph.svg.bar.js" ></script>
<script>
data = [[4,12,6],[13,3,8],[19,9,5],[8,16,11],[15,11,13]];
new RGraph.SVG.Bar({
id: 'cc',
data: data,
options: {
_names: ['Barney','Dave','Luis'],
_daysLong:['Monday','Tuesday','Wednesday','Thusday','Friday'],
variant: '3d',
colorsStroke: 'rgba(0,0,0,0)',
colors: [
'Gradient(#faa:#fbb)',
'Gradient(#aaa:#bfb)',
'Gradient(#aaf:#bbf)'
],
marginTop: 30,
marginLeft: 75,
marginBottom: 80,
marginRight: 10,
marginInnerGrouped: 4,
marginInner: 10,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri'],
xaxisColor: '#ddd',
xaxisTickmarks: false,
yaxisColor: '#ddd',
yaxisScaleUnitsPost: 'km',
yaxisTickmarks: false,
// Add and configure the tooltips
tooltips: 'Race results for <b><i>2023</i></b><br /><small><i>%{property:_names[%{index}]} on %{property:_daysLong[%{dataset}]}: %{value},000m</i></small>',
tooltipsOffsetx: 3,
tooltipsCss: {
fontSize: '105%',
fontFamily: 'Arial, sans-serif',
paddingRight: '10px',
paddingLeft: '10px',
paddingTop: '10px',
paddingBottom: '10px',
textAlign: 'center'
},
shadow: false,
backgroundGridColor: '#eee',
responsive:[
{maxWidth: null, width: 500, height: 300, options: {textSize: 16}, parentCss: {cssFloat: 'right', textAlign: 'none'}},
{maxWidth: 1100, width: 500, height: 300, options: {textSize: 16}, parentCss: {cssFloat: 'none', textAlign: 'center'}},
{maxWidth: 600, width: 400, height: 200, options: {textSize: 10}, parentCss: {cssFloat: 'none', textAlign: 'center'}}
]
}
}).on('beforedraw', function (obj)
{
RGraph.SVG.clear(obj.svg);
}).wave();
</script>
</p>
<a name="demos-of-charts-local"></a>
<h2 style="margin-top: 0 ">Demos <span>of charts (local)</span></h2>
<p>
Demos of some of the various charts and features provided by RGraph (for these to work properly you
must extract the zip file to your computer).
</p>
<p align="left">
<a href="./demos/">Go to the demos (local) »</a>
</p>
<a name="demos-of-charts-online"></a>
<h2>Demos <span>of charts (online)</span></h2>
<p>
The same demos as above are also available on rgraph.net. Due to browser security
the <code>ajax</code> demos will not work locally
so you can see these if you go online.
</p>
<p align="left">
<a href="https://www.rgraph.net/demos/index.html" target="_blank">Go to the demos (online) »</a>
</p>
<a name="the-rgraph-license"></a>
<h2>The RGraph license</h2>
<p>
RGraph is available for you to freely use under the terms
of the GPL license. This is a well-established Open Source
license which gives you permission to use the RGraph
software as much as you wish. If the GPL license is not
suitable for you though there's an inexpensive commercial
license available.
</p>
<p align="left">
<a href="https://www.rgraph.net/license.html" target="_blank">Read more about the RGraph license (online) »</a>
</p>
<a name="other-pages-on-rgraph-net"></a>
<h2>Other <span>pages on rgraph.net</span></h2>
<ul>
<li>
<a href="https://www.rgraph.net" target="_blank">Home page</a><br />
The RGraph homepage on www.rgraph.net<br /><br />
</li>
<li>
<a href="https://www.rgraph.net/install/index.html" target="_blank">Installation and setup documentation</a><br />
Read the documentation that tells you how to get RGraph up and running<br /><br />
</li>
<li>
<b>SVG charts</b>
<br />
<br />
<ul>
<li>
<a href="https://www.rgraph.net/svg/index.html" target="_blank">Examples and documentation</a><br />
Examples of and documentation for the types of <code>svg</code> charts that are
supported by RGraph.<br /><br />
</li>
</ul>
</li>
<li>
<b>Canvas charts</b>
<br />
<br />
<ul>
<li>
<a href="https://www.rgraph.net/demos/index.html" target="_blank">Examples</a><br />
Examples of the types of <code>canvas</code> charts that are supported by RGraph.<br /><br />
</li>
<li>
<a href="https://www.rgraph.net/canvas/index.html" target="_blank">Documentation</a><br />
Documentation for RGraph<br /><br />
</li>
<li>
<a href="https://www.rgraph.net/canvas/howtos.html" target="_blank">HOWTO guides</a><br />
Guides for doing specific tasks with RGraph.<br /><br />
</li>
</ul>
</li>
</ul>
<div style="background-color: red;">
<small><small>
<div style="float: left">
© Copyright RGraph Licensing 2025</div>
<div style="float: right">
<a href="https://www.rgraph.net/terms.html" target="_blank">Terms and conditions</a>
<a href="https://www.rgraph.net/privacy.html" target="_blank">Privacy policy</a>
<a href="https://www.rgraph.net/sitemap.html" target="_blank">Sitemap</a>
<a href="https://www.rgraph.net/about.html" target="_blank">About</a>
</div>
</small></small>
</div>
<script>
//
// Make all anchor links scroll to the anchors
// instead of jumping to them.
//
// IMPORTANT: THIS IS REPEATED IN THE PAGE
// HEADER FOR THE WEBSITE
//
function scrollToAnchor(name)
{
var tag = $("a[name='" + name + "']");
$("html,body").animate({
scrollTop: tag.offset().top - 60
},"slow");
}
$("a").on('mousedown', function()
{
var href = this.getAttribute("href");
if (href.substr(0,1) === "#") {
var target = href.substr(1).replace(/'/i,'');
scrollToAnchor(target);
}
});
</script>
</body>
</html>