HOWTO: A dual-color Line chart

• Introduction
• Add the DIV tags to the document
• Draw both of the Line charts
• Demo files of this technique

Introduction

This is a chart that I've created before using the canvas tag but is using the SVG Line chart to render it instead. If you're using the SVG libraries this is very useful since you don't have to mix-and-match and can stick to just using SVG.

You might also be already familiar and comfortable working with the SVG tag and unwilling to learn canvas as well.

Add the <div> tags to the document

The first thing to do is add the div tags to the document. This is where the chart will be rendered. There are two tags used - one for the top half and one for the bottom. All the necessary CSS is in the style block for clarity but you can place this inline if you prefer.

<style>
    #container {
        position: relative;
        width: 700px;
        height: 300px;
    }
    
    #wrapper1 {
        position: absolute;
        top: 0px;
        left: 0;
        width: 700px;
        height: 150px;
        overflow: hidden;
    }
    
    #wrapper2 {
        position: absolute;
        top: 150px;
        left: 0;
        width: 700px;
        height: 150px;
        overflow: hidden;
    }
    
    #cc1 {
        width: 700px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #cc2 {
        width: 700px;
        height: 300px;
        position: absolute;
        top: -150px;
        left: 0;
    }
</style>

<div id="container">
    <div id="wrapper1">   <div id="cc1"></div>   </div>
    <div id="wrapper2">   <div id="cc2"></div>   </div>
</div>

Draw both of the Line charts

The code that creates the two charts is very straight-forward because the "clipping" is actally handled by the two div tags that we've already defined. So the code that we use is just the same as that used for any regular chart.

</script>
    // Create the green part of the line
    line = new RGraph.SVG.Line({
        id: 'cc1',
        data: data = [4,5,5,5,-3,-2,-1,-5,-5,5,5,4,5,5,5,1,3,5,5,-5,-4,-5,-2,3],
        options: {
            textSize: 16,
            marginLeft: 50,
            colors: ['#0c0'],
            linewidth: 2,
            filled: true,
            filledColors: ['rgba(0,232,0,0.25)'],
            yaxisScaleMax: 10,
            yaxisScaleMin: -10,
            xaxisTickmarks: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            yaxis: false,
            spline: true,
            xaxisColor: '#666',
            tickmarksStyle:'circle',
            tickmarksSize:3,
            yaxisLabelsCount:10,
            tooltips: 'Quantity of sales: %{value}',
            tooltipsCss: {
                fontSize: '16pt'
            }
        }
    }).trace();




    // Create the red part of the line
    line2 = new RGraph.SVG.Line({
        id: 'cc2',
        data: data,
        options: {
            textSize: 16,
            yaxis: false,
            yaxisScaleMax: 10,
            yaxisScaleMin: -10,
            xaxisLinewidth: 5,
            marginLeft: 50,
            linewidth: 2,
            filled: true,
            filledColors: ['rgba(255,0,0,0.25)'],
            xaxisTickmarks: false,
            xaxisLabels: [
                '','Jan','','','Feb','','','Mar','',
                '','Apr','','','May','','','Jun','',
                '','Jul','','','Aug','','','Sep','',
                '','Oct','','','Nov','','','Dec',''
            ],
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            spline: true,
            tickmarksStyle:'circle',
            tickmarksSize:3,
            yaxisLabelsCount:10,
            tooltips: 'Quantity of sales: %{value}',
            tooltipsCss: {
                fontSize: '16pt'
            }
        }
    }).trace();
</script>

Demo files of this technique

A couple of example files that are included in the download archive that you can run on your computer are svg-line-clipped.html and svg-line-clipped2.html. There's also a Bar chart demo called svg-bar-dual-color.html that also uses this technique to show a dual-color Bar chart, as shown by the image here.