Radial Scatter chart API reference

Summary: Documentation about the Radial scatter chart including information about all of the options that are available to you. A Radial Scatter chart is just like a regular Scatter chart but displayed in a circular fashion instead of a rectangular one.

• Example
• Properties
• Methods
• Custom RGraph events that are available

Example

<script>
    tooltip = '%{key}';

    new RGraph.RScatter({
        id: 'cvs',
        data: [
            [ [15,53,'red',tooltip], [45,63,'red',tooltip], [48,45,'red',tooltip], [52,38,'red',tooltip], [51,61,'red',tooltip] ],
            [ [270,45, 'blue',tooltip], [270,55, 'red',tooltip] ]
        ],
        options: {
            tooltipsFormattedKeyLabels: ['John','Molly','Pete','Olga','Luis','Kevin','Julie'],
            tooltipsCss: {
                fontSize: '16pt',
                boxShadow: '',
                textAlign: 'left'
            },
            labels: ['NE','E','SE','S','SW','W','NW','N'],
            labelsPosition: 'edge',
            marginLeft: 35,
            marginRight: 35,
            labelsAxesSize: 8
        }
    }).draw();
</script>

Properties

You can use these properties to control how the chart appears. You can set them by including them in the options section of the configuration as is shown above.

• Chart configuration properties
• Background properties
• Margin properties
• Labels and text properties
• Title properties
• Key properties
• Scale properties
• Interactive features properties
• Axes properties
• Line properties
• Miscellaneous properties

Chart configuration properties

Background properties

Margin properties

color properties

Labels and text properties

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

Title properties

Key properties

Scale properties

Axes properties

Interactive features properties

tooltipsFormattedKeyColorsCss : {
    border: "1 px solid #ddd";
}

tooltips: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt'
}

tooltipsFormattedKeyColorsCss : {
    border: "1 px solid #ddd";
}

tooltips: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt'
}

Line properties

Miscellaneous properties

Methods

<script>
    rscatter.canvas.onclick = function (e)
    {
        RGraph.redraw();
    
        var canvas  = e.target,
            obj     = canvas.__object__,
            shape   = obj.getShape(e);

        if (shape) {

            var x = shape.x,
                y = shape.y;

            // Path a circle that indicates the point
            obj.path(
                'b a % % 5 0 6.29 false s red f red',
                x, y
            );
        }
    }
</script>

This method can be used to get an appropriate radius of a point based on the scale. This is useful when working out how far away from the center a point should be. In a set of coordinates, the first value is the rotational value in degrees - it can be 0-360.

This method can be used to set an event listener on an object. It operates in a similar way to the jQuery on() function. The first argument is the event that you wish to attach to and the second is the handler function. For example:

obj.on('draw', function (obj)
{
    // Put your event code here
});

The function is useful if you use method chaining when creating your charts:

var obj = new RGraph.RScatter({
    id: 'cvs',
    data: [[45,36],[48,68],[66,56],[95,35],[120,45],[155,65]]
}).on('draw', function (obj)
{
    // Put your draw event code here

}).on('click', function (e, shape)
{
    // Put your click event code here
}).draw();

The exec function is documented here.

Custom RGraph events that are available

Custom RGraph events are events that RGraph fires when certain actions occur. There is a more comprehensive list of these events here . Here's some example code that show you how to add these events to your chart.

• click
• mousemove
• mouseover
• mouseout

There's more documentation about events available here: Summary of events documentation

<script>
    rscatter = new RGraph.RScatter({
        id: 'cvs',
        data: [[10,10],[20,20],[30,30],[40,40],[50,50]],
        options: {
        }
    }).draw().on('click', function (e, shape)
    {
        // Add your click event listener code here

    }).on('mousemove', function (e, shape)
    {
        // Add your mousemove event listener code here

    }).on('mouseover', function (e, shape)
    {
        // Add your mouseover event listener code here

    }).on('mouseout', function (obj)
    {
        // Add your mouseout event listener code here
    });
</script>