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. Theclip
// property and thecolors
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' } }).draw(); // // 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' } }).draw();
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 the line-multi-color.html
demo 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']
}
}).on('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>