New dual-color Line chart added to the download archive
Written by Richard Heyes, on 20th March 2022I've just added a new demo to the RGraph download archive which shows a dual-color Line chart - one color for positive values and another color for negative values. The demo code is shown below and it should function correctly with version 6.06 of RGraph (the current version). It will be included in the next available download archive (version 6.07) whenever that is available.
The chart uses the beforedraw
and
draw
events in order to install and remove
clipping - which facilitates using two separate colors
for positive and negative values.
Note also that the second chart uses the ES6
spread
operator so if you're using a
particularly old browser then this demo may not
function correctly.
// The first line chart is clipped to the top half of the // canvas so you only see the top half of the chart. The // clipping is installed by thebeforedraw
event and then // removed by thedraw
event. As a result you only see the // top half of the chart (which is red) new RGraph.Line({ id: 'cvs', data: data = [ 4,8,6,3,2,4,-5,-4,5,6,-1,-9,1,2,-3,-5,-7,-4,-2,-2,6,2,3,4, 4,8,6,2,3,5,1,4,9,5,6,4,3,8,7,5,6,4,5,1,2,3,4,6 ], options: opt = { textSize: 15, xaxisPosition: 'center', yaxis: false, backgroundGridHlinesCount: 10, backgroundGridVlines: false, backgroundGridBorder: false, shadow: false, linewidth: 0.5, colors: ['red'], filled: true, filledColors:['rgba(255,128,128,0.25)'], marginInner: 15, spline: true, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], xaxisTickmarksCount: 12 } }).on('beforedraw', function (obj) { obj.path( 'sa b r % % % % cl', 0,0,obj.canvas.width,obj.canvas.height / 2 ); }).on('draw', function (obj) { obj.path('rs'); }).trace(); // This is the chart object that shows the bottom half of the // chart. Again, clipping is used to accomplish this and is again // installed by thebeforedraw
and removed by thedraw
events. // This chart uses blue colors instead instead of red. new RGraph.Line({ id: 'cvs', data: data, options: { ...opt, // Use the ES6 spread operator to combine // the options from above colors: ['blue'], filledColors: ['rgba(128,128,255,0.25)'], yaxisLabels: false, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] } }).on('beforedraw', function (obj) { obj.path( 'sa b r % % % % cl', 0,obj.canvas.height / 2,obj.canvas.width,obj.canvas.height / 2 ); }).on('draw', function (obj) { obj.path('rs'); }).trace();