RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

I'm trying to draw a Bar chart with the wave effect and also the responsive function.

The Bar chart with wave effect by itself works OK - however when I add the responsive function it behaves slightly differently - like its being drawn first and then animating.

Heres an example that shows it happening:

bar = new RGraph.SVG.Bar({
    id: 'chart1',
    data: [5,9,6,3,2,6,7],
    options: {
        backgroundGridBorder: false,
        backgroundGridVlines: false,
        xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        marginBottom: 100,
        xaxis: false,
        yaxis: false
    }
}).wave().responsive([
    {maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: function () {},css: {}},
    {maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: function () {},css: {}}
]);

Interesting. This appears to be due to multiple redraws - one by the responsive function and another by the wave effect.

After a while playing around with this I've come up with this solution, which configures the chart and then after a small delay calls the wave effect. Initially the color is set to transparent and then set to red after the delay and just before the effect starts.

bar = new RGraph.SVG.Bar({
    id: 'cc',
    data: [5,9,6,3,2,6,7],
    options: {
        backgroundGridBorder: false,
        backgroundGridVlines: false,
        xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        marginBottom: 100,
        xaxis: false,
        yaxis: false,
        colors:['transparent']
    }
}).responsive([
    {maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: function () {},css: {}},
    {maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: function () {},css: {}}
]);

// Set the color to red and call the animation
setTimeout(function ()
{
    bar.set('colors', ['red']);
    RGraph.SVG.clear();
    bar.wave();
}, 250);



There's a codepen here which shows this in action:

https://codepen.io/rgraph/pen/JjRxZZv

OK, I've just thought of a better way than using the setTimeout() function - using the callback function in the responsive configuration.

The updated code is:

bar = new RGraph.SVG.Bar({
    id: 'cc',
    data: [5,9,6,3,2,6,7],
    options: {
        backgroundGridBorder: false,
        backgroundGridVlines: false,
        xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
        marginBottom: 100,
        xaxis: false,
        yaxis: false
    }
}).responsive([
    {maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: myAnimate},
    {maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: myAnimate}
]);

function myAnimate (obj)
{
    if (!window.callback_function_run) {
        RGraph.SVG.clear();
        obj.wave();
        
        window.callback_function_run = true
    }
}

And an updated codepen is here:

https://codepen.io/rgraph/pen/dyprGQW