Two new interesting demos added

Written by Richard, 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>