HOWTO: Show a multi-color Line chart
Introduction
Showing dual-color Line charts has, in the past, involved a fair amount of custom coding. Now however, the amount of code involved has been reduced to a single property that's easy to understand and use.
It means that dual-color Line charts are now easy for you to implement. The code for a chart of this type is shown below.
Remember that whilst the common usage is based around a Line chart, the clipping functionality is not tied to any particular chart so can be used with any chart of your choosing. There are demos of clipping with different charts in the download archive
Example code
// // This is the data for the chart. Both Line chart objects use // it. // DATA = [9,1,5,6,8,7,6,4,3,2,8,9]; // // These options are used for both of the charts. The clip // property and the colors property are changed for // the second chart. // OPTIONS = { colors: ['red'], linewidth: 10, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, spline: true, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], textSize: 16 }; // Draw the bottom part of the chart line1 = new RGraph.Line({ id: 'cvs', data: DATA, options: { ...OPTIONS, clip: 'scale:min-5' } }).trace(); // // Now draw the top part of the chart. Use the options // that are defined above but with a few changes. The options // are combined here by using the spread (...) operator. // line2 = new RGraph.Line({ id: 'cvs', data: DATA, options: { ...OPTIONS, colors: ['black'], clip: 'scale:5-max' } }).trace();
Documentation for the option
The clip option is quite versatile and can take many options - these are detailed in the clip documentation. There are also several demo pages in the download archive which you can look through - these are:
- line-clipping1.html
- line-clipping2.html
- line-clipping3.html
- line-clipping4.html
- line-clipping5.html
Using gradients instead of clipping
As well as using clipping to achieve this kind of chart you may find it easier to use gradients instead. You need the point at which colors change as a pixel value and you can get this using the obj.getYCoord function. You can use the firstdraw event to get the coordinate and then, when you've set the gradient, call the RGraph.redraw function to redraw the chart. Because you're using the firstdraw event - not the draw event - that code won't be run again. Here's some sample source code that's taken from one of the demos in the download archive.
<script>
new RGraph.Line({
id: 'cvs',
data: [1,3,5,2,5,6,8,4,4,5,3,6],
options: {
spline: true,
tickmarksStyle: 'dot',
tickmarksSize: 6,
yaxisScaleMax: 10,
marginInner: 5,
marginBottom: 30,
xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
xaxis: false,
yaxis: false,
shadow: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
textSize: 18,
filled: true,
filledColors: ['black'],
events: {
firstdraw: function (obj)
{
// Create the gradient that is used as the stroke color
var grad = obj.context.createLinearGradient(0,25,0,325);
grad.addColorStop(0, '#FF642C');
grad.addColorStop(0.25, '#FF642C');
grad.addColorStop(0.25, 'orange');
grad.addColorStop(0.5, 'orange');
grad.addColorStop(0.5, '#5ADDAA');
grad.addColorStop(0.75, '#5ADDAA');
grad.addColorStop(0.75, '#2BB3FF');
grad.addColorStop(1.0, '#2BB3FF');
// Create the gradient that is used as the fill color
var gradFill = obj.context.createLinearGradient(0,25,0,325);
gradFill.addColorStop(0, '#F8D3D7');
gradFill.addColorStop(0.25, '#F8D3D7');
gradFill.addColorStop(0.25, '#FFE1D8');
gradFill.addColorStop(0.5, '#FFE1D8');
gradFill.addColorStop(0.5, '#E0F9EE');
gradFill.addColorStop(0.75, '#E0F9EE');
gradFill.addColorStop(0.75, '#DAF0FF');
gradFill.addColorStop(1.0, '#DAF0FF');
// Apply the gradients to the charts colors
obj.set({
colors: [grad],
filledColors: [gradFill]
});
RGraph.redraw();
}
}
}
}).draw();
</script>