Auto increase height in jqplot pyramid graph

Question

I am using jqplot pyramid graph with yMidAxis. I am having trouble with the height of the graph.

I have two classes showing the difference on left and right. I initially had problems because the defaultHeight is set 300 in jquery.jqplot.js and I want to keep it that way. If the number of ticks on y axis exceeds above 18 then some of the ticks are not visible but the bars on left and right are. So, in jqplot.pyramidAxisRenderer.js I commented out maxVisibleTicks and hence all the ticks are now showing.

But my problem is that if the number of ticks increases they overlap on each other.

Is there a way of auto increasing the default height when the number of ticks increase and similarly decreasing the height of the graph on less number of ticks?

Also the x-axis values are auto scaled. I have scaling between 0.0 to 1.4 (interval of 0.2). Hence since one of the value is 1.0 or close to it a higher than 1.0 value is shown in the grid xaxis. How can I limit it to 1.0 always, regardless of what the value is between 0.0 and 1.0? I tried using "max" option with xaxis but it doesn't work.

I tried to add an image which would have been a better help in understanding the problem but unfortunately it doesn't allow me to do so because of reputation numbers.

Any guidance would be appreciated. Please find what I have currently below in my code:

$(document).ready(function(){
    var ticks = ["Aaa", "Bbb", "Ccc", "Ddd", "Eee", "Fff", "Ggg", "Hhh", "Iii", "Jjj", "Kkk", "Lll", "Mmm", "Nnn", "Ooo", "Ppp", "Qqq", "Rrr", "Sss", "Ttt", "Uuu", "Vvv"];
    var class1 = [0.666, 0.670, 0.582, 0.631, 0.582, 0.582, 0.504, 0.622, 0.631, 0.701, 0.671, 0.539, 0.343, 0.649, 0.686, 0.550, 0.000, 0.729, 0.617, 0.275, 0.681, 0.451];
    var class2 = [0.763, 0.653, 1.000, 0.811, 0.890, 0.890, 0.788, 0.784, 0.832, 0.723, 0.516, 0.842, 0.640, 0.643, 0.817, 0.816, 0.723, 0.884, 0.793, 0.846, 0.693, 0.630];

    var Colors = ["#526D2C", "#FF0000"];
    var plotOptions = {
        title: '<div style="float: left; width: 50% ; text-align:center; color: black;">NLF</div><div style="float: right; width: 50%; text-align:center; color: black;">NLM</div><br><br>',
        seriesColors: Colors,
        grid: {
            drawBorder: false,
            shadow: false,
            background: "white"

        },
        defaultAxisStart: 0,
        seriesDefaults: {
            renderer: $.jqplot.PyramidRenderer,
            rendererOptions: {
                barPadding: 4
            },
            yaxis: "yMidAxis",
            xaxis: "xaxis",
            shadow: true
        },
        series: [
            {
                rendererOptions:{
                    side: 'left',
                    synchronizeHighlight: 1
                }
            }
        ],
        axes: {

            xaxis: {
                max: 1                  
            },
            yMidAxis: {
                label: '<div style="float: left; text-align:center; color: black;">Differentiating Taxon</div>',
                tickOptions: {
                },
                ticks: ticks,
                rendererOptions: {
                    category: true,
                    baselineWidth: 2
                },
                numberTicks: 22,
                showTicks: true
            }
        }
    };

    plot1 = $.jqplot("chart1", [class1, class2], plotOptions);  
});

Hemang Hemang · Accepted Answer · 2014-09-01T07:22:09

I have solved both the issues myself and have achieved the desired functionality.

Just sharing my method to achieve this, maybe it'll be helpful to someone.

For the automatic height increase with the number of ticks, I counted the number of ticks in the file while uploading to create the graph, and based on each tick I increased the height by using the height parameter in the plotOptions.
For the issue with hard-scaling the x-axis, I set 'this.pad = 0;' in jquery.jqplot.js file. If set to 0 it will default axis padding to 1.0

Auto increase height in jqplot pyramid graph

1 Answers