Two new interesting demos added

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>