Why are there different ways of configuring RGraph?

Share RGraph:   
Posted on 5th August 2015

Summary
RGraph has a variety of different configuration methods available and this blog article explains why and what they are

In one word: History. In two words: History and compatibility.

There are four main configuration styles that you can use with RGraph. This page explains what they are. They all still work - and there's a link at the bottom to read more about the JSON configuration style.

The original configuration style

RGraph started out way back in 2008 (ancient history?) with quite a verbose configuration style and over the years that has changed, evolved and become more concise - whilst increasing usability and allowing greater potential for expansion. The original configuration style looked like this:

<script>
    var bar = new RGraph.Bar('cvs', [4,8,6,5,3,5,4]);
    bar.Set('chart.colors', ['red','green','blue']);
    bar.Set('chart.shadow.color', '#aaa');
    bar.Set('chart.shadow.blur', 2);
    bar.Set('chart.shadow.offsetx', 1);
    bar.Set('chart.shadow.offsety', -1);
    bar.Set('chart.background.grid.autofit.numvlines', 7);
    bar.Set('chart.strokestyle', 'transparent');
    bar.Draw();
</script>

Method chaining

After that came method chaining (so that you don't have to prefix each line with the object name). Also the names of the methods were changed to be lower case (though the upper case variants still work). You also no longer needed to prefix the property names with chart.

<script>
    var bar = new RGraph.Bar('cvs', [4,8,6,5,3,5,4])
        .set('colors', ['red','green','blue'])
        .set('shadow.color', '#aaa')
        .set('shadow.blur', 2)
        .set('shadow.offsetx', 1)
        .set('shadow.offsety', -1)
        .set('background.grid.autofit.numvlines', 7)
        .set('strokestyle', 'transparent')
        .draw();
</script>

Object notation

Then came object notation using nesting instead of dots. This allowed you to group sets of properties. But the amount of typing was increased a little (even though the minified size only changed a little). If you used strings as key names then nesting could be avoided:

<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,5,3,5,4],
        options: {
            colors: ['red','green','blue'],
            shadow: {
                self: true,
                color: '#aaa',
                blur: 2,
                offsetx: 1,
                offsety: -1,
            },
            background: {
                grid: {
                    autofit: {
                        numvlines': 7
                    }
                }
            },
            'background.grid.autofit.numhlines': 10,
            strokestyle: 'transparent'
        }
    }).draw();
</script>

The latest RGraph configuration style

And the latest evolution of the RGraph configuration style is both JSON based and removes the need for nesting by replacing dots with capitals. You can also use JSON style in combination with the .set() method. It looks a little something like this:

<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,8,6,5,3,5,4],
        options: {
            colors: ['red','green','blue'],
            shadow: true,
            shadowColor: '#aaa',
            shadowBlur: 2,
            shadowOffsetx: 1,
            shadowOffsety: -1,
            backgroundGridAutofitNumvlines: 7,
            backgroundGridAutofitNumhlines: 10,
            strokestyle: 'transparent'
        }
    }).draw();




    /**
    * If you need to use the .set() method you can use JSON notation like this
    */
    bar.set({
        'gutter.left': 50, // Quoted property names using dots
        gutterRight: 50    // Capitals in property names
    }).draw()
</script>

Concise and by far the best looking (can you classify computer code as attractive?). It also is the best method for allowing for further expansion if required and it minifies to quite small sizes.

Due to some careful implementing all of the methods should still work so if there's a particular format that you like or that suits you or your code then you can use it.

Read more

A documentation page about JSON style configuration.

Comments

Add a new comment...