Using clipping to make composite charts

• Introduction
• Example code
• Options available to the clip property
• Example demo pages

Introduction

Making individual charts - for example, a Bar chart or a Line chart - is well within RGraphs capabilities. As well as this, combining charts has been feasible because of the Object Registry that was introduced to RGraph many years ago which stores information about the charts that have been created and updates them when redraws are requested or are necessary. Well, the next feature that is as significant as this is the new clipping addition that has been introduced in version 6.17.

This new addition to RGraph allows you to easily restrict the drawing to a certain part of the canvas or SVG making it very easy to combine charts - for example different colored Line charts like the example that's linked to at the top of this page.

The clipping option can be one of multiple formats so you can easily restrict the drawing on the canvas to a shape, half of the canvas, a percentage of the scale (for scaled charts eg Bar, Line, Scatter) or a specific scale value.

Example code

Here's some example code that produces the multi-color Line chart that's shown above.

What happens is that each of the three Line chart objects clips the canvas to a particular part of the scale so that only that part gets shown on the canvas. Each Line chart object specifies different colors so the result is that you get three colors on the Line chart because all three charts are drawn on the canvas.

new RGraph.Line({
    id: 'cvs',
    data: DATA = [
        4,8,6,3,2,4,5,4,5,6,1,9,1,2,3,5,7,4,2,2,6,2,3,4,
        4,8,6,2,3,5,18,14,19,27,28,24,23,18,7,5,6,4,5,1,2,3,4,6
    ],
    options: OPTIONS = {
        textSize: 15,
        backgroundGridHlinesCount: 3,
        backgroundGridDashed: true,
        linewidth: 3,
        colors: ['red'],
        filled: true,
        filledColors:['#fdd'],
        marginInner: 15,
        marginLeft: 75,
        marginTop: 50,
        spline: true,
        yaxisLabelsCount: 3,
        yaxisScaleUnitsPost: '%',
        textSize: 14,
        title: 'A tri-color Line chart using the RGraph clipping functions',
        titleSize: 16,
        clip: 'scale:25-max'
}
}).trace();




new RGraph.Line({
    id: 'cvs',
    data: DATA,
    options: {
        ...OPTIONS,
        colors: ['#cc0'],
        filledColors: ['#ffc'],
        clip: 'scale:20-25'
    }
}).trace();




new RGraph.Line({
    id: 'cvs',
    data: DATA,
    options: {
        ...OPTIONS,
        colors: ['green'],
        filledColors: ['#cfc'],
        clip: 'scale:min-20',
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
    }
}).trace();

Options available to the clip property

There are a few options that you can use to clip the canvas tag ranging from simple halves to entire RGraph-style paths. They are:

clip: 'tophalf'

clip: 'bottomhalf'

clip: 'lefthalf'

clip: 'righthalf'

clip: [0,0,200,200]

clip: 'circle:50,50,150'

clip: [[0,0],[100,0],[200,50],[100,100],[0,100]]

clip: 'segment:300,150,100,3.14,6.28'
clip: 'segment:300,150,100,3.14rad,6.28rad'
clip: 'segment:300,150,100,0deg,360deg'

clip: 'b a 100 100 100 0 6.29 false'

clip: 'x:min-33.333%'
clip: 'x:33.333%-66.666%'
clip: 'x:66.666%-max'

clip: 'y:66.666%-max'
clip: 'y:33.333%-66.666%'
clip: 'y:min-33.333%'

clip: 'radius:min-33.333%'
clip: 'radius:33.333%-66.666%'
clip: 'radius:66.666%-max'

clip: 'scale:min-5'
clip: 'scale:5-15'
clip: 'scale:15-max'

Example demo pages

These are some example demo pages of how you can use the clipping feature in your charts. You can find these demo pages in the download archive (there are more pages available - they usually end their names with clipping or clipped).

• demos/line-bar-clipped.html
• demos/line-clipping1.html
• demos/line-clipping2.html
• demos/line-clipping3.html (dynamic)
• demos/line-clipping4.html
• demos/line-effects-growpoint.html
• demos/line-filled-striped.html
• demos/svg-bar-dual-color.html
• demos/svg-bar-roundrobin.html
• demos/svg-line-clipped.html
• demos/svg-line-clipped2.html
• demos/svg-line-clipped3.html (dynamic)
• demos/svg-line-clipped4.html (dynamic)
• demos/svg-line-dual-color.html