Two new interesting demos added
Written by Richard Heyes, RGraph author, on 3rd July 2022
Two new demos have been added, which will be available in
the next release (6.09). One of the demos is called
line-big-data.html
and is an example of
showing a large amount of data using the Line chart
. In
this case, there are 100,000 points shown. The rendering
takes about half a second. To help improve the rendering
time certain bits of the chart are turned off - namely
the x-axis
, the y-axis
and the background grid vertical
lines.
The other demo is a Bar chart
that uses the responsive
callback
option to switch to a Horizontal Bar chart
when the screen size is smaller. The whole code for this
chart is shown below. It uses a very simple Bar chart
to
set things up and install the responsive
configurations. Then each responsive
configuration has a callback
function that resets the
canvas
and then draws the appropriate chart.
<script> // // Some information that's used by both charts // data = [4,8,6,4,5,3,1,9,5,8]; labels = ['Bob','Jim','Lou','Pob','Kev','Doug','Bono','Vinny','Fee','Yugo']; marginInner = 10; tooltipsStyle = {fontSize: '18pt'}; // // This is the initial basic Bar chart that sets // up the responsive configurations. It's the // responsive callback functions that actually // draw the charts. // new RGraph.Bar({ id: 'cvs', data: [], options: { } }).responsive([ {maxWidth: null, width: 700, height: 350, callback: drawBar}, {maxWidth: 750, width: 450, height: 700, callback: drawHbar} ]); // // This function resets the canvas and then draws // a Horizontal Bar chart. // function drawHbar () { RGraph.reset('cvs'); new RGraph.HBar({ id: 'cvs', data: data, options: { colors: ['Gradient(#fcc:#f00:#f00)'], yaxisLabels: labels, marginInner: marginInner, backgroundGridHlines: false, backgroundGridBorder: false, xaxis: false, textSize: 16, labelsAbove: true, labelsAboveUnitsPost: '%', tooltips: '%{property:yaxisLabels[%{group}]}s results: %{value}%', tooltipsCss: tooltipsStyle, yaxisLabelsOffsetx: -10, marginLeft: 75, marginLeftAuto: false } }).draw(); } // // This function resets the canvas and then draws // a Bar chart. // function drawBar () { RGraph.reset('cvs'); new RGraph.Bar({ id: 'cvs', data: data, options: { colors: ['Gradient(#fcc:#f00:#f00)'], xaxisLabels: labels, marginInner: marginInner, backgroundGridVlines: false, backgroundGridBorder: false, yaxis: false, textSize: 16, labelsAbove: true, labelsAboveUnitsPost: '%', tooltips: '%{property:xaxisLabels[%{group}]}s results: %{value}%', tooltipsCss: tooltipsStyle, xaxisLabelsOffsety: 5, marginBottom: 45 } }).draw(); } </script>