Bookmark and 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.

<script>
    window.onload = function ()
    {
        var data = [
                    [67,78,'red', '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.

Available 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
• Zoom
• Miscellaneous

Background

Labels and text

Margins

Axis properties

Titles

Scale

Interactive features

Line properties

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]
                            ]);