RGraph: HTML5 Javascript charts library - Scatter charts documentation

Scatter charts. Used to represent many data points over a period of time. For example, events occurring in a given year.

The example file is here.

• Properties
• Methods
• Box plots
• Specific points for labels on the X axis
• Custom tickmarks
• Note about colors and the key
• Note about the on crosshairs event

<script>
    window.onload = function ()
    {
        var data = [
                    [67,78,null, 'The winner!'], [67,40,'red'], [58,12], [78,56], [365,90], [360,300], [320,150], [15,45],
                    [16,43], [84,12], [67,89,'green'], [90,23,'green'], [23,80], [80,66], [55,66], [88,12], [43,45], [61,12],
                    [15,89], [13,16]
                   ];
        var sg = new RGraph.Scatter('myScatter', data);
        sg.Set('chart.background.barcolor1','rgba(255,255,255,1)');
        sg.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
        sg.Set('chart.grid.color', 'rgba(238,238,238,1)');
        sg.Set('chart.gutter.left', 30);
        sg.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        sg.Set('chart.xmax', 365); // Important!
        sg.Draw();
    }
</script>

As you can see each mark on the Scatter chart is made by supplying an array of up to 4 elements:

• The X value (required)
• The Y value (required)
• The color (optional)
• The tooltip for this mark (optional)

If you wish to specify a tooltip, but not a color (ie use the default color instead), you can pass null instead of a color.

Properties

You can use these properties to control how the Scatter apears. You can set them by using the Set() method. Eg:

myScatter.Set('chart.xmax', 365);

• Background
• Labels and text
• Margins
• Axis properties
• Titles
• Scale
• Interactive features
• Line properties
• Key
• Zoom
• Miscellaneous

Background

myScatter.Set('chart.background.hbars', [[75, 10, 'yellow'], [85, 15, 'red']]);

myScatter.Set('chart.background.vbars', [[0, 181, 'rgba(0,255,0,0.5)']]);

Labels and text

Margins

Axis properties

Titles

Scale

function myFormatter(obj, num)
{
    return num + 'F'; // An example of formatting
}
myGraph.Set('chart.scale.formatter', myFormatter);

Interactive features

Note: Unlike other charts, the Scatter chart tooltips are specified as part of the data array. See above.

Line properties

Key

Zoom

Miscellaneous

Methods

This method makes it easier to get hold of which point on the Scatter chart has been hovered over. It returns an array of:

• The X coordinate of the point
• The Y coordinate of the point
• The data set. This corresponds to the appropriate dataset (since mutiple datasets can be given to the constructor)
• The index of the appropriate data point in the set
• The tooltip (if any) for that particular point

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

<canvas id="cvs" width="600" height="250" style="border: 1px gray dashed">[No canvas support]</canvas>

<script>
    scatter = new RGraph.Scatter('cvs', [[5,1, 'red', 'A'],[4,2,, 'B'],[3,9,,'C'],[10,12,,'D'],[300,2,,'E']],
                                        [[5,6, 'red', 'F'],[2,9,,'G'],[13,19,,'H'],[18,17,,'I'],[340,12,,'J']]);
    scatter.Set('chart.xmax', 365);
    scatter.Set('chart.line', true);
    scatter.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']);
    scatter.Draw();

    scatter.canvas.onmousemove = function (e)
    {
        var canvas  = e.target;
        var context = canvas.getContext('2d');
        var obj     = canvas.__object__;
        var point   = obj.getPoint(e);

        if (point) {
            p('\r\nX Coordinate: ' + point[0] + '\r\n' +
              'Y Coordinate: ' + point[1] + '\r\n' +
              'Dataset: ' + point[2] + '\r\n' +
              'Datapoint: ' + point[3] + '\r\n' +
              'Tooltip: ' + point[4] + '\r\n');
        }
    }
</script>

Box plots

Instead of a single Y value, you have the ability to specify an array of 5, 6, 7 or 8 values, which will be used to make a box plot. The example page shows a box plot. These values are (in order):

• Lower whisker
• Bottom of box
• Middle value (which isn't necessarily in the center of the box - this depends on your data)
• Top of box
• Upper whisker
• Upper color (optional)
• Lower color (optional)
• Width (optional)

<script>
    scatter8 = new RGraph.Scatter('scatter8', [
                                               [10,[1,1,16,24,24, 'red', 'green']],
                                               [105,[5,10,15,25,25, 'red', 'green']],
                                               [125,[10,15,25,35,45, 'red', 'green']],
                                               [325,[10,15,25,35,45, 'red', 'green', 30]]
                                              ]);
    scatter8.Set('chart.title', 'An example of a boxplot');
    scatter8.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']);
    scatter8.Set('chart.xmax', 365);
    scatter8.Set('chart.ymax', 50);
    scatter8.Set('chart.boxplot.width', 12); // The default width
    scatter8.Draw();
</script>

Capped ends

For better compatibility with stock charts, you can now specify that the horizontal lines at the ends of the box plot are not shown with chart.boxplot.capped.

Specific points for labels on the X axis

Instead of a simple string which is used as the label, each entry of the chart.labels array can be a two element array consisting of the label, and the X value that the label should be placed at. For example:

scatter.Set('chart.labels', [
                             ['Quarter 1', 0],
                             ['Quarter 2', 90],
                             ['Quarter 3', 181],
                             ['Quarter 4', 273]
                            ]);

Custom tickmarks

If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark, enabling you to draw the tickmark yourself. For example:

<script>
    line.Set('chart.tickmarks', myTick);

    /**
    * The function that is called once per tickmark, to draw it
    * 
    * @param object obj   The chart object
    * @param object data  The chart data
    * @param number x     The X coordinate
    * @param number y     The Y coordinate
    * @param number xVal  The X value
    * @param number yVal  The Y value
    * @param number xMax  The maximum X scale value
    * @param number xMax  The maximum Y scale value
    * @param string color The color of the tickmark
    */
    function myTick (obj, data, x, y, xVal, yVal, xMax, yMax, color)
    {
        // Draw your custom tick here
    }
</script>

Note about colors and the key

If you're using a key you may need to set chart.line.colors to allow it to use the correct colors. For example:

myObj.Set('chart.line.colors', ['red','green','blue']);

Note about the oncrosshairs event

With the Scatter chart you can use the oncrosshairs custom event to pull out the crosshair coordinates, like this: The coordinates are only available if you have them displayed.

function myFunc (obj)
{
    var xCoord = obj.canvas.__crosshairs_x__;
    var yCoord = obj.canvas.__crosshairs_y__;
}
RGraph.AddCustomEventListener(myScatter, 'oncrosshairs', myFunc);