HOWTO: Show a multi-color Line chart

• Introduction
• Example code
• Documentation for the option
• Using gradients instead of clipping

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>