Create beautiful charts on your websites.

A chart is a graphical representation of your data and it is also called 'Graph'. Whenever you want to present your data in visuals you require any chart tool. Creating graph in any spreadsheet is easy, but creating it on website is something difficult for dynamic data.

Most of the website or previously flash are used for creating chart on website, which makes site slow and overhead on server.

Presently you can find many chart creating tools based on JQuery, JavaScript and CSS.

Today I am going to tell you about a JavaScript based tool RGraph, which has a wide appeal and can represent many types of data quickly and efficiently. RGraph is free to use and uses the MIT license.  It has more than 50-60 charts it can be used on HTML5 canvas and SVG.

The size of the JavaScript files and the code to make a chart is small and can be further reduced with minification and compression and so offers significant speed boosts to a website.

Now let see how it can be used on website with some example:-

Before use it, first download library from here.

After downloading, extract the zipped folder. 

You will get a web page named as default.html in the extracted folder. Open this file in your favourite browser.

When page will be opened in the browser, you will get home page for RGraph.

Click on link Go to the demos (local) » 

After clicking on link you will get the all list of possible charts in RGraph. Click on your desired chart. You will get the design, code and required file to draw that chart.

How to use ?

After extracting the zipped folder, you have downloaded, you can rename it or use as it is. Put this folder in your root/home directory of your project/website.

From the list of chart you have seen, select the desired chart and click on it. It will get a page showing code and where should it be used.

See the required JavaScript file required to draw desired chart. Put that code in your header tag with full path.

<script src="RGraph/libraries/RGraph.common.core.js"></script>

<script src="RGraph/libraries/RGraph.bar.js"></script>

Now draw the chart at your required position on website. Put the following code at desired position in your coding :-

<canvas id="cvs" width="650" height="300">
    [No canvas support]
</canvas>

You can adjust the size of chart by changing the width and height of canvas.

Now put the following JavaScript code anywhere in your page that draws the chart.

<script>
    var gutterLeft   = 120,
        gutterRight  = 25,
        gutterTop    = 45,
        gutterBottom = 125,
             hmargin = 15,
                ymax = 35,
        
        data = [

            // If you don't need a third dataset take out this FIRST
            // dataset and replace it with the word: null

            // null, // [12,16,10,12,13,15,16]
            [5,16,10,12,13,15,16],

            [20,21,24,23,18,19,20],
            [35,34,32,28,26,35,34]
        ],
        
        colors = [
            'Gradient(#696:#0f0:#0f0)',
            'Gradient(#966:#f00:#f00)',
            'Gradient(#669:blue:blue)'
        ],
        
        labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];


    var bar = new RGraph.Bar({
        id: 'cvs',
        data: data[2],
        options: {
            textAccessible: true,
            variant: '3d',
            variantThreedYaxis: false,
            variantThreedXaxis: false,
            strokestyle: 'rgba(0,0,0,0)',
            colors: [colors[2]],
            shadow: true,
            shadowOffsetx: 10,
            //backgroundGrid: false,
            backgroundGridColor: '#ccc',
            backgroundGridAutofitNumhlines: 5,
            backgroundGridAutofitNumvlines: 14,
            scaleZerostart: true,
            axisColor: '#ddd',
            ylabels: false,
            gutterBottom: gutterBottom,
            gutterTop: gutterTop,
            gutterLeft: gutterLeft,
            gutterRight: gutterRight,
            hmargin: hmargin,
            ymax: ymax,
            noaxes: true
        }
    }).draw();

    var bar2 = new RGraph.Bar({
        id: 'cvs',
        data: data[1],
        options: {
            textAccessible: true,
            variant: '3d',
            variantThreedYaxis: false,
            variantThreedXaxis: false,
            strokestyle: 'rgba(0,0,0,0)',
            colors: [colors[1]],                
            shadow: true,
            shadowOffsetx: 10,
            shadowColor: 'rgba(0,0,0,0.5)',
            backgroundGrid: false,
            axisColor: '#ddd',
            ylabels: !data[0] ? true : false,
            labels: !data[0] ? labels : [],
            gutterBottom: gutterBottom - 10,
            gutterTop: gutterTop + 10,
            gutterLeft: gutterLeft - 20,
            gutterRight: gutterRight + 20,
            hmargin: hmargin,
            ymax: ymax,
            noaxes: true
        }
    }).draw();


    if (data[0]) {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data[0],
            options: {
                textAccessible: true,
                variant: '3d',
                variantThreedYaxis: false,
                variantThreedXaxis: false,
                strokestyle: 'rgba(0,0,0,0)',
                colors: [colors[0]],
                labels: labels,
                shadow: true,
                shadowOffsetx: 10,
                shadowColor: 'rgba(0,0,0,0.5)',
                backgroundGrid: false,
                axisColor: '#ddd',
                unitsPost: 'km',
                gutterTop: gutterTop + 20,
                gutterBottom: gutterBottom - 20,
                gutterLeft: gutterLeft - 40,
                gutterRight: gutterRight + 40,
                hmargin: hmargin,
                ymax: ymax,
                noaxes: true,
                scaleZerostart: true
            }
        }).draw();
    }
</script>

After that you will get the result on your webpage like -

You can use the dynamic values also in data and labels as a variable to show the graph
based on database values or any dynamic values.

Like above example you can get many type of chart and graphs using RGraph.

For more information and update, please visit RGraph website.