The X axis object allows you to have extra X axes in your chart. Formerly this was an independent function but it's now been
converted to a drawing API object. This means that it's easier to use and has added interactivity options - such as mousemove
and click events and tooltips.
Usage example
<script>
window.onload = function (e)
{
var bar = new RGraph.Bar('cvs', [4,8,6,5,6,9,9,4])
.Set('chart.noaxes', true)
.Set('chart.background.grid.autofit.numvlines', 8)
.Draw();
var xaxis = new RGraph.Drawing.XAxis('cvs',bar.canvas.height - bar.gutterLeft)
.Set('tooltips', ['The X axis represents each<br />person teaching at the college.'])
.Set('labels', ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'])
.Set('colors', ['black'])
.Draw();
}
</script>
chart.colors An array of colors. Event though it's an array only the first colot is used. Default: ['black']
Titles
chart.title The title for the axis. Default: An empty string
chart.title.color The color of the title. If not specified then it's the same as chart.colors. Default: null
Margins
chart.gutter.left The left gutter of the axis. This can be the same or different to the chart. Default: 25
chart.gutter.right The rightgutter of the axis. This can be the same or different to the chart. Default: 25
chart.hmargin The horizontal margin of the axis. Useful for matching up labels/points of the Line chart. Default: 0
Labels and text
chart.labels Instead of a scale you can use this to specify labels for the X axis. Default: null
chart.labels.position This cand be edge or section and detemines how the labels are aligned. For an illustration compare the labels of the Bar chart vs the labels of the Line chart. Default: section
chart.numlabels When showing a scale this determines how many labels are shown by default. Default: 5
chart.text.color The color of the text. If not specified then it's the same as chart.colors. Default: null
chart.text.font The font used when rendering the text. Default: Arial
chart.text.size The size used when rendering text Default: 10
Axis properties
chart.numticks The number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids. Default: null
chart.align The alignment of the tickmarks and labels. This can be top or bottom. Default: bottom
chart.yaxispos This can facilitate when you have a Y axis in the center (eg the Horizontal Bar chart). Default: left
chart.noendtick.left This option can be used to prevent the left end tickmark from being drawn. Default: false
chart.noendtick.right This option can be used to prevent the right end tickmark from being drawn. Default: false
chart.noxaxis This option can be specified if you don't want an axis drawn (the labels are still drawn). Default: false
chart.linewidth The linewidth used to draw the axis. Default: 1
chart.xaxispos Uusually bottom, though you can set this to center and the tickmarks will start above the axis and end below the axis. Default: bottom
Scale
chart.scale.formatter This should be a function that returns the correctly formatted number. For example:
function myFormatter (obj, number)
{
// Return the formatted number
return number;
}
xaxis.Set('chart.scale.formatter', myFormatter)
Default: null
chart.scale.decimals The number of decimals shown. Default: 0
chart.scale.invert Whether the scale is inverted (ie minimum value at the top) Default: false
chart.scale.zerostart This determines whether zero is shown. Default: true
chart.scale.visible This determines whether the scale is displayed. Default: true
chart.units.pre The units for the scale. This is prepended to the number. Default: An empty string
chart.units.post The units for the scale. This is appended to the number. Default: An empty string
chart.max The maximum value of the scale. Default: null
chart.min The minimum value of the scale. Default: 0
Interactive features
chart.tooltips This can be array of tooltips (only the first element is used) that are shown when the axis is clicked on. Default: null
chart.tooltips.event This is the event that triggers the tooltips. It can be either onclick or onmousemove. Default: onclick
chart.tooltips.effect The effect used for showing tooltips. Can be either fade or none. Default: fade
chart.tooltips.css.class This is the name of the CSS class the chart uses. Default: RGraph_tooltip
chart.tooltips.override If you wish to handle showing tooltips yourself, this should be a function object which does just that. There's more information on the tooltips documentation page Default: null
Events
chart.events.click If you want to add your own onclick function you can do so by assigning it to this property. See here for details. Default: null
chart.events.mousemove If you want to add your own onmousemove function you can do so by assigning it to this property. See here for details. Default: null
