RGraph: 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.

chart.background.barcolor1 The colour of the background bars.
Default: #dce5fe		 chart.background.barcolor2 The colour of the background bars.
Default: #f6f6f6
chart.background.grid Whether to show the background grid or not.
Default: true		 chart.background.grid.color The colour of the background grid.
Default: #eee
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.ticksize The size of the tickmarks.
Default: 2
chart.gutter The gutter on the graph (the area outside of the axes).
Default: 25		 chart.text.size The size of the text.
Default: 12
chart.title The title of the scatter graph.
Default: none		 chart.tickmarks The style of the tickmarks. Can be cross, plus or circle.
Default: cross
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.xaxispos Where the X axis should be drawn. Can be either center or bottom.
Default: bottom
chart.tooltips.hotspot This controls the size of the hotspot on the chart for tooltips.
Default: 3		 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.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.tooltip.effect The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade 		chart.ymax The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)
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. It's used when you want multiple lines and are thefore drawing multiple charts on the same canvas.
Default: false 		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.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

You can set these properties by using the Set() method. Eg:

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