The drawing API Y axis object

Summary: The drawing API Y axis object which can be added to your charts to give them extra Y axes. You can add any number of extra Y axes to your chart as you need them.

[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>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [[1,2,8],[3,8,7],[9,6,5],[3,5,8],[5,6,6],[1,5,8],[4,8,6]],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            marginInner: 5,
            xaxis: false,
            yaxis: false,
            xaxisLabels: ['Mar','Apr','May','Jun','Jul','Aug','Sep'],
            yaxisLabels: false,
            marginLeft: 195,
            marginTop: 35,
            colors: [
                'Gradient(green:#0c0)',
                'Gradient(red:#c00)',
                'Gradient(blue:#00c)'
            ],
            tooltips: [
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl',
                'James','Jenna','Karl'
            ],
            key: ['James','Jenna','Karl'],
            keyPosition: 'margin',
            marginInner: 10,
            textSize: 16
        }
    }).wave();
    
    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: bar.marginLeft,
        options: {
            marginTop: 35,
            yaxisScaleMax: bar.scale2.max * 2,
            yaxisScaleDecimals: 1,
            textColor: 'blue',
            textSize: 16,
            yaxisColor: ['blue']
        }
    }).draw();

    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: bar.marginLeft - 70,
        options: {
            marginTop: 35,
            yaxisScaleMax: bar.scale2.max * 5,
            yaxisScaleDecimals: 1,
            textColor: 'red',
            textSize: 16,
            yaxisColor: ['red']
        }
    }).draw();
    
    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: bar.marginLeft - 140,
        options: {
            marginTop: 35,
            yaxisScaleMax: bar.scale2.max,
            yaxisScaleDecimals: 1,
            tooltips: ['Rainfall measured by the MET office'],
            yaxisColor: ['green'],
            textColor: 'green',
            textSize: 16
        }
    }).draw();
</script>

Properties

Y axis properties

PropertyDescriptionDefault
yaxisWhether the Y axis is drawn.true
yaxisPositionSpecifies the Y axis position. Can be left or right.left
yaxisLinewidthThe linewidth of the Y axis.1
yaxisColorThe color of the Y axis.black
yaxisTickmarks.Whether the Y axis tickmarks are drawn.true
yaxisTickmarksLengthThe length of the Y axis tickmarks.3
yaxisTickmarksCountThis allows you to stipulate how many Y axis tickmarks there are.null (related to how many labels there are)
yaxisTickmarksLastTopWhether the top-most tickmark is drawn.null (displayed if the X axis position warrants it)
yaxisTickmarksLastBottomWhether the bottom-most tickmark is drawn.null (displayed if the X axis position warrants it)
yaxisLabelsCountA value that controls how many Y labels there are. This value could formerly be either 1/3/5/10 however now it can be any number.5
yaxisLabelsSpecificYou can use this option to give your own Y labels (eg ['Low', 'Medium', 'High']. Note: Since March 2013 you may now need to add an extra (optionally) empty element to the array of labels to achieve your desired result.null
yaxisLabelsPositionThis controls how the specific labels are positioned on the Y axis. It has no effect on a scale.edge
yaxisLabelsOffsetxThis allows you finer grained control in the horizontal direction over the Y label positioning if you need it.0
yaxisLabelsOffsetyThis allows you finer grained control in the vertical direction over the Y label positioning if you need it.0
yaxisLabelsFontThe font that's used by the Y axis labels.null
yaxisLabelsSizeThe size of the Y axis labels.null
yaxisLabelsColorThe color of the Y axis labels.null
yaxisLabelsBoldWhether the Y axis labels are bold or not.null
yaxisLabelsItalicWhether the Y axis labels are italic or not.null
yaxisLabelsHalignThe horizontal alignment of the Y axis labels.null
yaxisLabelsValignThe vertical alignment of the Y axis labels.null
yaxisTitleThis allows you to specify a title for the Y axis.none
yaxisTitleSizeThis allows you to specify a size for the Y axis title.null
yaxisTitleFontThis allows you to specify a font for the Y axis title.null
yaxisTitleBoldThis controls whether the Y axis title is bold or not.null
yaxisTitleColorThis controls what color the Y axis title is.null
yaxisTitleItalicThis controls whether the Y axis title is italic or not.null
yaxisTitlePosThis is multiplied with the margin to give the position of the Y axis title.0.25
yaxisTitleOffsetxThe pixel offset that's added to the Y axis titles X coordinate.0
yaxisTitleOffsetyThe pixel offset that's added to the Y axis titles Y coordinate.0
yaxisTitleXBy giving this you can specifically set the X position of the Y axis title.null
yaxisTitleYBy giving this you can specifically set the Y position of the Y axis title.null
yaxisTitleHalignThe horizontal alignment of the Y axis title.0
yaxisTitleValignThe vertical alignment of the Y axis title.0
yaxisScaleWhether the Y axis scale is displayed or not.true
yaxisScaleRoundWhether the Y axis scale is rounded up or not.false
yaxisScaleUnitsPreThe units that the Y axis is measured in. This string is displayed before the actual number, allowing you to specify values such as "$50".none
yaxisScaleUnitsPostThe units that the Y axis is measured in. This string is displayed after the actual number, allowing you to specify values such as "50ms".none
yaxisScaleMaxThe optional maximum Y scale value. If not specified then it will be calculated.null (It's calculated)
yaxisScaleMinThe optional minimum Y scale value. If not specified then it will be 0.0
yaxisScaleFormatterTo allow thoroughly custom formats of numbers in the scale, you can use this option to specify a function that is used by RGraph to format numbers. This function should handle ALL of the formatting. Eg:

function myFormatter(opt)
{
    var num = Number(opt.number) * 5;

    return String(num)
}
obj.set('yaxisScaleFormatter', myFormatter);
null
yaxisScaleRoundWhether to round the scale up. eg A maximum value of 59 results in scale to 100.false
yaxisScaleDecimalsThe number of decimal places to display for the Y scale.0
yaxisScalePointThe character used as the decimal point..
yaxisScaleThousandThe character used as the thousand separator.,
yaxisScaleInvertWhether the Y axis scale is inverted or not.false
yaxis
Whether the Y axis is drawn.
Default: true

yaxisPosition
Specifies the Y axis position. Can be left or right.
Default: left

yaxisLinewidth
The linewidth of the Y axis.
Default: 1

yaxisColor
The color of the Y axis.
Default: black

yaxisTickmarks.
Whether the Y axis tickmarks are drawn.
Default: true

yaxisTickmarksLength
The length of the Y axis tickmarks.
Default: 3

yaxisTickmarksCount
This allows you to stipulate how many Y axis tickmarks there are.
Default: null (related to how many labels there are)

yaxisTickmarksLastTop
Whether the top-most tickmark is drawn.
Default: null (displayed if the X axis position warrants it)

yaxisTickmarksLastBottom
Whether the bottom-most tickmark is drawn.
Default: null (displayed if the X axis position warrants it)

yaxisLabelsCount
A value that controls how many Y labels there are. This value could formerly be either 1/3/5/10 however now it can be any number.
Default: 5

yaxisLabelsSpecific
You can use this option to give your own Y labels (eg ['Low', 'Medium', 'High']. Note: Since March 2013 you may now need to add an extra (optionally) empty element to the array of labels to achieve your desired result.
Default: null

yaxisLabelsPosition
This controls how the specific labels are positioned on the Y axis. It has no effect on a scale.
Default: edge

yaxisLabelsOffsetx
This allows you finer grained control in the horizontal direction over the Y label positioning if you need it.
Default: 0

yaxisLabelsOffsety
This allows you finer grained control in the vertical direction over the Y label positioning if you need it.
Default: 0

yaxisLabelsFont
The font that's used by the Y axis labels.
Default: null

yaxisLabelsSize
The size of the Y axis labels.
Default: null

yaxisLabelsColor
The color of the Y axis labels.
Default: null

yaxisLabelsBold
Whether the Y axis labels are bold or not.
Default: null

yaxisLabelsItalic
Whether the Y axis labels are italic or not.
Default: null

yaxisLabelsHalign
The horizontal alignment of the Y axis labels.
Default: null

yaxisLabelsValign
The vertical alignment of the Y axis labels.
Default: null

yaxisTitle
This allows you to specify a title for the Y axis.
Default: none

yaxisTitleSize
This allows you to specify a size for the Y axis title.
Default: null

yaxisTitleFont
This allows you to specify a font for the Y axis title.
Default: null

yaxisTitleBold
This controls whether the Y axis title is bold or not.
Default: null

yaxisTitleColor
This controls what color the Y axis title is.
Default: null

yaxisTitleItalic
This controls whether the Y axis title is italic or not.
Default: null

yaxisTitlePos
This is multiplied with the margin to give the position of the Y axis title.
Default: 0.25

yaxisTitleOffsetx
The pixel offset that's added to the Y axis titles X coordinate.
Default: 0

yaxisTitleOffsety
The pixel offset that's added to the Y axis titles Y coordinate.
Default: 0

yaxisTitleX
By giving this you can specifically set the X position of the Y axis title.
Default: null

yaxisTitleY
By giving this you can specifically set the Y position of the Y axis title.
Default: null

yaxisTitleHalign
The horizontal alignment of the Y axis title.
Default: 0

yaxisTitleValign
The vertical alignment of the Y axis title.
Default: 0

yaxisScale
Whether the Y axis scale is displayed or not.
Default: true

yaxisScaleRound
Whether the Y axis scale is rounded up or not.
Default: false

yaxisScaleUnitsPre
The units that the Y axis is measured in. This string is displayed before the actual number, allowing you to specify values such as "$50".
Default: none

yaxisScaleUnitsPost
The units that the Y axis is measured in. This string is displayed after the actual number, allowing you to specify values such as "50ms".
Default: none

yaxisScaleMax
The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)

yaxisScaleMin
The optional minimum Y scale value. If not specified then it will be 0.
Default: 0

yaxisScaleFormatter
To allow thoroughly custom formats of numbers in the scale, you can use this option to specify a function that is used by RGraph to format numbers. This function should handle ALL of the formatting. Eg:

function myFormatter(opt)
{
    var num = Number(opt.number) * 5;

    return String(num)
}
obj.set('yaxisScaleFormatter', myFormatter);

Default: null

yaxisScaleRound
Whether to round the scale up. eg A maximum value of 59 results in scale to 100.
Default: false

yaxisScaleDecimals
The number of decimal places to display for the Y scale.
Default: 0

yaxisScalePoint
The character used as the decimal point.
Default: .

yaxisScaleThousand
The character used as the thousand separator.
Default: ,

yaxisScaleInvert
Whether the Y axis scale is inverted or not.
Default: false

Margin properties

PropertyDescriptionDefault
marginTopThe top margin of the axis. This can be the same or different to the chart.35
marginBottomThe bottom margin of the axis. This can be the same or different to the chart.35
marginLeftThe left margin of the axis. This is only used internally.35
marginRightThe right margin of the axis. This is only used internally.35
marginTop
The top margin of the axis. This can be the same or different to the chart.
Default: 35

marginBottom
The bottom margin of the axis. This can be the same or different to the chart.
Default: 35

marginLeft
The left margin of the axis. This is only used internally.
Default: 35

marginRight
The right margin of the axis. This is only used internally.
Default: 35

Other label properties

PropertyDescriptionDefault
textColorThe color of the text labels.black
textFontThe font used to render the text.Arial, Verdana, san-serif
textSizeThe size that the text is rendered in.12
textBoldWhether the text is bold or not.false
textItalicWhether the text is italic or not.false
textColor
The color of the text labels.
Default: black

textFont
The font used to render the text.
Default: Arial, Verdana, san-serif

textSize
The size that the text is rendered in.
Default: 12

textBold
Whether the text is bold or not.
Default: false

textItalic
Whether the text is italic or not.
Default: false

Interactive features properties

PropertyDescriptionDefault
tooltipsThis can be an array of tooltips (only the first element is used) that are shown when the axis is clicked on.null
tooltipsEventThis is the event that triggers the tooltips. It can be either click or mousemove.click
tooltipsEffectThe effect used for showing tooltips. Can be either fade or none.fade
tooltipsCssClassThis is the name of the CSS class the chart uses.RGraph_tooltip
tooltipsOverrideIf 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
tooltipsNohideonclearNot 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 the tooltip DOES NOT get hidden.false
tooltipsFormattedPointWhen using formatted tooltip strings this is used as the point when using the %{value_formatted} option..
tooltipsFormattedThousandWhen using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.,
tooltipsFormattedDecimalsWhen using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option.0
tooltipsFormattedUnitsPreWhen using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.(an empty string)
tooltipsFormattedUnitsPostWhen using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.(an empty string)
tooltipsCssIf you want to specify some CSS that gets applied to all of the tooltips, but don't want to use the RGraph.tooltips.style object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-object CSS for the tooltips. These are CSS styles that get applied to all of the tooltips for the specific object only. It should look like this:
tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}
null
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 click or mousemove.
Default: click

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 the tooltip DOES NOT get hidden.
Default: false

tooltipsFormattedPoint
When using formatted tooltip strings this is used as the point when using the %{value_formatted} option.
Default: .

tooltipsFormattedThousand
When using formatted tooltip strings this is used as the thousand separator when using the %{value_formatted} option.
Default: ,

tooltipsFormattedDecimals
When using formatted tooltip strings this specifies the number of decimals when using the %{value_formatted} option.
Default: 0

tooltipsFormattedUnitsPre
When using formatted tooltip strings these units are prepended to the number when using the %{value_formatted} option.
Default: (an empty string)

tooltipsFormattedUnitsPost
When using formatted tooltip strings these units are appended to the number when using the %{value_formatted} option.
Default: (an empty string)

tooltipsCss
If you want to specify some CSS that gets applied to all of the tooltips, but don't want to use the RGraph.tooltips.style object (which gets applied to all of the tooltips on the page for every chart) you can use this property to give some per-object CSS for the tooltips. These are CSS styles that get applied to all of the tooltips for the specific object only. It should look like this:
tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}

Default: null

Miscellaneous properties

PropertyDescriptionDefault
highlightStyleBy 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.null
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. It's passed the shape object as an argument.
Default: null

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 Y axis object 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 of the Y axis.
y The Y coordinate of the Y axis.
width The width of the Y axis (this includes the label area)(.
height The height of the Y axis.
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 Y 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>
    yaxis.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 Background 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.YAxis({
    id: 'cvs',
    x: 25,
}).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.

There's more documentation about events available here: Summary of events documentation

<script>
    yaxis = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 25,
        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>