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:

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

chart.gutter The gutter on the graph (the area outside of the axes).
Default: 25		 chart.background.barcolor1 The color of the background bars.
Default: rgba(0,0,0,0)
chart.background.barcolor2 The color of the background bars.
Default: rgba(0,0,0,0)		 chart.background.grid Whether to show the background grid or not.
Default: true
chart.background.grid.color The color of the background grid.
Default: #eee		 chart.background.hbars An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: myScatter.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]); This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.
Default: null
chart.background.grid.border Determines whether a border line is drawn around the grid.
Default: true		 chart.background.grid.hlines Determines whether to draw the horizontal grid lines.
Default: true
chart.background.grid.vlines Determines whether to draw the vertical grid lines.
Default: true		 chart.xmax The maximum X axis value you wish to set. For example if you're display doobries sold in a year, you might use 365.
Default: none - must be supplied
chart.ymax The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)		 chart.ticksize The size of the tickmarks.
Default: 2
chart.text.font The font used to render the text.
Default: Verdana		 chart.text.color The color of the labels.
Default: black
chart.text.size The size of the text (in points).
Default: 10		 chart.text.angle The angle of the horizontal text labels (at the bottom of the graph). This can be one of three values - 0, 45 or 90.
Default: 0 (Horizontal)
chart.title The title of the scatter graph.
Default: none		 chart.title.vpos This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null
chart.title.color The color of the title.
Default: black		 chart.tickmarks The style of the tickmarks. Can be cross, plus,circle or null (no tickmarks).
Default: cross
chart.xaxispos Where the X axis should be drawn. Can be either center or bottom.
Default: bottom		 chart.axis.color The color of the axes.
Default: black
chart.scale.decimals The number of decimal places to display for the Y scale.
Default: 0		 chart.defaultcolor This is the default color of tick marks, which is used if a color isn't given.
Default: #000
chart.units.pre The units (if any) that the Y axis is measured in (these are preppended to the number).
Default: none		 chart.units.post The units (if any) that the Y axis is measured in (these are appended to the number).
Default: none
chart.tooltip.effect The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade		 chart.tooltips.hotspot This controls the size of the hotspot on the chart for tooltips.
Default: 3
chart.crosshairs If true, you will get a crosshair centering on the current mouse position.
Default: false		 chart.crosshairs.color The color of the crosshairs.
Default: #333
chart.contextmenu An array of context menu items. More information on context menus is here.
Default: null		 chart.annotatable Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false
chart.annotate.color If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: #000		 chart.line Whether to show a connecting line (like in the sixth example).
Default: false
chart.line.colors The colors of the lines connecting the tick marks.
Default: ['green', 'red']		 chart.line.shadow.color The color of the lines shadow (if any).
Default: rgba(0,0,0,0) (invisible)
chart.line.shadow.offsetx The X offset of the lines shadow.
Default: 3		 chart.line.shadow.offsety The Y offset of the lines shadow.
Default: 3
chart.line.shadow.blur The severity of the line shadows blurring effect.
Default: 2		 chart.noaxes If this is set to true, no axes will be drawn.
Default: false
chart.zoom.mode Can be used to control whether the zoom is in thumbnail or canvas mode. Possible values are: thumbnail and canvas.
Default: canvas		 chart.zoom.factor This is the factor that the graph will be zoomed by (bigger values means more zoom)
Default: 1.5
chart.zoom.fade.in Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true		 chart.zoom.fade.out Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.
Default: true
chart.zoom.hdir The horizontal direction of the zoom. Possible values are: left, center, right
Default: right		 chart.zoom.vdir The vertical direction of the zoom. Possible values are: up, center, down
Default: down
chart.zoom.delay The delay (in milliseconds) between frames.
Default: 50		 chart.zoom.frames The number of frames in the zoom animation.
Default: 10
chart.zoom.shadow Whether or not the zoomed canvas has a shadow or not.
Default: true		 chart.zoom.thumbnail.width When the zoom is in thumbnail mode, this is the width (in pixels) of the thumbnail.
Default: 75
chart.zoom.thumbnail.height When the zoom is in thumbnail mode, this is the height (in pixels) of the thumbnail.
Default: 75		 chart.boxplot.width This stipulates the width of boxes For more on boxplots, see here.
Default: 8


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

<script>
    scatter8 = new RGraph.Scatter('scatter8', [
                                               [10,[0,1,16,24,30, 'red', 'green']],
                                               [105,[5,10,15,25,45, '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>