The drawing API Y axis object

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>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,5,3,2,2,5],
        options: {
            hmargin: 5,
            axes: false,
            yaxisLabels: false,
            marginLeft: 150,
            marginTop: 35,
            colors: ['black','red','green'],
            tooltips: ['James','Jenna','Karl','Olga','Mark','Pete','Louise','Jack'],
            linewidth: 3,
            spline: true,
            shadow: false,
            tickmarksStyle: null,
            key: ['Widgets sold','Mean temperature','Rainfall'],
            keyPosition: 'margin'
        }
    }).draw();


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


    var line3 = new RGraph.Line({
        id: 'cvs',
        data: [12,13,15,16,18,13,15,12],
        options: {
            hmargin: 5,
            axes: false,
            yaxisLabels: false,
            xaxisLabels: ['Mar','Apr','May','Jun','Jul','Aug','Sep','Oct'],
            marginLeft: 150,
            marginTop: 35,
            colors: ['green'],
            tooltips: ['James','Jenna','Karl','Olga','Mark','Pete','Louise','Jack'],
            linewidth: 3,
            spline: true,
            backgroundGrid: false,
            shadow: false,
            tickmarksStyle: null
        }
    }).draw();
    
    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: line.marginLeft,
        options: {
            marginTop: 35,
            yaxisScaleMax: line.scale2.max,
            colors: ['black']
        }
    }).draw();

    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: line.marginLeft * (2/3),
        options: {
            marginTop: 35,
            yaxisScaleMax: line2.scale2.max,
            colors: ['red']
        }
    }).draw();
    
    new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: line.marginLeft / 3,
        options: {
            marginTop: 35,
            yaxisScaleMax: line3.scale2.max,
            tooltips: ['Rainfall measured by the MET office'],
            colors: ['green'],
            yaxisLabelsCount: 10
        }
    }).draw();
</script>

Properties

Color properties

PropertyDescriptionDefault
colorsAn array of colors. Event though it's an array only the first color is used.['black']

X axis properties

PropertyDescriptionDefault
xaxisPositionThis can facilitate when you have a X axis in the center (eg the Bar chart).bottom

Y axis properties

PropertyDescriptionDefault
yaxisThis option can be specified if you don't want an axis drawn (the labels are still drawn).false
yaxisTickmarksCountThe number of tickmarks shown on the axis. You may need to +/- 1 to get alignment with grids.null
yaxisAlignThe alignment of the tickmarks and labels. This can be left or right.left
yaxisTickmarksEndTopThis option can be used to prevent the top end tickmark from being drawn.false
yaxisTickmarksEndBottomThis option can be used to prevent the bottom end tickmark from being drawn.false
yaxisLabelsCountThis determines how many labels are shown by default.5
yaxisLabelsSpecificInstead of having a scale you can instead have specific labels (eg low/medium/high)null
yaxisScaleDecimalsThe number of decimals shown.0
yaxisScaleInvertWhether the scale is inverted (ie minimum value at the top)false
yaxisScaleZerostartThis determines whether zero is shown.true
yaxisScaleVisibleThis determines whether the scale is drawn. This value is not checked if you choose to use labels instead.true
yaxisScaleUnitsPreThe units for the scale. This is prepended to the number.An empty string
yaxisScaleUnitsPostThe units for the scale. This is appended to the number.An empty string
yaxisScaleMaxThe maximum value of the scale.null
yaxisScaleMinThe minimum value of the scale.0

Title properties

PropertyDescriptionDefault
titleThe title for the axis.An empty string
titleColorThe color of the title. If not specified then it's the same as chart.colors.null

Margin properties

PropertyDescriptionDefault
marginTopThe top margin of the axis. This can be the same or different to the chart.25
marginBottomThe bottom margin of the axis. This can be the same or different to the chart.25

Other label properties

PropertyDescriptionDefault
textColorThis determines the color of the text labels. If not given it is the same as chart.colors.black
textFontThis determines the font used to render the textArial
textSizeThis determines the size that the text is rendered in.10

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 onclick or onmousemove.onclick
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 pagenull
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 tooltip DO NOT get hidden.false

Event properties

PropertyDescriptionDefault
eventsClickIf you want to add your own onclick function you can do so by assigning it to this property. See here for details.null
eventsMousemoveIf you want to add your own onmousemove function you can do so by assigning it to this property. See here for details.null

Miscellaneous properties

PropertyDescriptionDefault
linewidthThe linewidth used to draw the axis.1
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. Its passed the shape object as an argument.null