How to use repeating canvas patterns on your chart

  Read comments...

Summary
This HOWTO document shows you how you can use repeating patterns as colors on your charts. Small images are used which are repeated for you to create the larger pattern.

Canvas has the ability to use repeating patterns as colors. These images are typically quite small and repeat to fill whatever the space is required to be filled. A common use is as backgrounds - eg desktop wallpaper. You can use patterns as you would normal colors although you should be aware that some of the chart have quirks in the color handling when the colors are objects and not srings/text and as such you may need to give an array of colors instead of just the pattern - even if there is only one pattern to be used (the Line chart is an example of this):

line.set({
    // Use an array of colors
    fillstyle: [myPattern]
    
    // Instead of this
    // fillstyle: myPattern
})

A Line chart example of patterns

As mentioned above with the Line chart - because of its internal handling of colors - the pattern, when given as the fillstyle - should be an array.

[No canvas support]
<script>
    // Start by creating the chart but not creating or assigning the pattern yet
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,5,3,5,1],
        options: {
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            filled: true,
            colors: ['black'],
            linewidth: 5,
            tickmarks: null,
            spline: true,
            noyaxis: true,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            hmargin: 5,
            textAccessible: true,
            textSize: 14
        }
    });
    
            
            
            
    // Now create a pattern using an image object and the standard canvas API.
    // This pattern is then set as the fillstyle in the Line chart
    var img = new Image();
    img.src = '/images/pattern.png';
    
    
    
    
    // When the pattern image that we're using has loaded - create the pattern
    // and set it on the Line chart object. Note that the draw() function is now
    // called (not above)
    img.onload = function ()
    {
        var pattern = line.context.createPattern(this, 'repeat');
    
        // Set the pattern on the Line chart that was created above. Note
        // the square braces around the pattern variable. This is necessary with
        // the Line chart - but not all chart types
        line.set({
            fillstyle: [pattern]
        }).draw();
    }
</script>

A Bar chart example of patterns

Here's a Bar chart example of patterns. Remember that patterns can be used with most (if not all) of the chart types that RGraph has.

<script>
    // Create the bar chart but don't .draw() it yet
    var bar = new RGraph.Bar({
        id: 'cvs2',
        data: [4,8,6,3,5,3,1],
        options: {
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            shadowOffsetx: 2,
            shadowOffsety: 2,
            shadowBlur: 2,
            noyaxis: true,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textAccessible: true,
            textSize: 14,
            scaleZerostart: true
        }
    });




    // Create the pattern using a different image. Same procedure though
    var img2 = new Image();
    img2.src = '/images/pattern2.jpg';




    // When the pattern image that we're using has loaded - create the pattern
    img2.onload = function ()
    {
        var pattern = line.context.createPattern(this, 'repeat');
    
        // Set the pattern on the Bar chart. The Bar chart doesn't use
        // the fillstyle property - it uses the colors array
        bar.set({
            colors: [pattern]
        }).draw();
    }
</script>
[No canvas support]

Note

Read more

Share RGraph
X

Comments