This is an SVG chart that use a different color for the top half compared to the bottom half. You could use it to show a financial chart where the top half is black and the bottom half is red. There's a HOWTO document available of this technique.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.line.js"></script>Put this where you want the chart to show up:
<div style="position: relative; width: 700px; height: 300px"> <div id="cc1" style="width: 700px; height: 300px; position: absolute; top: 0; left: 0"></div> <div id="cc2" style="width: 700px; height: 300px; position: absolute; top: 0; left: 0"></div> </div>This is the code that generates the chart:
<script> // 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)' ]; gutterLeft = 50; yaxisMin = -10; yaxisMax = 10; linewidth = 3; // Create the green part of the line line = new RGraph.SVG.Line({ id: 'cc1', data: data, options: { gutterLeft: gutterLeft, colors: ['#0c0'], linewidth: linewidth, filled: true, filledColors: [fills[0]], yaxisMax: yaxisMax, yaxisMin: yaxisMin, xaxisTickmarks: false, backgroundGridBorder: false, backgroundGridVlines: false, yaxis: false, spline: true, xaxisColor: '#666' } }).draw(); // Create the red part of the line line2 = new RGraph.SVG.Line({ id: 'cc2', data: data, options: { yaxis: false, yaxisMax: yaxisMax, yaxisMin: yaxisMin, xaxisColor: '#666', gutterLeft: gutterLeft, 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(); // 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: 900, height: 150 } }); // Now set the clip-path attribute on the first Line charts all-elements group line.svg.all.setAttribute( 'clip-path', 'url(#myClip)' ); // 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)' ); </script>