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 firstLine 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();