Dojox charting: How to create duplicate axis on top and bottom?

Question

Here is a simple Bar chart using Dojox Charting:

http://jsfiddle.net/y3QQZ/7/

Notice at the bottom of the chart, there is an axis with the digits 0 through 3. I would like to repeat that same axis on the top of the chart. How can I create that top axis?

Here is the code:

var data = [1, 2, 3];

require(
[
    'dojox/charting/Chart',
    'dojox/charting/axis2d/Default',
    'dojox/charting/plot2d/Bars',
    'dojox/charting/themes/Claro',
    'dojo/domReady!'], function (Chart, Default, Bar, theme) {
    var chart = new Chart('chart');
    chart.setTheme(theme);
    chart.addPlot('default', {
        type: Bar,
        gap: 5
    });
    chart.addAxis('x', {
        labels: [{
            value: 1,
            text: 'One'
        }, {
            value: 2,
            text: 'Two'
        }, {
            value: 3,
            text: 'Three'
        }],
        vertical: true,
        minorTicks: true,
        majorTick: {
            length: 5
        },
        minorTick: {
            length: 5
        }
    });
    chart.addAxis('y', {
        min: 0,
        minorTicks: true,
        majorTick: {
            length: 5
        },
        minorTick: {
            length: 5
        }
    });
    chart.addSeries('Bar', data);
    chart.render();
});

Answer 1

I think you might have mixed up your x and y axes but the way to do this is by adding another plot. If I remember correctly in Dojo, each plot can only have one hAxis (horizontal) and one vAxis (vertical). A sort of hacky way to do this is by doing the following:

Add another axis with property leftBottom set to false:

chart.addAxis('y2', {
    min: 0,
    minorTicks: true,
    leftBottom: false,
    majorTick: {
        length: 5
    },
    minorTick: {
        length: 5
    }
});

Note that I'm just calling it y2 because your original x axis is called 'y'. Then I would modify your original plot and add another plot so that there are two references to horizontal axes.

chart.addPlot('default', {
    type: Bar,
    gap: 5,
    hAxis: 'y',
    vAxis: 'x'
});
    chart.addPlot('default2', {
    type: Bar,
    gap: 5,
    hAxis: 'y2',
    vAxis: 'x'
});

Then finally adding two Series:

chart.addSeries('Bar', data);
chart.addSeries('Bar2', data, {plot: "default2"});

I took your fiddle and modified it to make it work here: http://jsfiddle.net/U7tmT/

This does seem a little hacky though so another suggestion would be that if you could figure out the axis min and max ahead of time for your horizontal axis, then you don't need the duplicate series, just the extra plot. An example is here: http://jsfiddle.net/U95cA/