HOWTO: A dual-color Line chart
- Introduction
- Add the
<div>
tags to the document - Draw both of the Line charts
- Add the clipping to the black chart
- Add the clipping to the red chart
- A demo file of this technique
Introduction
This is a chart that I've created before using the <canvas>
tag but is
using the SVG 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 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 inline
for clarity but you can place this elsewhere if you prefer.
<div style="float: right; position: relative; width: 650px; height: 250px"> <div style="position: absolute; top: 0; left: 0; width: 650px; height: 250px" id="cc1"></div> <div style="position: absolute; top: 0; left: 0; width: 650px; height: 250px" id="cc2"></div> </div>
Draw both of the Line charts
Now we draw both of the Line charts - one to each of the <div>
tags.
Initially, since we haven't made any changes to the clipping yet the charts
will be positioned one on top of the other. It's when the clipping is added
that the chart begins to take shape. Note that the labels are only added to
the chart that will become the bottom half of the chart - since the chart
that becomes the top half is clipped there's no point adding them.
// The data for BOTH of the charts and some things that we want to // make easy to change if necessary data = [4,8,6,5,-3,-2,-1,-5,-6,8,9,4,6,7,5,1,3,5,6,-8,-4,-5,-2,3]; fills = ['rgba(0,192,0,0.25)', 'rgba(255,0,0,0.25)' ]; marginLeft = 50; yaxisScaleMin = -10; yaxisScaleMax = 10; linewidth = 3; // Create the green part of the line line = new RGraph.SVG.Line({ id: 'cc1', data: data, options: { marginLeft: marginLeft, colors: ['#0c0'], linewidth: linewidth, filled: true, filledColors: [fills[0]], yaxisScaleMax: yaxisScaleMax, yaxisScaleMin: yaxisScaleMin, xaxisTickmarks: false, backgroundGridBorder: false, backgroundGridVlines: false, yaxis: false, spline: true } }).draw(); // Create the red part of the line line2 = new RGraph.SVG.Line({ id: 'cc2', data: data, options: { yaxis: false, yaxisScaleMax: yaxisScaleMax, yaxisScaleMin: yaxisScaleMin, marginLeft: marginLeft, linewidth: linewidth, filled: true, filledColors: [fills[1]], xaxisTickmarks: false, // Labels only need to be shown on the bottom chart xaxisLabels: [ '', 'Jan', '', '', 'Feb', '', '', 'Mar', '', '', 'Apr', '', '', 'May', '', '', 'Jun', '', '', 'Jul', '', '', 'Aug', '', '', 'Sep', '', '', 'Oct', '', '', 'Nov', '', '', 'Dec', '' ], backgroundGridBorder: false, backgroundGridVlines: false, spline: true } }).draw();
Add the clipping to the black chart
Now that the charts have been drawn we can start adding the clipping. The
first element that's added is the <clipPath>
element. Then a <rect>
element
is added that defines the shape of the clipped area. Finally, the relevant
attribute is set on the all-elements
group
so that it uses the clip. This is the code that creates the clipping for the top
half of the chart.
// Create the <clipPath> element that sits inside the <def> tag clip = RGraph.SVG.create({ svg: line.svg, type: 'clipPath', // This is case sensitive! parent: line.svg.defs, attr: { id: 'myClip' } }); // Create the shape element for the clip area RGraph.SVG.create({ svg: line.svg, parent: clip, type: 'rect', attr: { // These coordinates create a rect that is the same size as the top half of the SVG tag x: 0, y: 0, width: 650, height: 125 } }); // Now set the clip-path attribute on the first Line charts all-elements group line.svg.all.setAttribute( 'clip-path', 'url(#myClip)' );
Add the clipping to the red chart
Now that the clipping has been added to the black chart that restricts it to the top half of the SVG tag clipping can also be added to the red charts SVG tag to restrict it to the bottom half of the SVG tag.
// Create the <clipPath> element that sits inside the <def> tag *** for the bottom half of the chart *** clip2 = RGraph.SVG.create({ svg: line2.svg, type: 'clipPath', // This is case sensitive! parent: line2.svg.defs, attr: { id: 'myClip2' } }); // Create the shape element for the clip area RGraph.SVG.create({ svg: line2.svg, parent: clip2, type: 'rect', attr: { // These coordinates create a <rect> that is the same size as the bottom half of the SVG tag x: 0, y: 150, width: 900, height: 150 } }); // Now set the clip-path attribute on the second Line charts all-elements group line2.svg.all.setAttribute( 'clip-path', 'url(#myClip2)' );
A demo file of this technique
An example file that's included in the download zip file that you can run on your computer is svg-line-clipped.html.