How to use the new gradient syntax

  Read comments...

Summary
A guide explaining how to use the new simple gradient syntax

 

Basic gradients

[No canvas support]

The new gradient syntax that RGraph has makes using gradients in your charts a breeze. The syntax is purposefully very simple: Gradient(white:red) And that's all you have to specify instead of a color. The colors are parsed once when the .draw() method is first called and converted to real canvas gradients.


<script>
    window.onload = (function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [5,5,8,6,3,5,4],
            options: {
                colors: ['Gradient(white:red)', 'Gradient(rgb(255,255,255):green:green:green)'],
                labels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'],
                textAccessible: true,
                textSize: 14
            }
        }).draw()
    })
</script>

 

Extra control over the gradient

[No canvas support]

If you want extra control over your gradient that the simple syntax doesn't provide then you can instead use the intermediate level control the the API functions give you. There are functions available for both linear and radial gradients.


<script>
    window.onload = (function ()
    {
        var bar2 = new RGraph.Bar({
            id: 'cvs2',
            data: [[5,8],[6,8],[7,4],[5,5],[8,5],[7,4],[5,2]],
            options: {
                colors: [RGraph.LinearGradient(bar2, 0,25,0,225, 'red', 'red', 'white')],
                labels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'],
                textAccessible: true,
                textSize: 14
            }
        }).draw()
    })
</script>

Native canvas gradients

[No canvas support] [No canvas support]

If you want complete control over the gradient you can use the native canvas functionality by accessing the context object - with obj.context oOnce you have that you can use the standard canvas 2D API functions to create and control the gradient. Once created you can use it like a normal color specification.


<script>
    window.onload = (function ()
    {
        var bar3 = new RGraph.Bar({
            id: 'cvs3',
            data: [[5,8],[6,8],[7,4],[5,5],[8,5],[7,4],[5,2]],
            options: {
                textAccessible: true,
                textSize: 14
            }
        })

        var gradient = bar3.context.createLinearGradient(0,25,0,225);
        gradient.addColorStop(0, 'red');
        gradient.addColorStop(0.75, 'red');
        gradient.addColorStop(1, '#fcc');

        bar3.set({
            colors: [gradient],
            labels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert']
        }).draw()

        var pie = new RGraph.Pie({
            id:'cvs4',
            data: [4,8,6,3,5]
        })

        var colors = ['red','green','blue','orange','pink','gray']
        for (var i=0; i<colors.length; ++i) {
            var grad = pie.context.createRadialGradient(125,125,0,125,125,125);
            grad.addColorStop(0, 'white');
            grad.addColorStop(1, colors[i]);
            
            colors[i] = grad;
        }
        
        pie.set({
            colors: colors,
            strokestyle: 'white'
        }).draw()
    }
</script>
Share RGraph
X

Comments