The drawing API Y axis object

Share RGraph:   
[No canvas support]

The Y axis object allows you to have extra Y 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>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,5,3,2,2,5],
        options: {
            hmargin: 5,
            noaxes: true,
            ylabels: false,
            gutterLeft: 150,
            colors: ['black'],
            tooltips: ['James','Jenna','Karl','Olga','Mark','Pete','Louise','Jack'],
            linewidth: 3,
            spline: true
        }
    }).draw();


    var line2 = new RGraph.Line({
        id: 'cvs',
        data: [50,60,57,85,45,23,56,56],
        options: {
            hmargin: 5,
            noaxes: true,
            ylabels: false,
            gutterLeft: 150,
            colors: ['red'],
            tooltips: ['James','Jenna','Karl','Olga','Mark','Pete','Louise','Jack'],
            linewidth: 3,
            spline: true,
            backgroundGrid: false
        }
    }).draw();


    var line3 = new RGraph.Line({
        id: 'cvs',
        data: [12,13,15,16,18,13,15,12],
        options: {
            hmargin: 5,
            noaxes: true,
            ylabels: false,
            gutterLeft: 150,
            colors: ['green'],
            tooltips: ['James','Jenna','Karl','Olga','Mark','Pete','Louise','Jack'],
            linewidth: 3,
            spline: true,
            backgroundGrid: false
        }
    }).draw();
    
    var yaxis = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: line.gutterLeft,
        options: {
            max: line.scale2.max,
            title: 'Widgets sold',
            colors: ['black']
        }
    }).draw();
    
    var yaxis2 = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: line.gutterLeft * (2/3),
        options: {
            max: line2.scale2.max,
            title: 'Outside mean temperature',
            colors: ['red']
        }
    }).draw();
    
    var yaxis3 = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: line.gutterLeft / 3,
        options: {
            max: line3.scale2.max,
            title: 'Rainfall measured by the MET office',
            tooltips: ['Rainfall measured by the MET office'],
            colors: ['green'],
            numlabels: 10
        }
    }).draw();
</script>

Properties

 

Colors

colors
An array of colors. Event though it's an array only the first color is used.
Default: ['black']

 

Titles

title
The title for the axis.
Default: An empty string

titleColor
The color of the title. If not specified then it's the same as chart.colors.
Default: null

 

Margins

gutterTop
The top gutter of the axis. This can be the same or different to the chart.
Default: 25

gutterBottom
The bottom gutter of the axis. This can be the same or different to the chart.
Default: 25

 

Labels and text

numlabels
This determines how many labels are shown by default.
Default: 5

textColor
This determines the color of the text labels. If not given it is the same as chart.colors.
Default: black

textFont
This determines the font used to render the text
Default: Arial

textSize
This determines the size that the text is rendered in.
Default: 10

labelsSpecific
Instead of having a scale you can instead have specific labels (eg low/medium/high)
Default: null

 

Axis properties

numticks
The number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids.
Default: null

align
The alignment of the tickmarks and labels. This can be left or right.
Default: left

xaxispos
This can facilitate when you have a X axis in the center (eg the Bar chart).
Default: bottom

noendtickTop
This option can be used to prevent the top end tickmark from being drawn.
Default: false

noendtickBottom
This option can be used to prevent the bottom end tickmark from being drawn.
Default: false

noyaxis
This option can be specified if you don't want an axis drawn (the labels are still drawn).
Default: false

linewidth
The linewidth used to draw the axis.
Default: 1

 

Scale

scaleFormatter
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('scale.formatter', myFormatter)

Default: null

scaleDecimals
The number of decimals shown.
Default: 0

scaleInvert
Whether the scale is inverted (ie minimum value at the top)
Default: false

scaleZerostart
This determines whether zero is shown.
Default: true

scaleVisible
This determines whether the scale is drawn. This value is not checked if you choose to use labels instead.
Default: true

unitsPre
The units for the scale. This is prepended to the number.
Default: An empty string

unitsPost
The units for the scale. This is appended to the number.
Default: An empty string

max
The maximum value of the scale.
Default: null

min
The minimum value of the scale.
Default: 0

 

Interactive features

tooltips
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 onclick or onmousemove.
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

 

Events

eventsClick
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

eventsMousemove
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

 

Miscellaneous

highlightStyle
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. Its passed the shape object as an argument.
Default: null

Comments

Add a new comment...