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
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the RGraph license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | |
* | http://www.rgraph.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>RGraph: HTML5 Javascript charts library - Miscellaneous</title>
<meta name="keywords" content="rgraph html5 canvas misc docs" />
<meta name="description" content="RGraph: HTML5 Javascript charts library - Miscellaneous documentation" />
<meta property="og:title" content="RGraph: HTML5 Javascript charts library" />
<meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.tooltips.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<script src="../libraries/RGraph.scatter.js" ></script>
<!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-54706-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- Social networking buttons -->
<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px">
<!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> -->
<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
</div>
<script>
// Opera fix
if (navigator.userAgent.indexOf('Opera') == -1) {
document.getElementById("social_icons").style.position = 'fixed';
}
</script>
<div id="google_plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.rgraph.net"></g:plusone>
</div>
<!-- Social networking buttons -->
<div id="breadcrumb">
<a href="../index.html">RGraph: HTML5 Javascript charts library</a>
>
<a href="index.html">Documentation</a>
>
Miscellaneous documentation
</div>
<h1>RGraph: <span>HTML5 Javascript charts library</span> - Miscellaneous documentation</h1>
<script>
if (RGraph.isIE8()) {
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.</div>');
}
</script>
<ul>
<li><a href="#fallback.content">Canvas fallback content and visually impaired users</a></li>
<li><a href="#limits">Upper and lower limits for horizontal bars</a></li>
<li><a href="#canvas.width.height">Setting the canvas width and height</a></li>
<li><a href="#canvas.coordinates">The canvas coordinate system</a></li>
<li><a href="#older.browsers">RGraph and older browsers</a></li>
<li><a href="#msie">RGraph and Microsoft Internet Explorer</a></li>
<li><a href="#debugging">Debugging tips</a></li>
<li><a href="#inspecting">Inspecting an RGraph chart</a></li>
<li><a href="#context.menus">Double click context menus</a></li>
<li><a href="#event.handlers">Adding your own event handlers</a></li>
<li><a href="#crlf">Carriage returns and newlines in labels</a></li>
<li><a href="#character.set">Character set issues</a></li>
<li><a href="#rgraph.identify">How to identify an RGraph object</a></li>
<li><a href="#static.y.axis">Static Y axis</a></li>
<li><a href="#reducing.white.space">Reducing white space</a></li>
<li><a href="#in.graph">In-graph labels</a></li>
<li><a href="#shorthand.ingraph.labels">Shorthand for in-graph labels</a></li>
<li><a href="#dom2.events">DOM2 Event handlers</a></li>
<li><a href="#data.types">Data types</a></li>
<li><a href="#create.your.own">Creating your own chart type</a></li>
<li><a href="#world.map">World map</a></li>
<li><a href="#text">Adding text to your charts</a></li>
<li><a href="#crosshairs">Crosshairs</a></li>
<li><a href="#known.issues">Known issues</a></li>
</ul>
<a name="fallback.content"></a>
<br /> <br /> <br />
<h4>Canvas fallback content and visually impaired users</h4>
<p>
When using the canvas element you should be aware of the accessibility of your charts, for example where vision limited users are
concerned. Screen readers, for example, may not be able to convert a chart into something that is reasonable, so you should
consider
doing this yourself, possibly using the canvas fallback content (ie the content in between the canvas tags). A possible example
would be to put a table of data inside the canvas tag that the chart on the canvas represents. Doing this goes a long way
towards making the data available to everyone. You might also wish to consider using the <a href="zoom.html">full canvas
zoom</a> or the <a href="resizing.html">resizing feature</a> to enable people to enlarge the chart.
</p>
<a name="limits"></a>
<br /> <br /> <br />
<h4>Upper and lower limits for horizontal bars</h4>
<p>
If you don't wish to specify an upper or lower limit for horizontal bars, and you just want them to extend to the upper or lower
limits of the chart, whatever they may be, you can specify null for the value determining how far they extend. For cases where
the X axis is in the middle and you're specifying a negative start value, or you want the bar to extend all the way to the
bottom, you can simply specify an arbitrary length (eg -999999). Eg:
</p>
<pre class="code">myBar.Set('chart.background.hbars', [[0, null, 'green'], [0,-999999,'red']]);</pre>
<a name="canvas.width.height"></a>
<br /> <br /> <br />
<h4>Setting the canvas width and height</h4>
<p>
To set the canvas width and height you must use the HTML width/height attributes and NOT CSS. If you do use CSS, the canvas
will be scaled, and not enlarged, to fit the new width/height. Eg:
</p>
<pre class="code"><canvas id="myCanvas" width="200" height="100">[No canvas support]<canvas></pre>
<p>
<b>Note:</b>
When you resize the canvas using CSS, not only will it be scaled (not enlarged), but it will also NOT be cleared. You can
see this effect on the <a href="animation.html">animation page</a> with the jQuery animation example.
</p>
<a name="canvas.coordinates"></a>
<br /> <br /> <br />
<h4>The canvas coordinate system</h4>
<p>
The canvas coordinate system starts in the top left of the canvas (at [0,0] - the X value increasing as you go right
and the Y value as you go down), much like the CSS coordinates for the entire page. The
gutter goes around the canvas (ie top/bottom/left/right - where the labels and titles are placed), and the actual chart
sits in the middle.
</p>
<a name="older.browsers"></a>
<br /> <br /> <br />
<h4>RGraph and older browsers</h4>
<p>
Older versions of browsers are supported (assuming they have canvas support), however, if they don't support the canvas text
or shadow APIs these will naturally be unavailable. The charts will still be drawn, though without shadows or text.
</p>
<a name="msie"></a>
<br /> <br /> <br />
<h4>RGraph and Microsoft Internet Explorer</h4>
<p>
You can now use RGraph with Internet Explorer 8 in conjunction with ExCanvas, (which brings a degree of <canvas> support to MSIE).
Bear in mind though that shadows are not available and thus are simulated. Microsoft Internet Explorer 9 has native <canvas>
support.
</p>
<a name="debugging"></a>
<br /> <br /> <br />
<h4>Debugging tips</h4>
<p>
If you're having a hard time debugging your chart, try these:
</p>
<ul>
<li>Ensure you have only one chart on the page</li>
<li>Make sure you have disabled your web browsers cache (the Firefox <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a> can do this for Firefox)</li>
<li>
Try using <a href="http://www.getfirebug.com" target="_blank">Firebug</a> for Firefox or the
Webkit developer tools for Google Chrome (CTRL_SHIFT+J) and Safari (CTRL+ALT+C). There's a
video about using the Chrome developer tools
<a href="http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=youtu.be" target="_blank">here</a>. These are very useful
tools that make development much easier.
</li>
<li>Reduce the page to the bare minimum.</li>
<li>Start with a very basic chart and build it up slowly.</li>
</ul>
<a name="inspecting"></a>
<br /> <br /> <br />
<h4>Inspecting an RGraph chart</h4>
<p>
To help when debugging your RGraph charts and canvas elements, you can use you browsers built in debugging tools.
An example is the WebKit developer tools which are available in Google Chrome and Apple Safari. There is a screenshot
of these tools (in docked mode) <a href="../images/introspection.png" target="_blank"><b>here</b></a>. To view these
tools in Google Chrome press CTRL+SHIFT+J. Inspect the canvas, and then the associated object can be found via
the <i>__object__</i> property.
</p>
<a name="context.menus"></a>
<br /> <br /> <br />
<h4>Double click context menus</h4>
<p>
Windows Opera, Windows Safari, Mac Safari and Mac Firefox all attach the context menu to the double click event (left mouse button),
not the right, in order to make it more reliable.
</p>
<a name="event.handlers"></a>
<br /> <br /> <br />
<h4>Adding your own event handlers</h4>
<p>
Because each RGraph object exposes the canvas element (the same as what you get from <i>document.getElementById()</i>),
you can use normal procedures to add your own event handlers. Eg If you wanted to add your own onclick handler you could
do this:
</p>
<pre class="code">
<script>
var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
myBar.Draw();
myBar.canvas.onclick = function ()
{
}
</script>
</pre>
<p>
But what if, for example, you're using an RGraph feature which
uses the event handler that you need? In this case you can use the standard DOM2 method <i>addEventListener()</i>. This will add
your new event handler without replacing any existing one (ie the one installed by RGraph). For example:
</p>
<pre class="code">
<script>
var myBar = new RGraph.Bar('cvs', [7,4,2,6,3,4,8]);
myBar.Draw();
function myFunc ()
{
}
myBar.canvas.addEventListener('click', myFunc, false)
</script>
</pre>
<a name="crlf"></a>
<br /> <br /> <br />
<h4>Carriage returns and newlines in labels</h4>
<p>
You can put carriage returns in your labels by using the string <i>\r\n</i>. This means your labels will span multiple lines.
Like so:
</p>
<pre class="code">myBar.Set('chart.labels', 'John\r\n(Winner!)', ...)</pre>
<a name="character.set"></a>
<br /> <br /> <br />
<h4>Character set issues</h4>
<p>
If you're seeing strange, unrecognised characters in your text labels or titles, you may need to specify the correct
character set that the browser should use. In PHP you can do this with the <i>header()</i> function (which, as the
name suggests, sends a HTTP header):
</p>
<pre class="code"><?php
header("Content-Type: text/html; charset=ISO-8859-1");
?></pre>
<p>
If you use Apache, you could use the <i>header</i> directive, though this may be overridden by other directives,
eg <i>AddDefaultCharset</i>.
</p>
<a name="rgraph.identify"></a>
<br /> <br /> <br />
<h4>How to identify an RGraph object</h4>
<p>
Because identity can sometimes be a tricky affair, there are a few RGraph properties that you can use to check whether an object
is an RGraph object:
</p>
<ul>
<li><i>obj.isRGraph</i> - This is a boolean that you can use to clearly identify an RGraph object.</li>
<li><i>obj.type</i> - This identifies the type of an RGraph object. It is a string which contains a one word description of the objects chart type, eg bar/line/pie.</li>
</ul>
<!------------------------------------------------------------------------------------------------------------->
<a name="static.y.axis"></a>
<br /> <br /> <br />
<h4>Static Y axis</h4>
<!--
The HTML and script necessary for a chart with a static Y axis. The libraries are included at the top of the page
in the <HEAD>
-->
<div style="position: relative; float: right; margin-right: 10px">
<!-- The width here is set further down the page in script -->
<canvas id="axes" width="0" height="170" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
<div style="width: 600px; overflow: auto">
<canvas id="cvs" width="1000" height="200"></canvas>
</div>
</div>
<script>
ShowGraphOne = function ()
{
/**
* This is the script that draws the chart
*/
line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
line.Set('chart.noaxes', true); // We draw the Y axis ourselves further down the page
line.Set('chart.gutter.top', 25);
line.Set('chart.gutter.bottom', 35);
line.Set('chart.gutter.left', 50);
line.Set('chart.hmargin', 5);
line.Set('chart.linewidth', 3);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Set('chart.shadow.color', 'red');
line.Set('chart.text.angle', 15);
line.Set('chart.tooltips', [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
]);
line.Set('chart.labels', [
'Jan `09','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09',
'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10'
]);
line.Draw();
/**
* And this is the script that draws the left axis, on the other canvas (that doesn't move)
*/
ca = document.getElementById("axes")
co = ca.getContext('2d');
/**
* This sets the smaller canvas to cover the whole of the charts left gutter
*/
ca.width = line.Get('chart.gutter.left') + 1;
RGraph.Clear(ca, 'white');
/**
* This draws the static axis
*/
co.beginPath();
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));
// Draw the tickmarks on the axis
var numTicks = 10;
for (var i=0; i<=numTicks; ++i) {
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
}
co.stroke();
/**
* This draws the labels for the static axis
*/
co.beginPath();
var color = 'black';
var size = 10;
for (var i=0; i<5; ++i) {
co.fillStyle = color;
co.textAlign = 'right';
co.textBaseline = 'middle';
var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
RGraph.Text(co, 'Verdana', size, line.Get('chart.gutter.left') - 4, line.Get('chart.gutter.top') + (h * (i/5)), line.max - (line.max * (i/5)));
}
// Draw zero
RGraph.Text(co,
'Verdana',
size,
line.Get('chart.gutter.left') - 4,
165,
'0');
co.fill();
}
</script>
A static Y axis is useful if you have a wide chart but limited space. Whilst not part of the RGraph libraries itself, it can be
achieved with a little HTML, like the chart shown. The HTML and the script to achieve this is shown below.
It involves placing an extra canvas above the chart with the Y axis drawn on it. This canvas doesn't
move when the main canvas scrolls left and right.
<p />
<b>Note:</b> Because Firefox doesn't support the event.offsetX and event.offsetY properties and they have to be simulated,
scrolling in conjunction with tooltips in this case and this browser doesn't work.
<pre class="code">
<div style="position: relative; float: right; margin-right: 10px; margin-top: 10px">
<!-- The width here is set further down the page in script -->
<canvas id="axes" width="0" height="200" style="position: absolute; top: 0; left: 0; z-index: 100"></canvas>
<div style="width: 600px; overflow: auto">
<canvas id="cvs" width="1000" height="200"></canvas>
</div>
</div>
<script>
window.onload = function ()
{
/**
* This is the script that draws the chart
*/
line = new RGraph.Line('cvs', [3,15,22,26,28,24,22,25,23,24,26,23,24,25,27,28,29,26,23,22,24,21,24,25]);
line.Set('chart.noaxes', true); // We draw the Y axis ourselves
line.Set('chart.gutter.top', 25);
line.Set('chart.gutter.bottom', 35);
line.Set('chart.gutter.left', 50);
line.Set('chart.hmargin', 5);
line.Set('chart.linewidth', 3);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 0);
line.Set('chart.shadow.offsety', 0);
line.Set('chart.shadow.blur', 15);
line.Set('chart.shadow.color', 'red');
line.Set('chart.text.angle', 15);
line.Set('chart.tooltips', [
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December',
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
]);
line.Set('chart.labels', [
'','Feb 09', 'Mar 09','Apr 09','May 09','Jun 09','Jul 09','Aug 09','Sep 09','Oct 09','Nov 09', 'Dec 09',
'Jan 10', 'Feb 10', 'Mar 10','Apr 10','May 10','Jun 10','Jul 10','Aug 10','Sep 10','Oct 10','Nov 10', 'Dec 10'
]);
line.Draw();
/**
* And this is the script that draws the left axis, on the other canvas (that doesn't move)
*/
ca = document.getElementById("axes")
co = ca.getContext('2d');
/**
* This sets the smaller canvas to cover the whole of the charts left gutter
*/
ca.width = line.Get('chart.gutter.left') + 1;
RGraph.Clear(ca, 'white');
/**
* This draws the static axis
*/
co.beginPath();
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top'));
co.lineTo(line.Get('chart.gutter.left'), line.canvas.height - line.Get('chart.gutter.bottom'));
// Draw the tickmarks on the axis
var numTicks = 10;
for (var i=0; i<=numTicks; ++i) {
co.moveTo(line.Get('chart.gutter.left'), line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
co.lineTo(line.Get('chart.gutter.left') - 3, line.Get('chart.gutter.top') + (((ca.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom')) / numTicks) * i));
}
co.stroke();
/**
* This draws the labels for the static axis
*/
co.beginPath();
var color = 'black';
var size = 10;
for (var i=0; i<5; ++i) {
co.fillStyle = color;
co.textAlign = 'right';
co.textBaseline = 'middle';
var h = line.canvas.height - line.Get('chart.gutter.top') - line.Get('chart.gutter.bottom');
RGraph.Text(co,
'Verdana',
size,
line.Get('chart.gutter.left') - 4,
line.Get('chart.gutter.top') + (h * (i/5)),
line.max - (line.max * (i/5)));
}
co.fill();
}
</script>
</pre>
<!------------------------------------------------------------------------------------------------------------->
<br clear="all" />
<br clear="all" />
<!-- This chart is an example of how you can eliminate the gutter white space by translating before you draw the chart. -->
<a name="reducing.white.space"></a>
<br /> <br /> <br />
<h4>Reducing white space</h4>
<canvas id="myc" width="600" height="250" style="float: right; border: dashed 1px gray; margin-right: 10px"></canvas>
<script>
ShowGraphTwo = function ()
{
var arg1 = [73, 65, 76, 75, 69, 73, 54, 61, 89, 77];
var arg2 = [264, 240, 240, 256, 200, 208, 240, 216, 248, 240]
var line1 = new RGraph.Line('myc', arg1 , arg2);
line1.Set('chart.colors', ['red', 'silver']);
line1.Set('chart.background.barcolor1', 'white');
line1.Set('chart.background.barcolor2', 'white');
line1.Set('chart.labels', ['Jan 2000',
'Feb 2001',
'Mar 2002',
'Apr 2003',
'May 2004',
'Jun 2005',
'Jul 2006',
'Aug 2007',
'Sep 2008',
'Oct 2009'])
line1.Set('chart.filled', true);
line1.Set('chart.fillstyle', ['#fcc', '#cfc']);
line1.Set('chart.gutter.top', 5);
line1.Set('chart.gutter.bottom', 55);
line1.Set('chart.gutter.left', 55);
line1.Set('chart.gutter.right', 35);
line1.Set('chart.background.grid', true);
line1.Set('chart.ymax', 365)
line1.Set('chart.yaxispos', 'right');
line1.Set('chart.title.xaxis', 'Month');
line1.Set('chart.title.yaxis', 'Temperature');
line1.Set('chart.title.xaxis.pos', -0.3);
line1.Set('chart.title.yaxis.pos', 0.5);
line1.Set('chart.text.angle', 30);
line1.Set('chart.tooltips', [
'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009',
'January 2000','February 2001','March 2002','April 2003','May 2004','June 2005','July 2006','August 2007','September 2008','October 2009'
]);
line1.Draw();
}
window.onload = function ()
{
ShowGraphOne();
ShowGraphTwo();
}
</script>
<p>
New in June 2011 is the ability to set the gutters independently. This removes the necessity to translate
and adjust the coordinates to get more space and is far more straight-forward. The new properties are:
<ul>
<li>chart.gutter.left</li>
<li>chart.gutter.right</li>
<li>chart.gutter.top</li>
<li>chart.gutter.bottom</li>
</ul>
You can read more about this change <a href="gutters.html"><b>here</b></a>.
</p>
<br clear="all" />
<a name="in.graph"></a>
<br /> <br /> <br />
<h4>In-graph labels</h4>
<p>
As well as an array of strings, like this:
</p>
<pre class="code">obj.Set('chart.labels.ingraph', ['First label','Second label']);</pre>
<p>
The string can also be an array, consisting of color and placement information, like this:
</p>
<pre class="code">obj.Set('chart.labels.ingraph', ['First label',<span style="color: green">['Second label', 'red', 'yellow', -1, 50]</span> ]);</pre>
<p>
You can read more information about this <a href="ingraph.html">here</a>.
</p>
<a name="shorthand.ingraph.labels"></a>
<br /> <br /> <br />
<h4>Shorthand for in-graph labels</h4>
<p>
Instead of providing a full array of <i>null</i> elements for in-graph labels which may get a little unwieldy,
you can instead specify an integer that specifies how many elements to skip. Like this:
</p>
<pre class="code">line.Set('chart.labels.ingraph', [6, 'July', 3, 'November']);</pre>
<br clear="all" />
<br clear="all" />
<a name="dom2.events"></a>
<br /> <br /> <br />
<h4>DOM2 Event handlers</h4>
<p>
All the charts have now (1st October 2010) been converted to DOM2 for tooltips event registration. This allows them to
be far more co-operative if you're using events. Tooltips will not be compatible with MSIE8 - the charts will still be
drawn, albeit without tooltips.
</p>
<br clear="all" />
<a name="data.types"></a>
<br /> <br /> <br />
<h4>Data types</h4>
<p>
If your data values aren't the correct type - ie numbers - it can cause problems. Pay particular attention to this
when you're getting your data from data sources which may be classed as strings, such as JSON or AJAX requests.
</p>
<a name="create.your.own"></a>
<br /> <br /> <br />
<h4>Creating your own chart type</h4>
<p>
If you wish to create your own chart type, there is a skeleton file
<a href="../libraries/RGraph.skeleton.js" target="_blank"><b>here</b></a> that you can use as a starting point.
This file contains the bare bones of an RGraph object, such as the .Get() and .Set() methods, as well as examples
of common properties.
</p>
<a name="world.map"></a>
<br /> <br /> <br />
<h4>World map</h4>
<p>
There is no function in RGraph to do mapping, either of the World or a smaller region. If this is what you want then you
may be interested in this HTML5 canvas based mapping system:
<a href="http://joncom.be/code/excanvas-world-map/" target="_blank">http://joncom.be/code/excanvas-world-map/</a>
</p>
<a name="text"></a>
<br /> <br /> <br />
<h4>Adding text to your charts</h4>
<p>
You can add arbitrary text to your charts by using the RGraph API. For example you could use this code after the call to .Draw():
</p>
<pre class="code">
function DrawSubTitle (obj)
{
var context = obj.context;
context.beginPath();
context.fillStyle = 'gray';
RGraph.Text(context,
'Verdana',
7,
obj.canvas.width / 2,
obj.Get('chart.gutter.top') - 6,
'The subtitle',
'center',
'center');
context.fill();
}
DrawSubTitle(myLine);
</pre>
<a name="crosshairs"></a>
<br /> <br /> <br />
<h4>Crosshairs</h4>
<div style="width: 600px; float: right">
<canvas id="scatter_crosshairs" width="600" height="250">[No canvas support]</canvas>
<input type="text" style="margin-left: 25px; width: 550px" id="crosshairs.out" />
</div>
<script>
var data = [[84,68],[45,65],[185,54],[222,62],[354,45],[153,21]];
var scatter = new RGraph.Scatter('scatter_crosshairs', data);
scatter.Set('chart.xmax', 365);
scatter.Set('chart.labels', ['Q1','Q2','Q3','Q4']);
/**
* Configure the crosshairs
*/
scatter.Set('chart.crosshairs', true);
scatter.Set('chart.crosshairs.coords', true);
scatter.Set('chart.crosshairs.coords.labels.x', 'Day');
scatter.Set('chart.crosshairs.coords.labels.y', 'Amount');
scatter.Set('chart.crosshairs.coords.fixed', false);
scatter.Set('chart.crosshairs.color', 'gray');
scatter.Set('chart.crosshairs.linewidth', 5);
scatter.Draw();
/**
* Now add the custom event listener that updates the text box with the coordinates
*/
function myFunc (obj)
{
var x = obj.canvas.__crosshairs_x__;
var y = obj.canvas.__crosshairs_y__;
document.getElementById("crosshairs.out").value = x + ',' + y;
}
RGraph.AddCustomEventListener(scatter, 'oncrosshairs', myFunc);
</script>
<p>
Some charts type have the ability to use crosshairs. The supported charts are:
</p>
<ul>
<li>Bar charts</li>
<li>Line charts</li>
<li>Scatter charts</li>
<li>Waterfall charts</li>
</ul>
<p>
There are various options that control the crosshairs, though because some apply to the readout, they are only applicable to
the Scatter chart. The crosshairs can be customised by stipulating the linewidth, the color and whether only the horizontal,
vertical or both lines are shown.
</p>
<h4>Crosshairs and the Scatter chart</h4>
<p>
Because the X axis is scaled, the Scatter chart has the extra ability of having a coordinates readout when
the crosshairs are in use. This is shown in the example above. The appropriate properties are:
</p>
<ul>
<li>obj.canvas.__crosshairs_x__</li>
<li>obj.canvas.__crosshairs_y__</li>
<li>obj.canvas.__crosshairs_labels__ (this is the coordinates readout)</li>
</ul>
<p>
In the above example the coordinates are put in the text input by using the custom event <i>oncrosshairs</i>. This is as
follows:
</p>
<pre class="code">
function myFunc (obj)
{
var x = obj.canvas.__crosshairs_x__;
var y = obj.canvas.__crosshairs_y__;
document.getElementById("crosshairs.out").value = x + ',' + y;
}
RGraph.AddCustomEventListener(scatter, 'oncrosshairs', myFunc);
</pre>
<a name="known.issues"></a>
<br /> <br /> <br />
<h4>Known issues</h4>
<p>
There's a few known issues documented <a href="issues.html">here</a>
</p>
<p />
</body>
</html>
|
