Strictly-speaking clipping isn't used - two SVG charts are drawn - both different colors - and HTML/CSS positioning and visibility is used to ensure the relevant portion of each is visible.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.tooltips.js"></script> <script src="RGraph.svg.line.js"></script>Put this where you want the chart to show up:
<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>This is the code that generates the chart - it should be placed AFTER the
<div>
tag: