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
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
|
<!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 - documentation</title>
<meta name="keywords" content="rgraph html5 canvas chart docs examples" />
<meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation and HTML5 examples" />
<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.jpg"/>
<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>
<meta name="keywords" content="rgraph chart html5 javascript canvas" />
<meta name="description" content="RGraph: HTML5 Javascript charts library Javascript charts & HTML5 canvas charts library" />
<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>
>
Documentation and HTML5 examples
</div>
<h1>RGraph: <span>HTML5 Javascript charts library</span> - Documentation and HTML5 examples</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>
<div style="text-align: center">
<div class="warning" style="display: inline; display: inline-block">
Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please
<a href="mailto:support@rgraph.net"><b>contact support</b></a> to discuss your requirements.
</div>
</div>
<div>
<h4>Introduction</h4>
<ul>
<li>
<a href="../index.html#intro" title="A short description of RGraph: HTML5 Javascript charts library">Introduction to RGraph: HTML5 Javascript charts library</a>
<ul>
<li><a href="what-is-html5-canvas.html" title="A brief description of what HTML5 canvas is">What is HTML5 canvas?</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="../examples/index.html"><b>Example charts</b></a></li>
</ul>
</div>
<div style="float: left; width: 202px">
<h4>Chart types</h4>
<ul>
<li><a href="bar.html">Bar charts</a></li>
<li><a href="bipolar.html">Bi-polar charts</a></li>
<li><a href="donut.html">Donut charts</a></li>
<li><a href="fuel.html">Fuel charts</a></li>
<li><a href="funnel.html">Funnel charts</a></li>
<li><a href="gauge.html">Gauge charts</a></li>
<li><a href="gantt.html">Gantt charts</a></li>
<li><a href="hbar.html">Horizontal bar charts</a></li>
<li><a href="hprogress.html">Horizontal progress bar</a></li>
<li><a href="led.html">LED Grid</a></li>
<li><a href="line.html">Line charts</a></li>
<li><a href="meter.html">Meter charts</a></li>
<li><a href="odo.html">Odometer charts</a></li>
<li><a href="pie.html">Pie charts</a></li>
<li><a href="radar.html">Radar charts</a></li>
<li><a href="rose.html">Rose charts</a></li>
<li><a href="rscatter.html">Radial scatter charts</a></li>
<li><a href="scatter.html">Scatter charts</a></li>
<li><a href="thermometer.html">Thermometer charts</a></li>
<li><a href="vprogress.html">Vertical progress bar</a></li>
<li><a href="waterfall.html">Waterfall charts</a></li>
</ul>
<h4>Basic examples</h4>
<ul>
<li><a href="../examples/basic.html">A basic example</a></li>
<li><a href="basic_tooltips.html">A basic example of a charts in tooltips</a></li>
<li><a href="basic_combined.html">A basic example of a combined Bar/Line chart</a></li>
</ul>
</div>
<div style="float: left; width: 435px">
<h4>Features</h4>
<ul>
<li><a href="effects.html">Animation and visual effects <img src="../images/new.png" border="0" alt="New! width="31" height="12" /></a></li>
<li><a href="gutters.html">Variable gutter sizes</a></li>
<li><a href="setconfig.html">The RGraph.SetConfig() function</a></li>
<li><a href="keys.html">Examples of keys in charts</a></li>
<li><a href="dynamic.html">Updating your charts dynamically</a></li>
<li><a href="png.html">Retrieving a PNG of your charts</a></li>
<li><a href="domcontentloaded.html">DOMContentLoaded example</a></li>
<li><a href="events.html">Custom RGraph events</a></li>
<li><a href="adjusting.html">Adjusting your charts interactively</a></li>
<li><a href="tooltips.html">Using tooltips in your charts</a></li>
<li><a href="resizing.html">Resizing your charts</a></li>
<li><a href="msie.html">Microsoft Internet Explorer support</a></li>
<li><a href="async.html">Asynchronous processing</a></li>
<li><a href="zoom.html">Zooming your charts</a></li>
<li>
<a href="annotating.html">Annotating your charts</a>
<ul>
<li><a href="annotate_persist.html">Making your annotations shareable across browsers/computers</a></li>
</ul>
</li>
<li><a href="combine.html">Combining charts</a></li>
<li><a href="external.html">Integrating RGraph with external libraries (ModalDialog)</a></li>
<li><a href="css.html">Available CSS classes</a></li>
<li><a href="color.html">About canvas color definitions</a></li>
<li><a href="context.html">Context menus</a></li>
</ul>
<ul>
<li><a href="#support" title="Need support? Get it here"><b>Support</b></a></li>
</ul>
<ul>
<li><a href="misc.html">Miscellaneous documentation</a></li>
<li><a href="issues.html">Common issues</a></li>
<li><a href="api.html">API Documentation</a></li>
</ul>
</div>
<div style="float: left; width: 338px">
<h4>Miscellaneous</h4>
<ul>
<li><a href="licensing.html"><b>The RGraph license</b></a></li>
<li><a href=".CHANGELOG.txt">The changelog</a></li>
<li><a href=".BC.txt">Backwards compatibility breaks</a></li>
</ul>
<h4>On this page:</h4>
<ul>
<li><a href="#benefits" title="Benefits of RGraph: HTML5 Javascript charts library">Benefits of RGraph: HTML5 Javascript charts library</a></li>
<li><a href="#browser" title="Information about browser support">Browser support</a></li>
<li><a href="#performance" title="Things you may want to look at concerning performance">Improving the performance of your charts</a></li>
<li><a href="#implementation" title="Implementing RGraph on your website">Implementing RGraph</a></li>
<li><a href="#structure" title="Suggested structure for RGraph">Suggested structure for RGraph</a></li>
<li>
<a href="#integration" title="Information on integrating RGraph with server side scripting">Integration with server side scripting</a>
<ul>
<li><a href="#mysql" title="Integration with PHP & MySQL">Integration with PHP & MySQL</a></li>
<li><a href="#ajax" title="Making AJAX requests">Making AJAX requests</a></li>
</ul>
</li>
</ul>
</div>
<!------------------------------------------------------------------------------------------------------------------------>
<br clear="all" />
<hr />
<a name="benefits"></a>
<br /> <br /> <br />
<h2>Benefits of RGraph: HTML5 Javascript charts library</h2>
<p>
The HTML5 canvas tag is a new tag for HTML5. It allows for two dimensional drawing easily using Javascript.
This makes it perfect for producing charts. Because Javascript runs on your users' computer, none of the load on your web server
normally associated with producing charts is incurred. Not only that but because
of the greater processing power that is typically available on users' computers, they will be much faster. And,
because the code can be both compressed (for example if you're using Apache, mod_gzip will do this automatically for you) and
cached, bandwidth usage can be massively reduced. This makes it economically attractive to employ at the same time as
benefiting your website, ie:
</p>
<ul>
<li><b>It can save you money by reducing the load on your web server(s)</b><br /><br /></li>
<li><b>It can speed up your web pages</b></li>
</ul>
<p>
Imagine, you are creating 10,000 charts a day and the data is such that the resulting charts cannot be cached. With the RGraph
library you can reduce that figure to zero. All the processing is done by each individual web browser, much like
showing the HTML that you send to them. So you don't have to send any images, you simply send them the Javascript charts libraries
once. So, much lower bandwidth bills and less strain on your webserver.
</p>
<p>
And if that wasn't enough, because the charts are created using Javascript, they will work offline if you view a .html page
on your own PC. Download the archive and see! Useful if you need to do a presentation (for example) and want to use the same
charts as your website.
</p>
<div>
<div style="width: 45%; background-color: #fff; display: inline; display: inline-block">
<ul>
<li>Cross browser support.</li>
<li>20+ Different base chart types (<a href="../examples/index.html">Examples</a>).</li>
<li>Charts work on and off-line.</li>
<li>Interactive features.</li>
</ul>
</div>
<div style="width: 45%; display: inline; display: inline-block">
<ul>
<li>Charts are created on the client - no server overhead.</li>
<li>Very easy setup (see <a href="#implementation">Implementing RGraph</a>).</li>
<li>Fully documented.</a></li>
<li>Very easy to learn.</li>
</ul>
</div>
</div>
<a name="browser"></a>
<br /> <br /> <br />
<h2>Browser support</h2>
<p>
Since the charts are produced using HTML5 features (the new <b>canvas</b> tag), client support includes:
</p>
<ul>
<li>Mozilla Firefox 3.0+</li>
<li>Google Chrome 1+</li>
<li>Apple Safari 3+</li>
<li>Opera 9.5+</li>
<li>Microsoft Internet Explorer 8+ (see note)</li>
<li>iPhone (text support from iOS v4+)</li>
<li>iPad (text support from iOS v4.2+)</li>
</ul>
<p>
The HTML5 canvas tag is part of the <a href="http://www.w3.org/html/wg/html5/" target="_blank">HTML5 specification</a>,
and all of the above browsers have some sort of support for it.
</p>
<p>
<b>HTML5 canvas & Microsoft Internet Explorer (MSIE)</b><br />
Microsoft Internet Explorer 8 doesn't natively support the HTML5 canvas tag. To support
MSIE8 you will need to use either
<a href="http://code.google.com/chrome/chromeframe/" target="_blank">Google Chrome Frame</a> or
<a href="http://code.google.com/p/explorercanvas/" target="_blank">ExCanvas from Google</a>
(which is included in the RGraph archive). Read more about Internet Explorer compatibility
<a href="msie.html">here</a>.
<p />
<span style="color: #090">
Starting from the developer preview 3, <b style="color: black">Microsoft Internet Explorer 9</b> has full support for
HTML5 canvas.
MSIE 6 and 7 are supported by way of Google Chrome Frame.
</span>
</p>
<p>
<b>RGraph and older browsers</b><br />
Older browsers (eg Chrome 1, Firefox 3, Safari 3, Opera 9.5) are supported, however if they don't support the canvas shadow or
text APIs, these will naturally be unavailable. Earlier versions of these browsers may work, but are untested.
</p>
<p>
<b>Other devices</b><br />
Other devices (eg mobile devices) may support or may be intending to support the HTML5 CANVAS tag as part of their HTML5 support. Typically
the newer a device or its OS the higher the likelyhood is that it has support for HTML5 canvas.
</p>
<a name="performance"></a>
<br /> <br /> <br />
<h2>Improving the performance of your charts</h2>
<p>
Although performance is excellent, (eg compared to server based charts libraries), you may still want to tune
RGraph further. The biggest thing you can do is use HTTP compression, which reduces the initial download time of the libraries,
but there are a number of things you can do:
</p>
<ul>
<li>
<b>Compression</b><br />HTTP compression can dramatically reduce your bandwidth bills and increase the speed
of your website. The RGraph.common.core.js file for example used to be over 100k, but with compression this was reduced
to around 17k. Less than a fifth of the original size! <span style="color: red">If you do only one thing to aid performance,
then it should be this.</span>
<p>
To achieve this with Apache you have a few options:
</p>
<ul style="list-style-type: disc">
<li>You can use the Apache module mod_gzip which compresses the libraries on the fly.</li>
<li>
You can compress the libraries manually using the Unix gzip command, rename them to remove the .gz suffix
and add the header using an Apache directive
(eg <span style="background-color: #C5FFC5; padding: 1px">AddEncoding gzip .js</span>). If you have some sort of
release process/script, it would make sense to add this to it to automate the procedure.
</li>
</ul>
<p>
</li>
<li>
<b>Minification</b><br />
Minification reduces the size of the library before compression takes effect, removing unnecessary spaces and comments etc.
A combination of minification and compression will give superb results. For example, before being split up into seperate files,
minification combined with compression reduced the common library from over 100k to roughly 10k (!). There is a PHP shell
script that you can use to minify the libraries in the scripts directory.
<p>
You can get pre-minified versions of the libraries <a href="http://www.rgraph.net/RGraph.minified.zip">here</a>.
</p>
</li>
<p>
<li>
<b>Pre-emptive caching</b><br />
Slightly different to caching itself, is pre-emptive caching. This involves downloading the libraries before the page that requires
them is shown. This way, they're already in the users browser cache and the chart will subsequently appear to be much much
quicker. An example of this would be having the library included at the bottom of your index page of your website (optionally
with the <b>defer="defer"</b> attribute). The script can be downloaded at will because the page doesn't actually use it, but
for subsequent pages it will already be in the users browser cache.
<p>
</li>
<li>
<b>Caching</b><br />
Since the libraries you're using won't change that often, you can set distant Expires: headers on them, or appropriate
Cache-Control: headers, and the client will not even have to contact your server for it. When you want to make sure
the library is re-downloaded (eg. you update the library), then simply change the filename.
<p>
</li>
<li>
<b>Script tag placement</b><br />
According to <a href="http://developer.yahoo.com/performance/" target="_blank">Yahoo! guidelines</a> placing the <SCRIPT>
tag at the bottom of the page can increase the percieved load time. If you do this, then your charts should be
created in the window.onload event, otherwise the browser may try to create them without the library
having been loaded, and will therefore subsequently fail.
<p>
You should also consider the effect that this has when your page is rather weighty. If the page is weighty there
will be a small delay before the onload event fires, and therefore creates the chart. This might not be so bad if the
chart is not immediately visible, however if it is then you should carefully consider using the onload event. You
may wish to load the library in the page header, define the canvas tag and then immediately define the javascript
that creates the chart. This way
the chart will be created and shown, and then the rest of the page loads. The end result is that your chart
appears to be faster.
<p />
Between the onload event, asychronous Javascript and careful tag placement, you will need to experiment to get the right result
for you.
</li>
<li>
<b>Document structure</b><br />
The structure of your document can have a significant impact on how fast your charts are displayed. If, for example, you use
tables for layout, this can delay the display of elements that are affected by the size of the table. Where possible, you
should consider trying to convert your layout to DIVs. An example of this is the front page of this website. The charts
were right aligned using a table as a container. This caused a visible delay when showing them. In this case it was a
simple matter to convert the page to use DIVs, and the page subsequently displays much faster.
<p />
</li>
<li>
<b>Creating your charts asynchronously</b><br />
Where possible, you may wish to create your charts asynchronously. This allows the browser to continue rendering the page
immediately after getting to the code that creates the chart. This might not be perceptible if you don't have a lot of
charts, or your page is small. You can read a little more about this and see example code <a href="async.html">here</a>.
<p />
Note that recent releases of Google Chrome (from a dev release of version 4) have had an issue with creating charts
asynchronously, which presents itself by not drawing text sometimes (it's not consistent). Simply not using
asynchronous chart production in this case resolves the issue.
</li>
<li>
<b>DOMContentLoaded event</b><br />
Using this event can speed up the display of your charts signifcantly compared to the more well known <i>onload</i> event.
It is supported by Chrome, Gecko based browsers (ie Firefox), Safari, Opera and Internet Explorer 9. This event fires when
the structure of the page is loaded, but not necessarily the images or CSS. This means that if your page is laden with
images, this event will fire before the onload event, thus creating your charts quicker. The effect can be very noticeable.
<pre class="code">
function addListener(func)
{
if(window.addEventListener) {
window.addEventListener('DOMContentLoaded', func, false);
} else {
document.attachEvent("onDOMContentLoaded", func);
}
}
</pre>
You can read more about the <i>DOMContentLoaded</i> event on the Mozilla site, <a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events" target="_blank">here</a>,
and the Microsoft site <a href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html" target="_blank">here</a>.
There's an example <a href="domcontentloaded.html">here</a>.
<p />
</li>
<li>
<b>AJAX requests</b><br />
If you can take advantage of AJAX, you can use this method to retrieve data from your server. If, for example, you have a chart that
shows ongoing information, instead of simply refreshing the entire page, you could use an AJAX request to just retrieve the
data that you want and update the chart that way. This reduces the amount of data needed to be transferred, thus reducing the
bandwidth used, and will be quicker than a full page refresh, particularly if your page is weighty. There's a simple AJAX
function that you can use <a href="#ajax">below</a>.
<p />
</li>
<li>
<b>Combining libraries</b><br />
You may wish to consider combining the RGraph libraries into a single file.
This won't save on the size of the individual libraries, but will save on the headers that are sent as part of the response.
If a typical response sends 500 bytes worth of headers, and you send four chart libraries, then combining the libraries
would save 1500 bytes. Multiple factors need to be considered though, including things like caching, which can circumvent
the unneccessary repeated downloading of the libraries.
<p>
To make your life straight-forward, you may want to make this a part of your release script/process. This way you
can make changes to the scripts in your development environment as you would normally.
</p>
<p>
Another effect of combining libraries is reducing the amount of HTTP connections needed to retrieve them. Most browsers
have a limit on how many connections they can create simultaneously, so if they're not being used to retrieve your
chart libraries, they can be used for something else.
</p>
</li>
<li>
<b>Avoiding shadow blur with animations</b><br />
If you're using animations then you may wish to avoid or reduce the shadow blur that you're using. With HTML5 canvas shadow
blur is a drain on performance - so if you're looking to get the most out of your charts or are using animations
which require redrawing the chart, turning off the shadow blur can reduce the time it takes to draw the charts leading to
smoother charts.
</li>
</ul>
<b>A reasonable performance strategy</b>
<p>
Although there's a lot you can do in regards to performance, a few of the points here will suffice for most
websites:
<ul>
<li>Compression</li>
<li>Minification</li>
<li>Pre-emptive caching</li>
<li>Caching</li>
</ul>
The number one thing you should do is compress your libraries. This has multiple benefits and provides by far the most gain,
effectively for free. Secondly, use the minified libraries. Since you can download them <a href="../RGraph.minified.zip">here</a>,
you might as well use them. Then we have pre-emptive caching. Since most websites won't show charts on the front page or will
have a login page that is shown before any charts, this effectively eliminates the charts library download. And lastly caching
should be done as a matter of course. There's no reason to keep downloading the same library so even caching for only 30 minutes
(or the duration of an average visit to your website) will produce results.
</p>
<p>
<b>General website performance tools</b><br /><br />
If your aim is to improve your websites performance as a whole then you may be interested in these tools:
</p>
<ul>
<li>
<a href="http://www.webpagetest.org/" target="_blank">http://www.webpagetest.org/</a><br />
This site can provide a wealth of information about how to improve the permance of your website, specific to your site.<br /><br />
</li>
<li>
<a href="http://code.google.com/speed/page-speed/docs/using_chrome.html" target="_blank">Page Speed for Google Chrome</a><br />
<a href="http://code.google.com/speed/page-speed/docs/using_firefox.html" target="_blank">Page Speed for Mozilla Firefox</a><br />
<a href="http://pagespeed.googlelabs.com/" target="_blank">Page Speed online</a><br />
The Page Speed plugins and the online tool also provide a great deal of information about how to speed up your website.<br /><br />
</li>
<li>
<a href="image2url.html">Convert images to <i>data:</i> URLs</a><br />
A tool which converts images to <i>data:</i> URLs. Using <i>data:</i> URLs can reduce the number of HTTP requests used.
</li>
</ul>
<a name="implementation"></a>
<br /> <br /> <br />
<h2>Implementing RGraph</h2>
<p>
Getting RGraph up and running is very easy and consists of three steps. If you're having trouble I suggest you get hold of a copy of
<a href="http://www.mozilla.com" target="_blank">Firefox</a> along with <a href="http://www.getfirebug.com" target="_blank">Firebug</a> - its
Javascript error console will make debugging your issue much easier. Many problems are down to a library not having been included or
not using the onload event when you need to. You might also benefit from using the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" target="_blank">Web Developer toolbar</a>
for Firefox. This allows you to easily disable caching, thus eliminating any problems that that causes. You could equally use
the Chrome developer tools (CTRL+SHIFT+J), optionally in docked mode, which also provides a good quality Javascript console.
</p>
<ol>
<li>
Include the libraries (put this in your documents <HEAD>):
<pre class="code">
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.adjusting.js"></script> <!-- Just needed for adjusting -->
<script src="RGraph.common.annotate.js"></script> <!-- Just needed for annotating -->
<script src="RGraph.common.context.js"></script> <!-- Just needed for context menus -->
<script src="RGraph.common.effects.js"></script> <!-- Just needed for visual effects -->
<script src="RGraph.common.resizing.js"></script> <!-- Just needed for resizing -->
<script src="RGraph.common.tooltips.js"></script> <!-- Just needed for tooltips -->
<script src="RGraph.common.zoom.js"></script> <!-- Just needed for zoom -->
<script src="RGraph.bar.js"></script> <!-- Just needed for bar charts -->
<script src="RGraph.bipolar.js"></script> <!-- Just needed for bi-polar charts -->
<script src="RGraph.fuel.js"></script> <!-- Just needed for fuel charts -->
<script src="RGraph.funnel.js"></script> <!-- Just needed for funnel charts -->
<script src="RGraph.gantt.js"></script> <!-- Just needed for gantt charts -->
<script src="RGraph.gauge.js"></script> <!-- Just needed for gauge charts -->
<script src="RGraph.hbar.js"></script> <!-- Just needed for horizontal bar charts -->
<script src="RGraph.hprogress.js"></script> <!-- Just needed for horizontal progress bars -->
<script src="RGraph.led.js"></script> <!-- Just needed for LED charts -->
<script src="RGraph.line.js"></script> <!-- Just needed for line charts -->
<script src="RGraph.meter.js"></script> <!-- Just needed for meter charts -->
<script src="RGraph.odo.js"></script> <!-- Just needed for odometers -->
<script src="RGraph.pie.js"></script> <!-- Just needed for pie AND donut charts -->
<script src="RGraph.radar.js"></script> <!-- Just needed for radar charts -->
<script src="RGraph.rose.js"></script> <!-- Just needed for rose charts -->
<script src="RGraph.rscatter.js"></script> <!-- Just needed for rscatter charts -->
<script src="RGraph.scatter.js"></script> <!-- Just needed for scatter charts -->
<script src="RGraph.thermometer.js"></script> <!-- Just needed for thermometer charts -->
<script src="RGraph.vprogress.js"></script> <!-- Just needed for vertical progress bars -->
<script src="RGraph.waterfall.js"></script> <!-- Just needed for waterfall charts -->
</pre>
</li>
<li>
Add the canvas tag (put it where you want the chart to appear):
<pre class="code">
<canvas id="myCanvas" width="600" height="250">[No canvas support]</canvas>
</pre>
</li>
<li>
Create the chart (since it is using the onload event, you can put this anywhere):
<pre class="code">
<script>
window.onload = function ()
{
var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];
var bar = new RGraph.Bar('myCanvas', data);
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Set('chart.gutter.left', 35);
bar.Draw();
}
</script>
</pre>
</li>
</ol>
<p>
There's also a very <a href="../examples/basic.html">basic example</a> of using RGraph, that does very little. It can be helpful to
illustrate how you can get RGraph up and running.
</p>
<a name="structure"></a>
<br /> <br /> <br />
<h2>Suggested structure for RGraph</h2>
<img src="../images/structure.png" width="175" height="205" alt="Suggested structure for RGraph" style="float: right" />
<p>
The suggested layout structure for the RGraph libraries is shown on the right. The <b>www.example.com</b> folder represents
the root/top level of your website with the <b>javascript</b> directory beneath that. The <b>css</b> and <b>images</b>
folders are shown for
illustrative purposes only. If you follow this layout then your URLs to the RGraph libraries would be:
</p>
<p>
<b>http://www.example.com/javascript/rgraph/RGraph.common.core.js</b><br />
<b>http://www.example.com/javascript/rgraph/RGraph.bar.js</b><br />
etc
</p>
<p>
By using this structure you make RGraph easy to update should you need to, and also keep all the RGraph libraries in
one, easy to find, place.
</p>
<br clear="all" />
<a name="integration"></a>
<br /> <br /> <br />
<h2>Integration with server side scripting</h2>
<p>
This is a very easy process, as easy as sending content to the browser. All you need to do is make the <i>data</i> variable
(as in the example below) contain the data you want to be displayed. Eg:
</p>
<pre class="code">
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>
<script>
data = [78,16,26,23,25,51,34,64,84,84];
line = new RGraph.Line("myCanvasTag", data);
line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);
line.Draw();
</script>
</pre>
<p>
To get the above using PHP you could do this:
</p>
<pre class="code"><?php
// This simply makes a string out of the array of data
$myData = join(',', array(78,16,26,23,25,51,34,64,84,84));
// This prints out the required HTML markup
print('<script src="RGraph.common.core.js"></script>' . "\n");
print('<script src="RGraph.line.js"></script>' . "\n\n");
print('<canvas id="myCanvasTag" width="600" height="200">[No canvas support]</canvas>' . "\n\n");
print('<script>' . "\n");
print(' var data = [' . $myData . '];' . "\n\n");
print(' var line = new RGraph.Line("myCanvasTag", data);' . "\n");
print(' line.Set("chart.labels", ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]);' . "\n");
print(' line.Draw();' . "\n");
print('</script>');
?>
</pre>
<p>
Strictly speaking the <span style="font-family: Monospace">var</span> isn't necessary, however if you put the code inside a
function (like window.onload), it's probably best to do so as using <span style="font-family: Monospace">var</span> will
make the variable local, and not global. So doing so will help prevent naming clashes.
</p>
<a name="mysql"></a>
<br /> <br /> <br />
<h4>Integration with PHP & MySQL</h4>
<p>
This is a simple matter of formatting what you get back from MySQL into a string, as the MySQL dump and PHP code
below shows (it's based on a database called RGraph_example):
</p>
<pre class="code">
#
# Table structure for table `daily_statistics`
#
CREATE TABLE `daily_statistics` (
`st_day` char(9) NOT NULL,
`st_statistics` tinyint(4) NOT NULL,
UNIQUE KEY `st_day` (`st_day`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
#
# Dumping data for table `daily_statistics`
#
INSERT INTO `daily_statistics` VALUES ('Mon', 124);
INSERT INTO `daily_statistics` VALUES ('Tue', 95);
INSERT INTO `daily_statistics` VALUES ('Wed', 64);
INSERT INTO `daily_statistics` VALUES ('Thu', 94);
INSERT INTO `daily_statistics` VALUES ('Fri', 75);
INSERT INTO `daily_statistics` VALUES ('Sat', 98);
INSERT INTO `daily_statistics` VALUES ('Sun', 84);
</pre>
<pre class="code">
<?php
/**
* Change these to your own credentials
*/
$hostname = "localhost";
$username = "root";
$password = "PASSWORD";
$database = "RGraph_example";
$connection = mysql_connect($hostname, $username, $password) OR die('Could not connect to MySQL: ' . mysql_error());
mysql_select_db($database);
$result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics");
if ($result) {
$labels = array();
$data = array();
while ($row = mysql_fetch_assoc($result)) {
$labels[] = $row["st_day"];
$data[] = $row["st_statistics"];
}
// Now you can aggregate all the data into one string
$data_string = "[" . join(", ", $data) . "]";
$labels_string = "['" . join("', '", $labels) . "']";
} else {
print('MySQL query failed with error: ' . mysql_error());
}
?>
<html>
<head>
<!-- Don't forget to update these paths -->
<script src="libraries/RGraph.common.core.js" ></script>
<script src="libraries/RGraph.line.js" ></script>
</head>
<body>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<script>
chart = new RGraph.Line('cvs', <?php print($data_string) ?>);
chart.Set('chart.background.grid.autofit', true);
chart.Set('chart.gutter.left', 35);
chart.Set('chart.gutter.right', 5);
chart.Set('chart.hmargin', 10);
chart.Set('chart.tickmarks', 'endcircle');
chart.Set('chart.labels', <?php print($labels_string) ?>);
chart.Draw();
</script>
</body>
</html>
</pre>
<p>
This PHP code provides the data in two strings - <i>$labels_string</i> and <i>$data_string</i>. These variables are then used
in the RGraph code to provide the data and the labels.
</p>
<p><b>Remember:</b></p>
<ul>
<li>Change the database hostname/username/password/database to match your own.</li>
<li>Ensure you have the correct paths to the RGraph libraries.</li>
</ul>
<a name="ajax"></a>
<br /> <br /> <br />
<h4>Making AJAX requests</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>
Here is a simple function that you could use to get data from your server using AJAX:
</p>
<pre class="code">
<script>
/**
* Makes an AJAX call. It calls the given callback (a function) when ready
*
* @param string url The URL to retrieve
* @param function callback A function object that is called when the response is ready, there's an example below
* called "myCallback".
*/
function AjaxCall (url, callback)
{
// Mozilla, Safari, ...
if (window.XMLHttpRequest) {
var httpRequest = new XMLHttpRequest();
// MSIE
} else if (window.ActiveXObject) {
var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = callback;
httpRequest.open('GET', url, true);
httpRequest.send();
}
/**
* This sample callback function is called when the data is ready (readyState=4)
*/
function myCallback ()
{
if (this.readyState == 4 && this.status == 200) {
// Everything is good, the response is received
alert(this.responseText);
}
}
</script>
</pre>
<p>And you would use it like this:</p>
<pre class="code">
<script>
AjaxCall('http://www.example.com/getSomething.php', myCallback);
</script>
</pre>
<p>
There's an example <a href="dynamic.html">here</a> that shows updating your chart dynamically.
</p>
<a name="support"></a>
<br /> <br /> <br />
<h2>Support</h2>
<p>
If you have a support issue you can send it to the support email address:
<a href="mailto:support@rgraph.net"><b>support@rgraph.net</b></a>. You can also follow
<a href="http://www.twitter.com/_rgraph" target="_blank">@_rgraph on twitter</a> to get notifications of new releases and
notable updates.
</p>
<br />
<br />
</body>
</html>
|
