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.

You might find the technique that's used by the Bar chart shown here to be simpler to implement however, because there's far less code involved. What this chart does is:

1. Set the colorsSequential option to true
2. Loop through the data and create an array of true or false values based on whether the data values are positive or negative
3. Set the colors property to that array and then draw the chart as normal.

The code for this chart is shown below.

<script>
    // Create the SVG Bar chart as normal
    new RGraph.SVG.Bar({
        id: 'cc',
        data: [8,7,6,4,1,-1,-4,-3,-5,-7,6,3],
        options: {
            xaxisLinewidth: 3,
            xaxisTickmarks: 0,
            yaxis: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            colorsSequential: true,
            yaxisScaleMax: 10,
            yaxisScaleMin: 'mirror',
            xaxisLabels: RGraph.SVG.MONTHS_SHORT,
            textSize: 16,
            tooltips: RGraph.SVG.MONTHS_LONG,
            tooltipsCss: {
                fontSize: '16pt'
            }
        }
    //
    // The exec function (which runs only once) goes through the
    // data and sets the appropriate color depending on whether the
    // value is positive or negative. It's positioned before the
    // call to the draw() function so the function runs before
    // the draw() function.
    //
    }).exec(function (obj)
    {
        obj.data.forEach(function (v, k, arr)
        {
            obj.properties.colors[k] = (v < 0 ? 'black' : 'red');
        });
    }).draw();
</script>