HOWTO: Use the RGraph gradient syntax
- Basic gradients
- Extra control over the gradient
- Native canvas gradients
- The JSON alternative syntax for gradients
Basic gradients
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>
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)'
],
xaxisLabels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'],
textSize: 14
}
}).draw();
</script>
Extra control over the gradient
If you want extra control over your gradient that the simple syntax doesn't provide then you can instead use the intermediate
level control that the api
functions give you. There are functions available for both linear and radial gradients.
<script>
bar = new RGraph.Bar({
id: 'cvs',
data: [[5,8],[6,8],[7,4],[5,5],[8,5],[7,4],[5,2]],
options: {
colors: [RGraph.linearGradient({
object: bar,
x1: 0,
y1: 25,
x2: 0,
y2: 225,
colors: ['red', 'red', 'white']
})],
xaxisLabels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'],
textSize: 14
}
}).draw();
</script>
Native canvas gradients
If you want complete control over the gradient you can use the native
canvas
functionality by accessing the context
object -
with obj.context
Once you have that you can use the
standard canvas
2D api
functions to create and control the
gradient. Once created you can use it as a normal color specification.
<script> bar = new RGraph.Bar({ id: 'cvs', data: [[5,8],[6,8],[7,4],[5,5],[8,5],[7,4],[5,2]], options: { textSize: 14 } }); gradient = bar.context.createLinearGradient(0,25,0,225); gradient.addColorStop(0, 'red'); gradient.addColorStop(0.75, 'red'); gradient.addColorStop(1, '#fcc'); gradient2 = bar.context.createLinearGradient(0,25,0,225); gradient2.addColorStop(0, 'green'); gradient2.addColorStop(0.75, 'green'); gradient2.addColorStop(1, '#cfc'); bar.set({ colors: [gradient,gradient2], xaxis: false, yaxis: false, xaxisLabels: ['John','Luis','Pete','Jim','Kevin','Olga','Bert'], backgroundGridVlines: false, backgroundGridBorder: false, textSize: 14, shadow: false, grouping: 'grouped' }).draw(); pie = new RGraph.Pie({ id:'cvs4', data: [4,8,6,3,5], options: { } }) 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, colorsStroke: 'white' }).draw(); </script>
The JSON alternative syntax for gradients
There's also an alternative json
notation for gradient specification
which affords you extra control over the gradient. You can specify
start and end coordinates as well as the color stops.
The notation is mentioned in the documentation here.