Radial Scatter chart API reference

• Example
• Properties
• Methods
• The coordinates properties
• Events
• Effects

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 shown above.

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

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

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

tooltipsFormattedListItems: [
    ['Bill','Jerry','Berty'],// First tooltip
    ['Gill','Carrie','Lucy'],// Second tooltip
    ['Pob','Nobby','Hilda']  // Third tooltip
]

.RGraph_tooltip ul#rgraph_formatted_tooltips_list li {
    text-align: left;
    color: yellow;
}

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

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

Methods

.on('draw', function (obj)
{
   // Put your code here. Depending on the event, you can sometimes
   // get meta information from the RGraph registry. See the list
   // of event types below for more detail.
});

new RGraph.RScattter({
    id: 'cvs',
    data: [
       // First dataset
        [ [15,53,'red',tooltip], [45,63,'red',tooltip], [48,45,'red',tooltip], [52,38,'red',tooltip], [51,61,'red',tooltip] ],
        
       // Second dataset
        [ [270,45, 'blue',tooltip], [270,55, 'red',tooltip] ]
    ],
    options: {
        events: {
            beforedraw: function () {alert('The beforedraw event fired');},
            draw: [
                function (obj) {alert('The first draw event listener function.');},
                function (obj) {alert('The second draw event listener function.');}
            ]
        }
    }
}).draw();

<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>

The coordinates properties

There are two coordinates arrays available on the RScatter chart: the obj.coords array and the obj.coords2 array.

• obj.coords A straight-forward single dimension array of all of the coordinates of all of the points that are drawn on the chart.
  
  
• obj.coords2 A multi-dimensional array that's indexed differently - instead of each point that's shown on the chart being added to an array this is separate arrays of coordinates that are indexed by the dataset index. So all of the first datasets coordinates are grouped together in the first array, all of the second datasets coordinates are grouped together in the second array and so on for subsequent datasets. So on a chart which has two datasets with three points in each dataset you would get the following entries in the obj.coords2 array:
  • obj.coords2[0][0][0]
  • obj.coords2[0][0][1]
  • obj.coords2[0][1][0]
  • obj.coords2[0][1][1]
  • obj.coords2[0][2][0]
  • obj.coords2[0][2][1]
  • obj.coords2[1][0][0]
  • obj.coords2[1][0][1]
  • obj.coords2[1][1][0]
  • obj.coords2[1][1][1]
  • obj.coords2[1][2][0]
  • obj.coords2[1][2][1]
  
  
• obj.coordsText This holds the coordinates of all of the text that has been added to the chart. Even if the text is blank (ie no text) then the coordinates will be added to this variable.

Events

RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:

var obj = new RGraph.RScatter({
    id: 'cvs',
    data: [[45,36],[48,68],[66,56],[95,35],[120,45],[155,65]],
    options: {
        events: {
            draw: function (obj){console.log('The draw event has fired');},
            
            // Alternatively you can give an array of functions to run
            firstdraw: [
                function (obj) {console.log('First function');},
                function (obj) {console.log('Second function');}
            ]
        }
    }
}).draw();

Effects

There's a stopAnimation() function that you can use to stop an animation immediately if you need to. There's a line chart demo called demos/line-effects-stop-animation.html in the download archive that demonstrates the use of this function.

• The explode effect (effects-rscatter-explode.html in the download archive)

<script>
    //
    // The optional callback function that's called when the effect is complete
    //
    function myCallback (obj)
    {
        // ...
    }

    rscatter = 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] ],
        options: {
            labels: ['NE','E','SE','S','SW','W','NW','N'],
            labelsPosition: 'edge',
            marginLeft: 35,
            marginRight: 35,
            labelsAxesSize: 8
        }
    }).explode({frames: 60}, myCallback);
</script>