The drawing API X axis object
Summary: The drawing API X axis object which can be added to your charts to give them extra X axes. You can add any number of extra X axes to your chart as you need them.
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> bar = new RGraph.Bar({ id: 'cvs', data: [4,8,6,5,6,9,9,4], options: { axes: false, textSize: 14, marginBottom: 45, colors: ['gradient(white:red)'], shadow: false, backgroundGridVlines: false, backgroundGridBorder: false } }).draw(); xaxis = new RGraph.Drawing.XAxis({ id: 'cvs', y: bar.canvas.height - bar.marginBottom, options: { tooltips: ['The X axis represents each
person teaching at the college.'], xaxisLabels: ['Rich','Alex','Johnny','Kev','Pete','Luis','John','Barry'], colors: ['#666'] } }).draw(); </script>
Properties
- Color properties
- Title properties
- Margin properties
- X axis properties
- Y axis properties
- Other label properties
- Interactive features properties
- Miscellaneous properties
Color properties
Property | Description | Default |
---|---|---|
colors | An array of colors. Even though it's an array only the first color is used. | ['black'] |
An array of colors. Even though it's an array only the first color is used.
Default: ['black']
Margin properties
The left margin of the axis. This can be the same or different to the chart.
Default: 25
marginRight
The right margin of the axis. This can be the same or different to the chart.
Default: 25
marginInner
The (inner) horizontal margin of the axis. Useful for matching up labels/points of the Line chart.
Default: 0
X axis properties
This option can be specified if you don't want an axis drawn (the labels are still drawn).
Default: true
xaxisPosition
Whether the X axis has tickmarks on both sides or just underneath. This can be
center
or bottom
.Default: bottom
xaxisLabels
Instead of a scale you can use this to specify labels for the X axis.
Default: null
xaxisLabelsPosition
This can be
edge
or section
and determines how the labels are aligned. For an illustration compare the labels of the Bar chart vs the labels of the Line chart.Default: section
xaxisLabelsCount
When showing a scale this determines how many labels are shown.
Default: 5
xaxisLabelsFont
The font used to render the text.
Default: null
xaxisLabelsSize
The size of the labels.
Default: null
xaxisLabelsColor
The color of the labels.
Default: null
xaxisLabelsBold
Whether the labels are bold or not.
Default: null
xaxisLabelsItalic
Whether the labels are italic or not.
Default: null
xaxisLabelsOffsetx
The X offset of the labels (in pixels).
Default: 0
xaxisLabelsOffsety
The Y offset of the labels (in pixels).
Default: 0
xaxisLabelsAngle
The angle of the X axis labels. You could, for example, set this to 45.
Default: 0
xaxisTickmarksCount
The number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids.
Default: null
xaxisTickmarksAlign
The alignment of the tickmarks and labels. This can be
top
or bottom
.Default: bottom
xaxisTickmarksLastLeft
This option can be used to prevent the left end tickmark from being drawn.
Default: true
xaxisTickmarksLastRight
This option can be used to prevent the right end tickmark from being drawn.
Default: true
xaxisScaleVisible
This determines whether the scale is displayed.
Default: true
xaxisScaleFormatter
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('xaxisScaleFormatter', myFormatter)
Default: null
xaxisScaleDecimals
The number of decimals shown.
Default: 0
xaxisScaleInvert
Whether the scale is inverted (ie minimum value at the top).
Default: false
xaxisScaleZerostart
This determines whether zero is shown.
Default: true
xaxisScaleUnitsPre
The units for the scale. This is prepended to the number.
Default: An empty string
xaxisScaleUnitsPost
The units for the scale. This is appended to the number.
Default: An empty string
xaxisScalePoint
The character used as a decimal point.
Default: .
xaxisScaleThousand
The character used as the thousand separator.
Default: ,
xaxisScaleMax
The maximum value of the scale.
Default: null
xaxisScaleMin
The minimum value of the scale.
Default: 0
xaxisTitle
The title displayed on the X axis.
Default:
xaxisTitleFont
The font used to render the X axis title.
Default: none
xaxisTitleSize
The size of the title.
Default: null
xaxisTitleColor
The color of the title.
Default: null
xaxisTitleBold
Whether the title is bold or not.
Default: null
xaxisTitleItalic
Whether the title is italic or not.
Default: null
Y axis properties
Property | Description | Default |
---|---|---|
yaxisPosition | This can facilitate when you have a Y axis in the center (eg the Horizontal Bar chart). | left |
This can facilitate when you have a Y axis in the center (eg the Horizontal Bar chart).
Default: left
Other label properties
The color of the text. If not specified then it's the same as the colors option.
Default: null
textFont
The font used when rendering the text.
Default: Arial
textSize
The size used when rendering text.
Default: 10
textBold
Whether the text is bold or not.
Default: 10
textItalic
Whether the text is italic or not.
Default: 10
Interactive features properties
Property | Description | Default |
---|---|---|
tooltips | This can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on. | null |
tooltipsEvent | This is the event that triggers the tooltips. It can be either click or mousemove . | onclick |
tooltipsEffect | The effect used for showing tooltips. Can be either fade or none . | fade |
tooltipsCssClass | This is the name of the CSS class the chart uses. | RGraph_tooltip |
tooltipsOverride | 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. | null |
tooltipsNohideonclear | Not an option that you'll need particularly often if at all. Setting this to true means that when you call the RGraph.clear() API function tooltip DO NOT get hidden. | false |
This can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on.
Default: null
tooltipsEvent
This is the event that triggers the tooltips. It can be either
click
or mousemove
.Default: onclick
tooltipsEffect
The effect used for showing tooltips. Can be either
fade
or none
.Default: fade
tooltipsCssClass
This is the name of the CSS class the chart uses.
Default: RGraph_tooltip
tooltipsOverride
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
tooltipsNohideonclear
Not an option that you'll need particularly often if at all. Setting this to true means that when you call the
RGraph.clear()
API function tooltip DO NOT get hidden.Default: false
Miscellaneous properties
By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument.
Default: null
linewidth
The linewidth used to draw the axis.
Default: 1
Methods
obj.get(name)An accessor that you can use to retrieve the values of properties.
obj.set(name, value)
An accessor that you can use to set the values of properties.
obj.getShape(event)
This method makes it easy to get hold of the X axis when it has been clicked on or hovered over. It returns an object which has the following indexes available:
object |
The chart object. |
x |
The X coordinate for the axis (usually equivalent to the left margin). |
y |
The Y coordinate for the axis. |
width |
The width of the axis (usually equivalent to the canvas width minus the left and right margins). |
height |
The height of the X axis (including the label area). |
dataset |
As there's only ever one element this is always zero. |
index |
As there's only ever one element this is always zero. |
sequentialIndex |
As there's only ever one element this is always zero. |
tooltip |
If a tooltip is associated with the X axis object this will be it.id:
strings are expanded for you (where the tooltip text is retrieved from the HTML
tag with the matching ID).
|
<script>
xaxis.canvas.onclick = function (e)
{
RGraph.redraw();
var canvas = e.target,
obj = canvas.__object__,
shape = obj.getShape(e);
if (shape) {
// Highlight the main body of the X axis object.
obj.path(
'lw 10 b r % % % % s black f rgba(255,0,0,0.25)',
shape.x, shape.y, shape.width, shape.height
);
}
}
</script>
obj.on(event, function)
This method can be used to set an event listener on an object.
It operates in a similar way to the jQuery on()
function.
The first argument is the event that you wish to attach to and the second
is the handler function. For example:
obj.on('draw', function (obj)
{
// Put your event code here
});
The function is useful if you use method chaining when creating your charts:
obj = new RGraph.Drawing.XAxis({ id: 'cvs', }).on('draw', function (obj) { // Put your draw event code here }).on('click', function (e, shape) { // Handle the click event }).draw();
obj.exec(function)
The exec function is documented here.
Custom RGraph events that are available
Custom RGraph events are events that RGraph fires when certain actions occur. There is a more comprehensive list of these events here . Here's some example code that show you how to add these events to your chart.
- click
- mousemove
- mouseover
- mouseout
There's more documentation about events available here: Summary of events documentation
<script>
xaxis = new RGraph.Drawing.XAxis({
id: 'cvs',
y: 50,
options: {
}
}).draw().on('click', function (e, shape)
{
// Add your click event listener code here
}).on('mousemove', function (e, shape)
{
// Add your mousemove event listener code here
}).on('mouseover', function (e, shape)
{
// Add your mouseover event listener code here
}).on('mouseout', function (obj)
{
// Add your mouseout event listener code here
});
</script>