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
|
<!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 - API documentation</title>
<meta name="keywords" content="rgraph html5 canvas chart docs api" />
<meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about the RGraph API" />
<meta property="og:title" content="RGraph: HTML5 Javascript charts library" />
<meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
<meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/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>
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>
>
API Documentation
</div>
<h1>RGraph: <span>HTML5 Javascript charts library</span> - API 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>
<br />
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#references">Canvas and context references</a></li>
<li><a href="#events">Working with events</a></li>
<li><a href="#coords">Working with chart coordinates</a></li>
<li><a href="#data">Working with chart data</a></li>
<li><a href="#updating">Updating your charts dynamically</a></li>
<li><a href="#accessors">Setting properties</a></li>
<li><a href="#references.other">References available on RGraph objects</a></li>
<li><a href="#scale">Scale information</a></li>
<li><a href="#text">Adding text to your charts</a></li>
<li>
<a href="#functions">RGraph functions</a>
<ul>
<li><a href="#functions.arrays">Arrays</a></li>
<li><a href="#functions.strings">Strings</a></li>
<li><a href="#functions.numbers">Numbers</a></li>
<li><a href="#functions.misc">Miscellaneous</a></li>
<li><a href="#functions.events">Custom RGraph event related functions</a></li>
<li><a href="#functions.other">Other</a></li>
</ul>
</li>
<li><a href="#skeleton">The skeleton file</a></li>
</ul>
<a name="overview"></a>
<h4>Overview</h4>
<p>
Working with RGraph objects is purposefully easy, to make them straight forward to integrate into your own scripts if you want to. For any
particular chart type there are a few files required - the common libraries and the chart specific library. Eg:
</p>
<pre class="code">
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
</pre>
<p>
<i>RGraph.common.core.js</i> is a function library that contains a large set of functions that support the chart classes.
Some functions, and sets of functions, have their own files. For example, the zoom functions reside in <i>RGraph.common.zoom.js</i>,
so if you don't need zoom, you don't need this file.
Each of the chart libraries (<i>RGraph.*.js</i>) contains that particular charts class. If you'd like to see a "bare bones"
implementation, you can look at the <a href="../examples/basic.html">basic example</a>. There's also a
<a href="#skeleton">skeleton example</a> to make it easier to create new chart types.
</p>
<a name="references"></a>
<h4>Canvas and context references</h4>
<p>
Each chart object maintains references to the <i>context</i> and <i>canvas</i> as properties. So to get hold of them all you
need to do is this:
</p>
<pre class="code">
<script>
window.onload = function ()
{
// 1/2 First draw the chart
var myBar = new RGraph.Bar('myCanvas', [1,5,8,4,6,3,1,5,7,8,4,6]);
myBar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
myBar.Draw();
// 2/2 Now get hold of the references
var context = myBar.context; // Get hold of a reference to the context
var canvas = myBar.canvas; // Get hold of a reference to the canvas
}
</script>
</pre>
<a name="events"></a>
<h4>Working with events</h4>
<p>
When working with events, you may come across the situation where you have a reference to the <i>canvas</i>, but
also need to access the chart object. For this reason the constructor of each object adds a reference to the object to the
canvas and you can access it like this:
</p>
<pre class="code">
<script>
document.getElementById("myCanvas").onclick = function (e)
{
var src = (RGraph.isIE8() ? event.srcElement) : e.target;
// The RGraph object constructors add __object__ to the canvas.
var myBar = src.__object__;
}
</script>
</pre>
<a name="coords"></a>
<h4>Working with chart coordinates</h4>
<p>
For most chart types, the coordinates of elements (eg bars, lines etc) are to be found in the class variable <i>obj.coords</i>.
This is usually a multi-dimensional array consisting of the coordinates of those shapes, or of points. As an example the bar
chart maintains the X, Y, width and height of each bar (or sections of bars in a stacked bar chart). The coords array is
usually a flat array, even when you have multiple sets of data.
</p>
<p>
By using the RGraph.getMouseXY() function and this array you can determine if a bar was clicked on, or if the mouse is near a
line point etc.
</p>
<pre class="code">
var myCoords = myBar.coords;
</pre>
<p>
<b>Note:</b> Previously the coords array values sometimes included the margin values, and sometimes didn't. As of 17th
April 2010 the values have all been unified to not include the margin values, so the values are as reported.
</p>
<p>
<b>Note:</b>
The Line chart also has an object variable <i>myObj.coords2</i>, where the coordinates are indexed differently -
by line index.
</p>
<a name="data"></a>
<h4>Working with chart data</h4>
<p>
Another variable you may need is the <i>data</i> variable. For most chart types, this is where the data is stored. It is usually
untouched, so it is as you supplied to the chart objects constructor. A notable exception to this is filled line charts.
Here the original data is stored in the class variable <i>original_data</i>. The data supplied is modified to produce the stacking
effect. If you need to modify a filled line charts data you will need to change this variable instead.
</p>
<p>
Not all chart types use the <i>data</i> variable. For some the name is different so that it makes a little more sense. The
chart types and their associate data variables are listed below<sup>1</sup>.
</p>
<style>
table#data_properties td,
th {
text-align: center;
}
</style>
<table border="0" align="center" id="data_properties">
<tr>
<th>Chart type</th>
<th>Data variable(s)</th>
</tr>
<tr>
<td>Bar</td>
<td>obj.data</td>
</tr>
<tr>
<td>Bi-polar</td>
<td>obj.left, obj.right</td>
</tr>
<tr>
<td>Donut</td>
<td>This is now a variant of the Pie chart</td>
</tr>
<tr>
<td>Fuel</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Funnel</td>
<td>obj.data</td>
</tr>
<tr>
<td>Gantt</td>
<td>See the <a href="gantt.html#events">docs</a></td>
</tr>
<tr>
<td>Gauge</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Horizontal Bar</td>
<td>obj.data</td>
</tr>
<tr>
<td>Horizontal Progress bar</td>
<td>obj.max, obj.value</td>
</tr>
<tr>
<td>LED</td>
<td>obj.text</td>
</tr>
<tr>
<td>Line</td>
<td>obj.original_data<sup>3</sup></td>
</tr>
<tr>
<td>Meter</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Odometer</td>
<td>obj.start, obj.end, obj.value</td>
</tr>
<tr>
<td>Pie</td>
<td>obj.angles, obj.data</td>
</tr>
<tr>
<td>Radial Scatter chart</td>
<td>obj.data</td>
</tr>
<tr>
<td>Rose</td>
<td>obj.max, obj.data</td>
</tr>
<tr>
<td>Scatter</td>
<td>obj.max, obj.data<sup>2</sup></td>
</tr>
<tr>
<td>Thermometer</td>
<td>obj.min, obj.max, obj.value</td>
</tr>
<tr>
<td>Traditional Radar</td>
<td>obj.data, obj.max</td>
</tr>
<tr>
<td>Vertical Progress bar</td>
<td>obj.max, obj.value</td>
</tr>
<tr>
<td>Waterfall chart</td>
<td>obj.max, obj.data</td>
</tr>
</table>
<ol>
<li style="margin-top: 0">In the table, <i>obj</i> refers to your chart object.</li>
<li style="margin-top: 0">For the Scatter chart, each data point is an array of X/Y coordinates, the color and the tooltip for that point.</li>
<li style="margin-top: 0">
The Line chart <i>obj.original_data</i> is an aggregation of all the datasets given to the Line chart, so the first
dataset is held in <i>obj.original_data[0]</i>, the second in <i>obj.original_data[1]</i> etc.
</li>
</ol>
<a name="updating"></a>
<h4>Updating your charts dynamically</h4>
<p style="background-color: #ffa; padding: 3px; border: 1px dashed black">
<b>Note:</b>
It is important that you're careful with types when making AJAX requests. Since the response is initially a string,
and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To
do this you can use the <i>Number()</i> or <i>parseInt()</i> functions. For example:
</p>
<pre class="code">
<script>
num = Number('23');
num = parseInt('43');
</script>
</pre>
<p>
A common request is to be able to update charts dynamically. This is quite simple and consists of three steps:
</p>
<ol>
<li style="margin-top: 0">Get the new data from the server (with an AJAX request for example).</li>
<li style="margin-top: 0">Set the data in your chart object. See the above table for the appropriate property to use.</li>
<li style="margin-top: 0">Call the .Draw() method again.</li>
</ol>
<p>
If you don't need to get data from your server (ie it's all client-side) then you can omit the first step. Also, it may be
sufficient to simply recreate the entire object from scratch. This means that you won't have to alter and
RGraph internal properties - just recreate the chart object and configuration. There's a simple function
you can use for AJAX purposes <a href="index.html#ajax">here</a>.
</p>
<a name="accessors"></a>
<h4>Setting properties</h4>
<p>
To set RGraph properties, ideally you should use each objects setter (there's also a corresponding getter). These functions
accomodate some backwards compatibility changes, so by not using them you run the risk of your charts not working entirely as
expected.
</p>
<pre class="code">
myObj.Set('chart.gutter.left', 25);
myObj.Get('chart.gutter.left');
</pre>
<a name="references.other"></a>
<p> </p>
<h4>References available on RGraph objects</h4>
<p>
RGraph stores various references to objects on the canvas (typically) to make getting hold of them easier. There's also a
Registry object in
which references are stored. Typically the objects are named with the format <i>__xxx__</i>, and you can inspect the
objects by using a console(eg the inspector that's part of Google Chrome - <i>CTRL+SHIFT+J</i>). Some examples are:
</p>
<ul>
<li>__object__ on the canvas - a reference to the chart object</li>
<li>
RGraph.Registry.Get('chart.tooltip') - a reference to the currently visible tooltip. This in turn has the following
available:
<ul>
<li>__text__ - Since setting .innerHTML can cause changes in HTML, this is the original tooltip text.</li>
<li>__index__ - This is the numerical index corresponding to the tooltips array that you set.</li>
<li>__dataset__ - Used in the Scatter chart and corresponding to the dataset.</li>
<li>__canvas__ - A reference to the original canvas that triggered the tooltip.</li>
</ul>
</li>
<li>
RGraph.Registry.Get('chart.mousedown') - Used in annotating, and stipulates whether the mouse button is currently
pressed.
</li>
<li>
RGraph.Registry.Get('chart.contextmenu') - The currently shown context menu, if any. This in turn has the following
properties:
<ul>
<li>__canvas__ - The original canvas object.</li>
</ul>
</li>
</ul>
These are just a sample of what's available, to find more you should use an introspection tool or look at the source.
<a name="scale"></a>
<h4>Scale information</h4>
<p>
For the Bar, Bipolar, HBar, Line and Scatter charts the scale that is used is stored in the <i>scale</i> class variable. Eg:
</p>
<pre class="code">
<script>
var myBar = new RGraph.Bar('cvs', [56,43,52,54,51,38,46,42,52]);
myBar.Draw();
var myScale = myBar.scale
</script>
</pre>
<a name="text"></a>
<h4>Adding text to your charts</h4>
<p>
If you want to add arbitrary text to your chart(s) you can use the API function <a href="#functions.other">RGraph.Text().</a>
</p>
<pre class="code">
<script>
// Draw a basic chart
var myObj = new RGraph.Bar('myCanvas', [4,5,5,8,7,6,4,8,5,9]);
myObj.Draw();
// Draw some text
myObj.context.beginPath();
size = 12;
font = 'Verdana';
text = 'Some text!;
x = 10;
y = 10;
RGraph.Text(myObj.context, font, size, x, y, text);
myObj.context.fill();
</script>
</pre>
<a name="functions"></a>
<h4>RGraph functions</h4>
<p>
This is a list of some of the functions available to you in the RGraph common libraries.
It's not every single one that's available, but is a list of the common ones that you're likely to want to use. Arguments
in square brackets are optional.
</p>
<pre class="code">
<script src="RGraph.common.core.js"></script>
<script>
// Returns 9
myArray = [3,2,5,4,9,7,8];
max = RGraph.array_max(myArray);
</script>
</pre>
<a name="functions.arrays"></a>
<h4>Arrays</h4>
<ul>
<li><b>(number) RGraph.array_max(array)</b><br />Returns the maximum value in the array.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(number) RGraph.array_sum(array)</b><br />Returns the sum of all values in the array. You can also pass a single integer, in which case it is simply returned as-is.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(array) RGraph.array_clone(array)</b><br />Creates a copy/clone of the given array. Only numerically indexed arrays are supported.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(array) RGraph.array_reverse(array)</b><br />Returns a reversal of the given array.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(boolean) RGraph.is_array(obj)</b><br />Returns true or false as to whether the given object is an array or not.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(array) RGraph.array_pad(array, length[, value])</b><br />Pads the given array to the specified length (if the length is less, if not the array is returned as is). The third, optional, argument is the value which is used as the pad value. If not specified, <i>null</i> is used.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(array) RGraph.array_shift(array)</b><br />Shifts an element off of the start of the given array and returns the new array.<br /><i>File: RGraph.common.core.js</i><p /></li>
</ul>
<a name="functions.strings"></a>
<h4>Strings</h4>
<ul>
<li><b>(string) RGraph.rtrim(string)</b><br />Strips the right hand white space from the string that you pass it.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li>
<b>(string) RGraph.number_format(obj, number[, prepend[, append]])</b><br />
This formats the given number (which can be either an integer or a float. The prepend and append variables are
strings which are added to the string (eg 5%).<br /><br />
<b>Note:</b>As of 5th September 2010 this functions argument list has been changed to include the chart object, as shown above.<br /><br />
<i>File: RGraph.common.core.js</i><p />
</li>
</ul>
<a name="functions.numbers"></a>
<h4>Numbers</h4>
<ul>
<li><b>(number) RGraph.random(min, max)</b><br />Returns a random number between the minimum and maximum that you give.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(string) RGraph.number_format(number[, prepend[, append]])</b><br />See <a href="#functions.strings">above</a>.<br /><i>File: RGraph.common.core.js</i></li>
</ul>
<a name="functions.misc"></a>
<h4>Miscellaneous</h4>
<ul>
<li>
<b>(object) RGraph.Effects.ReplaceCanvasWithDIV(canvas)</b><br />
This function is used by some animation functions to stop the page layout changing when the canvas is removed from
the document. It removes the canvas from the document, replaces it with a DIV and then adds the canvas as a child node
of the DIV. The canvas is placed in the center of the DIV.
<br /><i>File: RGraph.common.effects.js</i>
<p />
</li>
<li>
<b>(object) RGraph.FixEventObject(event)</b><br />Pass this function an event object and it will attempt to "fill in" the missing properties (depending on the browser).
It tries to add:<br /><br />
<ul>
<li>pageX (MSIE)</li>
<li>pageY (MSIE)</li>
<li>target (MSIE)</li>
<li>stopPropagation() (MSIE)</li>
<li>offsetX (FF)</li>
<li>offsetY (FF)</li>
</ul>
<br /><i>File: RGraph.common.core.js</i>
<p />
</li>
<li><b>(null) RGraph.OldBrowserCompat(context)</b><br />This function "fills in" any required functions that some browsers don't have. At the moment this consists of adding the measureText() and fillText() functions to the context when they're missing (usually this means older versions of Opera).<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(number) RGraph.GetDays(date)</b><br />This returns the number of days in the given month. The argument should be a Date object.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(null) RGraph.pr(mixed)</b><br />Emulates the PHP function print_r() by recursively printing the structure of whatever you pass to it. It handles numbers, strings, arrays, booleans, functions and objects.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(null) p(mixed)</b><br />An alias of the above albeit far shorter to type.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(null) cl(mixed)</b><br />A shortcut for the Firebug and Google Chrome debug function console.log().<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(null) RGraph.Clear(canvas[, color])</b><br />Clears the canvas by drawing a white (or the optional color you give) rectangle over it. As of 23rd January 2011 you can now specify <i>transparent</i> as the color and the canvas will be reset back to transparency instead of to white. This may become the default at a later date.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li>
<b>(null) RGraph.ClearAnnotations(id)</b><br />This function clears the annotation data associated with the given canvas ID (but DOES NOT redraw the chart). If you want to clear the visible annotations too, you will need to redraw the canvas. You could do this using the following code:
<br />
<pre class="code">
function ClearAndRedraw (obj)
{
RGraph.Clear(obj.canvas); // This function also calls the RGraph.ClearAnnotations() function
obj.Draw();
}</pre>
<br /><i>File: RGraph.common.annotatate.js</i><p />
</li>
<li><b>(null) RGraph.ReplayAnnotations(object)</b><br />This function redraws any annotations which have previously been drawn on the canvas. You would use this function when annotations are turned off and you want previous annotations to be displayed.<br /><i>File: RGraph.common.annotate.js</i><p /></li>
<li><b>(array) RGraph.getMouseXY(event)</b><br />When passed your event object, it returns the X and Y coordinates (in relation to the canvas) of the mouse pointer. (0,0) is in the top left corner, with the X value increasing going right and the Y value increasing going down.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(array) RGraph.getCanvasXY(canvas)</b><br />Similar to the above function but returns the X/Y coordinates of the canvas in relation to the page.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(number) RGraph.degrees2Radians(number)</b><br />Converts and returns the given number of degrees to radians. 1 radian = 57.3 degrees.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(array) RGraph.getScale(max, obj)</b><br />Given the maximum value this will return an appropriate scale. The second argument is the graph object.<br /><i>File: RGraph.common.core.js</i><p /></li>
<li><b>(mixed) RGraph.Registry.Get(name)</b><br />In conjunction with the next function, this is an implementation of the Registry pattern which can be used for storing settings.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(mixed) RGraph.Registry.Set(name, value)</b><br />In conjunction with the previous function, this is an implementation of the Registry pattern which can be used for storing settings.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.Register(object)</b><br />This function is used in conjunction with the next to register a canvas for redrawing. Canvases are redrawn (for example) when tooltips or crosshairs are being used.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li>
<b>(null) RGraph.Redraw([id, [color]])</b><br />This function is used in conjunction with the previous to redraw a canvas. Canvases are redrawn (for example) when tooltips or crosshairs are being used.<br /><br /> <b>Note:</b> All canvases that are registered are redrawn. However the optional first argument can be an ID (a string) of the canvas that is NOT to be redrawn. The optional second argument is the color to use when clearing canvases.<br /><i>File: RGraph.common.core.js</i><br /><br />
</li>
<li><b>(null) RGraph.SetShadow(object, color, offetX, offsetY, blur)</b><br />This function is a shortcut function used to set the four shadow properties. The arguments are: your chart object, the shadow color, the X offset, the Y offset, the shadow blur.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.NoShadow(object)</b><br />This function is a shortcut function used to "turn off" the shadow. The argument is your chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li>
<b>(number) RGraph.Async(mixed[, delay])</b><br />This is a simple function but has significant implications on your pages performance. You
can pass this either a function pointer, or a string containing the code to run and it will run the code asynchronously (ie in
parallel to the page loading). In doing so it can mean that your page is displayed faster, as the chart is created
seperate to the page loading. As such, the placement of your canvas tag becomes more important. What you can do is
define the canvas tag and then the code to produce the chart immediately after it. This is how the front page is coded,
(but not using the RGraph.Async() function).
There's an example of it <a href="async.html">here</a>. The optional delay argument is measured in milliseconds
(1 second = 1000 milliseconds) and defaults to 1. What you can do is specify something like 1000 to make the effect
more pronounced to ensure it's working as expected.
<p>
<b>Note:</b> Since a dev release of version 4, Google Chrome versions 4 and 5 have an issue with rendering text when using
the RGraph.Async() function. The solution here is to simply not use the RGraph.Async() function.
</p>
<i>File: RGraph.common.core.js</i><br /><br />
</li>
<li>
<b>(null) RGraph.filledCurvyRect(context, x, y, width, height[, radius[, curvy top left[, curvy top right[, curvy bottom right[, curvy bottom left]]]]])</b><br />
This draws a rectangle with curvy corners. Similar to the built in rectangle functions, and you can control
individual corners. The radius controls the severity of the corner curvature and defaults to 3. By default all
the corners are curvy.<br /><i>File: RGraph.common.core.js</i><br /><br />
</li>
<li>
<b>(null) RGraph.strokedCurvyRect(context, x, y, width, height[, radius[, curvy top left[, curvy top right[, curvy bottom right[, curvy bottom left]]]]])</b><br />
This draws a rectangle with curvy corners. Similar to the built in rectangle functions, and you can control
individual corners. The radius controls the severity of the corner curvature and defaults to 3. By default all
the corners are curvy.<br /><i>File: RGraph.common.core.js</i><br /><br />
</li>
<li>
<b>(null) RGraph.Reset(canvas)</b><br />
This function resets the canvas. At first this function may appear similar to the RGraph.Clear() function, however this
function will reset any translate() that has been performed, and so can stop them accumulating.
<br /><i>File: RGraph.common.core.js</i><br /><br />
</li>
</ul>
<a name="functions.events"></a>
<h4>Custom RGraph event related functions</h4>
<ul>
<li><b>(null) RGraph.FireCustomEvent(object, event)</b><br />This fires a custom event. The object is your chart object, and the name is a string specifying the name of the event.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(number) RGraph.AddCustomEventListener(object, event, callback)</b><br />This attaches a function to the specified event. The object argument is your chart object, the event argument should be the name of the event, eg <i>ontooltip</i>, and the function argument is your function which handles the event. The return value is an ID which can be used with the <i>RGraph.RemoveCustomEventListener()</i> function.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.RemoveCustomEventListener(object, id)</b><br />This removes the custom event listener that corresponds to the given ID. The arguments are the chart object and the ID of the event handler to remove (as returned by <i>RGraph.AddCustomEventListener()</i>).<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.RemoveAllCustomEventListeners([id])</b><br />To easily remove all custom event listeners you can use this function. It also can optionally take one argument - a canvas ID - to limit the clearing to.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
</ul>
<a name="functions.other"></a>
<h4>Other</h4>
<p>
These are functions which are less generic, and used to build the charts. You may still wish to use them however.
</p>
<ul>
<li><b>(null) RGraph.lineByAngle(context, x, y, angle, length)</b><br />This function draws a line from the given X and Y coordinates at the specified angle.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li>
<b>(null) RGraph.Text(context, font, size, x, y, text[, valign[, halign[, border[, angle[, background[, bold[, indicator]]]]]]])</b><br />
This function acts as a wrapper around the canvas text functionality. The arguments are:
<ul>
<li>The context is the canvases 2D context.</li>
<li>The font is the name of the font you want to use (eg Arial).</li>
<li>The size is an integer specifying the size of the text, (measured in points).</li>
<li>The x and y arguments are the X/Y coordinates at which to draw the text.</li>
<li>The text argument is the text to draw.</li>
<li>The optional valign argument is the vertical alignment and can be either <i>top</i>, <i>center</i> or <i>bottom</i>.</li>
<li>The optional halign argument is the horizontal alignment and can be <i>left</i>, <i>center</i> or <i>right</i>.</li>
<li>The optional border argument is a boolean (<i>true</i> or <i>false</i>) controlling whether the text has a border.</li>
<li>The optional angle argument specifies the angle at which the text is drawn (rotated around the X/Y coordinates and measured in degrees).</li>
<li>The optional background argument is the color of the background, (eg #fff).</li>
<li>The optional bold argument is boolean which controls whether the text is bold or not.</li>
<li>And the optional indicator argument is a boolean which controls whether a placement indicator is shown.</li>
</ul>
<br /><i>File: RGraph.common.core.js</i>
<br /><br />
</li>
<li><b>(null) RGraph.DrawTitle(canvas, text, gutter[, centerx[, size]])</b><br />This function draws the title. The centerx argument is the center point to use. If not given the center of the canvas is used.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.Tooltip(canvas, text, x, y, idx)</b><br />This function shows a tooltip. The idx value corresponds to the tooltip array that you give.<br /><i>File: RGraph.common.tooltips.js</i><br /><br /></li>
<li><b>(null) RGraph.DrawKey(object, key, colors)</b><br />This function draws the key. The first argument is the chart object, the second is an array of key information and the last is an array of the colors to use.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.DrawBars(object)</b><br />This draws the horizontal background bars. The argument is the chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.DrawInGraphLabels(object)</b><br />This draws the in-graph labels. The argument is the chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.DrawCrosshairs(object)</b><br />This function draws the crosshairs. The argument is the chart object.<br /><i>File: RGraph.common.core.js</i><br /><br /></li>
<li><b>(null) RGraph.HideContext()</b><br />This function clears the context menu. RGraph uses it to hide the context menu, but only AFTER your function/callback is run. You may wish to hide the context menu before your own function, in which case you can call this function.<br /><i>File: RGraph.common.context.js</i><br /><br /></li>
<li>
<b>(null) RGraph.showPNG([canvas[, event]])</b><br />
This function allows you to easily facilitate getting a PNG image representation of your chart.
You can use it like this:<br />
<pre class="code">myBar.Set('chart.contextmenu', [
<span style="color: green">['Get PNG', RGraph.showPNG]</span>,
null,
['Cancel', function () {}]
]);</pre>
Optionally, you can pass in the canvas as an argument which will be used, meaning now you do not have to use a
context menu (there's an example <a href="png.html"><b>here</b></a>). It WAS originally designed to be used with a context menu, hence it's part of the <i>RGraph.core.context.js</i>
file.<br />
<i>File: RGraph.common.context.js</i>
<br /><br />
</li>
<li>
<b>(number) RGraph.getGutterSuggest(obj, data)</b><br />
This function returns a suggested gutter setting based on the vertical labels. If the bottom labels are larger, this
setting may be inappropriate. The <i>data</i> variable is a simple single dimension array, <i>eg [1,2,3,4,5]</i>.
<br />
<pre class="code">
var size = RGraph.getGutterSuggest(obj, data);
obj.Set('chart.gutter.left', size);
</pre>
<i>File: RGraph.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) RGraph.isIE8()</b><br />
This function tests the useragent for MSIE8.<br />
<i>File: RGraph.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) RGraph.isIE8up()</b><br />
This function tests the useragent for MSIE8 or higher.<br />
<i>File: RGraph.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) RGraph.isIE9()</b><br />
This function tests the useragent for MSIE9.<br />
<i>File: RGraph.common.core.js</i>
<br /><br />
</li>
<li>
<b>(boolean) RGraph.isIE9up()</b><br />
This function tests the useragent for MSIE9 or higher.<br />
<i>File: RGraph.common.core.js</i>
<br /><br />
</li>
<li>
<b>(null) RGraph.background.Draw(obj)</b><br />
This function is used by the Bar, Gantt, Line and Scatter chart to draw the chart background (but not the axes).
It is passed the chart object which it uses to get the properties it uses:<br /><br />
<div>
<div style="float: left">
<ul>
<li>chart.gutter</li>
<li>chart.variant</li>
<li>chart.text.size</li>
<li>chart.text.font</li>
<li>chart.title</li>
<li>chart.title.xaxis</li>
<li>chart.title.xaxis.pos</li>
<li>chart.title.yaxis</li>
<li>chart.title.yaxis.pos</li>
<li>chart.background.barcolor1</li>
<li>chart.background.grid</li>
<li>chart.background.grid.width</li>
</ul>
</div>
<div style="float: left">
<ul>
<li>chart.background.grid.autofit</li>
<li>chart.background.grid.autofit.numhlines</li>
<li>chart.background.grid.autofit.numvlines</li>
<li>chart.background.grid.autofit.align</li>
<li>chart.background.grid.hlines</li>
<li>chart.background.grid.vlines</li>
<li>chart.background.grid.hsize</li>
<li>chart.background.grid.vsize</li>
<li>chart.background.grid.color</li>
<li>chart.background.grid.border</li>
<li>chart.background.barcolor2</li>
</ul>
</div>
</div>
<br clear="all" />
<p>
Note that this function also calls RGraph.DrawTitle() in order to draw the title.<br />
<i>File: RGraph.common.core.js</i>
</p>
<br /><br />
</li>
</ul>
<a name="skeleton"></a>
<h4>The skeleton file</h4>
<p>
The skeleton object
(<a href="../libraries/RGraph.skeleton.js" target="_blank"><i>RGraph.skeleton.js</i></a>) gives you a base for creating new chart types that
match the RGraph object system (eg getters, setters, RGraph names etc). Example usage of the skeleton object would be:
</p>
<pre class="code">
<script>
var myObj = new RGraph.Skeleton('cvs', [3,3,4,5,3,8,3,2,1,9]);
myObj.Set('chart.colors', ['red']);
myObj.Draw();
var colors = myObj.Get('chart.colors');
</script>
</pre>
</body>
</html>
|
