Share:

RGraph: HTML5 canvas graph library - Scatter graph documentation

A scatter graph. 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
• Box plots
• Specific points for labels on the X axis
• Custom tickmarks
• Note about colors and the key

<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', 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);

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

Chart configuration

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

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>

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 graph object
    * @param object data  The graph 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']);