10 example charts to get you started with RGraph

Posted on 5th June 2017

Summary
In the happy(ish) style of other chart libraries (that seem to get more and better press than RGraph does) here are 10 easy examples of charts to get you up and running.

RGraph is a powerful library - it has a lot of features available as a result of its 8-9 year age. As I'll show below, it's not however difficult to get up and running with some basic charts and then add more customisation from there. There's not a lot that can go wrong when you start out - especially when you have the 500+ demos available to you that come in the download. Below you'll find 10 examples of charts - and as mentioned there's many more in the download. These examples are all using the SVG libraries - but if it's canvas examples that you want you find lots in the demos (the demos are also in the download) . I've set them up using colors and data etc so you should find it easy to incorporate them into your own pages. If you want to customise them further (I'd imagine you will!) simply use the documentation pages .



So lets begin...



What you need to do first is include the RGraph SVG libraries:

<script src="/js/RGraph.svg.common.core.js"></script>
<script src="/js/RGraph.svg.common.tooltips.js"></script>
<script src="/js/RGraph.svg.common.bar.js"></script>
<script src="/js/RGraph.svg.common.line.js"></script>
<script src="/js/RGraph.svg.common.pie.js"></script>
<!-- Add more libraries as necessary -->


And then you need to add the <div> that dictates where the chart will show up:

<div style="width: 650px; height: 250px; display: inline-block" id="chart-container"><div>

And then it's just a matter of defining the code that crates the chart. The examples of each chart are below.



1. Bar chart

To create a Bar chart you want to include the core and Bar chart libraries, and the tooltips library too if required. For Horizontal Bar charts there's an example below. The style of the tooltips are customised by using the onbeforetooltip event. If you only have one chart on your page for which you need to customise the tooltips, you don't need to use the onbeforetooltip event. Here's the code:

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container1',
        data: [13,56,16,15,12],
        options: {
            colorsSequential: true,
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            tooltips: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            xaxisLabels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            xaxisColor: '#aaa',
            yaxisColor: '#aaa',
            yaxisLabelsCount: 11,
            yaxisUnitsPost: 'm',
            gutterLeft: 45,
            textSize: 9,
            hmargin: 25
        }
    }).draw().on('beforetooltip', function ()
    {
        RGraph.SVG.tooltips.style.backgroundColor = 'black';
        RGraph.SVG.tooltips.style.color           = 'white';
        RGraph.SVG.tooltips.style.fontWeight      = 'bold';
    });
</script>

2. Line chart

You can create a Line chart as the code here shows by including the Line chart library instead of the Bar chart library. By default the lines are not filled - but you can change this by using the filled property (just set it to true). These fills can be both semi-transparent (just set the correct colors) or they can be stacked on top of each other (using the filledAccumulative property.

<script>
    new RGraph.SVG.Line({
        id: 'chart-container2',
        data: [
            [1,2,4,8,16],
            [8,6,5,2,4],
            [4,9,5,6,3],
            [1,2,5,9,6],
            [4,8,5,5,5]
        ],
        options: {
            spline: true,
            linewidth: 3,
            otickmarksStyle: 'filledcircle',
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            tooltips: [
                '1960','1970','9180','1990','2000',
                '1960','1970','9180','1990','2000',
                '1960','1970','9180','1990','2000',
                '1960','1970','9180','1990','2000',
                '1960','1970','9180','1990','2000'
            ],
            xaxisLabels: ['1960','1970','1980','1990','2000'],
            key: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            keyTextSize:12,
            xaxisColor: '#aaa',
            yaxisColor: '#aaa',
            yaxisLabelsCount: 10,
            yaxisUnitsPost: 'k',
            gutterLeft: 45,
            textSize: 9
        }
    }).draw().on('beforetooltip', function ()
    {
        RGraph.SVG.tooltips.style.backgroundColor = 'black';
        RGraph.SVG.tooltips.style.color           = 'white';
        RGraph.SVG.tooltips.style.fontWeight      = 'bold';
    });
</script>

3. Pie chart

Pie charts are created with the Pie chart library. They only show one dataset, but they can show tooltips which can hold more information. In addition it could be said that comparing two segments that aren't positioned next to each other can be tricky - particularly if the difference is subtle.

<script>
    new RGraph.SVG.Pie({
        id: 'chart-container3',
        data: [24,52,7,7,4],
        options: {
            linewidth: 3,
            strokestyle: 'white',
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            tooltips: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            key: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            textSize: 10,
            gutterTop: 50,
            title: 'A Pie chart showing some figures!',
            titleItalic: true,
            titleY: 22
        }
    }).draw().on('beforetooltip', function ()
    {
        RGraph.SVG.tooltips.style.backgroundColor = 'black';
        RGraph.SVG.tooltips.style.color           = 'white';
        RGraph.SVG.tooltips.style.fontWeight      = 'bold';
    });
</script>

4. Radar chart

Radar charts, also known by a variety of other names (eg Spider graph, Web charts) can be created with the Radar chart library. Bigger charts might be visually more appealing, but it's your choice of course!

<script>
        new RGraph.SVG.Radar({
            id: 'chart-container4',
            data: [
                [4,8,6,9,4,5,6,8,7,9],
                [5,4,8,9,9,8,6,3,5,4]
            ],
            options: {
                tickmarks: 'none',
                linewidth: 3,
                filled: true,
                filledAccumulative: false
            }
        }).draw().on('beforetooltip', function ()
        {
            RGraph.SVG.tooltips.style.backgroundColor = 'black';
            RGraph.SVG.tooltips.style.color           = 'white';
            RGraph.SVG.tooltips.style.fontWeight      = 'bold';
        });
</script>

5. Rose chart

The Rose chart can sometimes also be called a Polar area chart. They're similar to Pie charts but the angle size is fixed (by default) and the radius of each segment changes. They can be stacked to represent multiple values and/or the angle size of each segment can be made to be variable by using the variant property.

<script>
    new RGraph.SVG.Rose({
        id: 'chart-container5',
        data: [5,8,6,4,3,5,6],
        options: {
            colorsSequential: true,
            exploded: 2,
            backgroundGridRadialsCount: 0,
            tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
        }
    }).draw();
</script>

6. Donut chart

Donut charts are, unsurprisingly perhaps, drawn using the Pie chart and by setting the donut property to true. Other than this they're much the same as Pie charts.

<script>
    new RGraph.SVG.Pie({
        id: 'chart-container6',
        data: [4,8,6,3,5,9,9],
        options: {
            donut: true,
            shadow: true
        }
    }).draw();
</script>

7. Horizontal Bar chart

<script>
    new RGraph.SVG.HBar({
        id: 'chart-container7',
        data: [4,8,6,3,5,8,9],
        options: {
            colorsSequential: true,
            tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            yaxisColor: '#ccc',
            xaxisColor: '#ccc',
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2"],
            vmargin: 10
        }
    }).draw();
</script>

8. Grouped Bar chart

A variant of the Bar chart - the data is formatted slightly differently to regular Bar charts (multi-dimensional array versus regular flat array). Other than the data formatting the code for the Bar chart is the same. The colors are used on a "per-group" basis but you can change this with the colorsSequential property.

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container8',
        data: [[420,310],[510,270],[520,550],[545,2478]],
        options: {
            gutterLeft: 65,
            gutterTop: 75,
            hmargin: 25,
            colors: ["#3e95cd", "#8e5ea2"],
            tooltips: [
                'Revenue: $420',
                'Revenue: $310',
                'Revenue: $510',
                'Revenue: $270',
                'Revenue: $520',
                'Revenue: $550',
                'Revenue: $545',
                'Revenue: $2478'
            ],
            yaxisUnitsPre: '$',
            xaxisLabels: ['2020','2030','2040','2050'],
            title: 'Projected revenue',
            titleSubtitle: 'From the sale of widgets on the market sales',
            key: ['Frankie','Bruno'],
            xaxisColor: '#aaa',
            xaxisTickmarks: 0,
            yaxisColor: '#aaa',
            yaxisTickmarks: 0
        }
    }).draw().on('beforetooltip', function ()
    {
        RGraph.SVG.tooltips.style.backgroundColor = 'black';
        RGraph.SVG.tooltips.style.color           = 'white';
        RGraph.SVG.tooltips.style.fontWeight      = 'bold';
    });
</script>

9. Mixed Bar & Line chart

<script>
</script>

10. Bubble chart

And finally - the Bubble chart (which is actually a variation on the Scatter chart) Bubble charts can be used to visualise three bits of data - the X value, the Y value, and the size of the bubble. If you only have two bits of data you would probably be better off with a regular Scatter chart. You can see the format of the data that you should pass - it's an array of datasets and each dataset is an array of objects - and those objects represent each point. In this object you can configure the x/y/z values, the tooltip (if required) and the color.

<script>
    dataset1 = [
        {x: 10, y: 5, z: 10, color: 'black'},
        {x: 20, y: 8, z: 8, color: 'red'},
        {x: 30, y: 2, z: 3, color: 'red'},
        {x: 40, y: 5, z: 5, color: 'black'},
        {x: 50, y: 3, z: 6, color: 'black'},
        {x: 60, y: 8, z: 1, color: 'red'},
        {x: 70, y: 9, z: 2, color: 'black'},
        {x: 80, y: 4, z: 8, color: 'red'}
    ];

    var scatter = new RGraph.SVG.Scatter({
        id: 'chart-container10',
        data: [dataset1],
        options: {
            gutterTop: 55,
            xaxisMax: 100,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            bubble: true,
            bubbleMaxValue: 10,
            bubbleMaxRadius: 50,
            bubbleColorsSolid: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            xaxis: false,
            colors: ['blue', 'red'],
            title: 'A Bubble chart',
            key: ['Frankie','Johnnie'],
            keyColors: ['Red','black']
        }
    }).draw();
</script>

Where to go from here?

So now you have a 10 examples of charts that you can take and perhaps use in your own pages. Oh and don't forget the 500+ demos that are bundled with RGraph that you can use too!

These examples use the SVG libraries (there's also a Funnel chart that's available in the latest beta) - so don't forget that there's an awful lot of canvas based demos that are available too.