HOWTO: Use repeating fill patterns as colors
canvas
can use repeating patterns as colors. These images are
typically quite small and repeat to fill whatever space is required to
be filled. A common use is as backgrounds - for example, desktop wallpaper. You can use
patterns as you would normal colors although you should be aware that some of
the charts have quirks in the color handling when the colors are objects and
not strings or text. 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 colorsFill: [myPattern] // Instead of this // colorsFill: 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 fill, should be an array.
<script> // Start by creating the chart but not creating or assigning the pattern yet line = new RGraph.Line({ id: 'cvs', data: [4,8,6,5,3,5,1], options: { xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], filled: true, colors: ['black'], linewidth: 5, tickmarksStyle: null, spline: true, yaxis: false, backgroundGridVlines: false, backgroundGridBorder: false, marginInner: 5, textSize: 14 } }); // Now create a pattern using an image object and the standard canvas API. // This pattern is then set as the fill in the Line chart 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({ filledColors: [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 bar = new RGraph.Bar({ id: 'cvs', data: [4,8,6,3,5,3,1], options: { xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], shadowOffsetx: 2, shadowOffsety: 2, shadowBlur: 2, yaxis: false, backgroundGridVlines: false, backgroundGridBorder: false, textSize: 12, colors:['gray'], responsive: [ {maxWidth: null, width: 700, height: 300, callback: setImage}, // Use a callback: function to set the fill image {maxWidth: 900, width: 400, height: 200, callback: setImage} // Use a callback: function to set the fill image ] } }).draw(); // // Use a callback function that loads the image and then sets it // on the chart. The chart is then redrawn. // function setImage () { // Create a pattern using an image. var img2 = new Image(); img2.src = '/images/pattern2.jpg'; // When the pattern image that we're using has loaded - do this img2.onload = function () { var pattern2 = line.context.createPattern(this, 'repeat'); // Set the pattern on the Bar chart bar.set({ colors: [pattern2] }).draw(); } } </script>Note
- You don't have to use an image that repeats - any image can be used.