A Bipolar chart using CSV data

The CSV data is hidden in the page using a hidden DIV. It's then retrieved using the document.getElementById() function and split up using the JavaScript split() function. The resulting array is an array of strings so it's converted to numbers using the Number() function.

Note: Recent versions of RGraph should not need the strings converting to numbers - just the split() function will be sufficient and RGraph will do the conversion for you.

[No canvas support]

Note: In October 2013 a new CSV reader was added to RGraph. It makes reading CSV files much easier. You can read about the new CSV reader here.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bipolar.js"></script>
Put this where you want the chart to show up:
<div id="csv-data-left" style="display: none">6,8,6,3,5,2,4</div>
<div id="csv-data-right" style="display: none">4,8,6,3,5,2,4</div>

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
This is the code that generates the chart:
<script>
    left  = document.getElementById("csv-data-left").innerHTML.split(/,/);
    right = document.getElementById("csv-data-right").innerHTML.split(/,/);
    
        // Since they're strings, convert them to numbers
        //
        // *** Recent versions of RGraph should not need these conversions ***
        //
        //for (var i=0; i<left.length; ++i) {left[i] = Number(left[i]);}
        //for (var i=0; i<right.length; ++i) {right[i] = Number(right[i]);}

    var bipolar = new RGraph.Bipolar({
        id: 'cvs',
        left: left,
        right: right,
        options: {
            xaxis: false,
            axesColor: '#aaa',
            yaxisLabels: ['John','Luke','Pete','Jane','Fred','Jolene','Luis']
        }
    }).draw();
</script>