A Radial Scatter chart importing CSV data

Here's a Radial Scatter chart - a circular Scatter chart. It's a variation on the regular Scatter chart that might suit your data better than the traditional style of Scatter. Radial Scatter charts are only available on canvas - not svg.

Each point has two values - the angle of the point in degrees and the absolute magnitude. If your values for the angle are initially in a relative format then you would need to convert them first. You could do that with the following example code:

arr = [[10,10],[5,10]];
max = 10;
for (var i=0; i<arr.length; i++) {
    arr[i][0] = arr[i][0] / max * 360;
}
console.log(arr);

All this snippet does is convert the data to proportional values based on the maximum value in the array - so you would get an array of [360, 180] So one point would be placed on the north axis and the other point would be placed on the south axis.

The only other configuration is the labels being changed from being on all four axes to just the 'north' axis.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.csv.js"></script>
<script src="RGraph.rscatter.js"></script>

Put this where you want the chart to show up:

<div style="float: right">
    <canvas id="cvs" width="500" height="450">[No canvas support]</canvas>
</div>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // Create the CSV reader with the URL of the CSV file and the
    // callback function.
    new RGraph.CSV('/sample.csv', function (csv)
    {
        // Fetch the two rows of data from the CSV file, starting at the
        // second column (the numbers start at zero)

        // Fetch the first row of the CSV file
        var row1 = csv.row(0, 1);
        
        // Fetch the second row of the CSV file
        var row2 = csv.row(1, 1);
        
        // Create an empty array that will hold the data
        var data = [];

        // Now fill the data array with the data that was retrieved from
        // the CSV file
        for (var i=0; i<row1.length; i+=1) {
            data.push( [(row1[i] / 10) * 360, row2[i]]);
        }

        // Create and show the RScatter chart with only the north axis
        // having labels
        new RGraph.RScatter({
            id: 'cvs',
            data: data,
            options: {
                labelsAxes: 'n',
                marginTop: 15,
                marginBottom: 15,
                marginLeft: 15,
                marginRight: 15,
                responsive: [
                    {maxWidth:null,width:500,height:450,parentCss:{'float':'right',textAlign:'none'}},
                    {maxWidth:800,width:400,height:300,parentCss: {'float':'none',textAlign:'center'}}
                ]
            }
        }).explode();
    });
</script>