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.

• Properties
• Methods
• Custom RGraph events that are available

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

Margin properties

X axis properties

function myFormatter (obj, number)
{
    // Return the formatted number
    return number;
}

xaxis.set('xaxisScaleFormatter', myFormatter)

function myFormatter (obj, number)
{
    // Return the formatted number
    return number;
}

xaxis.set('xaxisScaleFormatter', myFormatter)

Y axis properties

Other label properties

Interactive features properties

Miscellaneous properties

Methods

<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>

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();

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>