Getting started with RGraph

  Read comments...

Getting RGraph up and running is very easy and consists of four steps. If you're having trouble you can get hold of a copy of Firefox along with Firebug or use Google Chrome and its developer tools - their JavaScript error consoles 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 (or the jQuery ready() event). You might also benefit from using the Web Developer toolbar 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. The Cache Killer extension for Chrome allows you to totally disable the cache (eg during development).

  1. For canvas charts, include the libraries (put this in your documents <HEAD>):
    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>   <!-- Just needed for dynamic features -->
    
    <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.key.js"></script>       <!-- Just needed for keys -->
    <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.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.semicircularprogress.js"></script> <!-- Just needed for SemiCircular Progress charts 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  -->
    
    Or for SVG charts you include these libraries:
    <script src="RGraph.common.core.js"></script>
    
    <script src="RGraph.SVG.common.ajax.js"></script>      <!-- Just needed for ajax functions -->
    <script src="RGraph.SVG.common.fx.js"></script>        <!-- Just needed for visual effects -->
    <script src="RGraph.common.csv.js"></script>           <!-- Just needed for fetching CSV files-->
    <script src="RGraph.common.sheets.js"></script>        <!-- Just needed for getting data from Google Sheets -->
    <script src="RGraph.SVG.common.tooltips.js"></script>  <!-- Just needed for tooltips -->
    
    <script src="RGraph.SVG.bar.js"></script>              <!-- Just needed for Bar charts -->
    <script src="RGraph.SVG.line.js"></script>             <!-- Just needed for Line charts -->
    <script src="RGraph.SVG.pie.js"></script>              <!-- Just needed for Pie charts -->
    
  2. Add the appropriate tag (put it where you want the chart to appear).
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    
    Or for SVG charts you use a <div> tag.
    <div id="chart-container" style="width: 600px; height: 250px; display: inline-block"></div>
    
  3. Create the chart . Since it's using the window.onload event, you can put this anywhere (if you place the code after your canvas tag you might not need to use the window.onload event - which may lead to a performance boost):
    <script>
        window.onload = (function ()
        {
            var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];
    
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: data,
                options: {
                    labels: [
                        'Jan', 'Feb',
                        'Mar', 'Apr',
                        'May', 'Jun',
                        'Jul', 'Aug',
                        'Sep', 'Oct',
                        'Nov', 'Dec'
                    ],
                    gutterLeft: 35
                }
            }).draw();
        });
    </script>
    
    Or for creating an SVG based chart you would do something like this (as you can see it's very similar).
    <script>
        new RGraph.SVG.Line({
            id: 'chart-container',
            data: [5,8,6,3,4,1,9,8,2,3,5,6,7,8,9,4,5,6,3,2,5,4,8,6,4,5,3,1,6,4,5],
            options: {
                backgroundGridVlinesCount: 11,
                hmargin: 0,
                textColor: 'white',
                textSize: 14,
                textFont: 'Verdana',
                filled: true,
                filledColors: ['rgba(25,51,74,0.75)'],
                colors: ['#5AF'],
                gutterLeft: 65,
                gutterRight: 40,
                gutterBottom: 50,
                gutterTop: 20,
                xaxis: false,
                yaxis: false,
                yaxisUnitsPost: 'm',
                yaxisUnitsPre: '$',
                tickmarksStyle: 'circle',
                tickmarksFill: 'black',
                tickmarksLinewidth: 2,
                tickmarksSize: 6,
                linewidth: 4,
                spline: true,
                xaxisLabels: ['Kev','John','Fred','July','Fred','Olga','Ben','Boris','Lenny','Pete','Lewis']
            }
        }).trace();
    </script>
    

There are also basic examples of using RGraph, that do very little. They can be helpful to illustrate how you can get RGraph up and running. You'll also find basic examples of creating SVG in the SVG section of the demos.

 

Suggested structure for RGraph

Suggested structure for RGraph

The suggested layout structure for the RGraph libraries is shown on the right. The www.example.com folder represents the root/top level of your website with the javascript directory beneath that. The css and images folders are shown for illustrative purposes only. If you follow this layout then your URLs to the RGraph libraries would be:

http://www.example.com/javascript/rgraph/RGraph.common.core.js
http://www.example.com/javascript/rgraph/RGraph.bar.js
http://www.example.com/javascript/rgraph/RGraph.svg.common.core.js
http://www.example.com/javascript/rgraph/RGraph.svg.bar.js
etc

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.


 

Alternative structure for RGraph

Alternative structure for RGraph

If you anticipate upgrading RGraph at any point you may want to include the date from the release archive into your filenames. This would mean that seeing cached copies of older versions of the libraries may be avoided - since the URLs would be different. If you follow this layout then your URLs to the RGraph libraries would be:

http://www.example.com/javascript/rgraph/2013-08-31/RGraph.common.core.js
http://www.example.com/javascript/rgraph/2013-08-31/RGraph.bar.js
etc

Note: If you use this structure then keeping the RGraph libraries referenced in you websites "common header" file is advisable so that you can change the URL and then the whole site is kept using the same version of the RGraph libraries.


 

The $p(), $a() and $cl functions

These three functions are worthy of mention at this point because they can help you tremendously whilst building your charts. The $p() function (short for "print()" uses the alert() function to show you the structure of whatever you pass it (eg a variable). It goes further than a normal alert() and could be called "a pretty(ish) print" function and shows you type information as well. It should be used with caution on large objects as it operates recursively.

The $a() function is a direct mirror of the alert() function but is easier to type(!).

And the $cl() function is a direct mirror of the console.log() function and also easier to type.

 

Example HTML when using accessible text

When you use the canvas libraries' the accessible text feature (which is new in 2016) then you should avoid adding CSS to the canvas itself. What you should do is wrap the canvas in a <div> tag and add the CSS to that instead. This is because RGraph will wrap the canvas in a <div> tag too and any CSS on the canvas tag will interfere with that. An example of the necessary HTML follows. If you don't need to add CSS to the canvas tag you won't need to wrap the canvas tag.

<div style="padding: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250">[No canvas support]</canvas>
</div>

Other implementation pages

Share RGraph
X

Comments