jqPlot- issue with displaying bar charts -axis padding and inter-bar distance

Question

I'm using the following piece of code to display a set of bar charts in jqPlot. However, I am getting 2 problems:

There is no padding on either side of the range values for the xaxis. The pad attribute seems to have no effect.
When the number of bars is large, the bars overlap on top of each other. The barPadding attribute seems to have no effect.

I looked at this link Having problems with jqPlot bar chart . The answer suggested there was to use a CategoryAxisRenderer. But since I'm using time-series data, I require the DateAxisRenderer.

Please help.

function plotBarGraph(data,myticks,series)
{
    $("#placeholder").empty();
    $.jqplot('placeholder',data,
            {
                //stackSeries:true,
                    seriesDefaults:{ 
                        renderer:$.jqplot.BarRenderer,
                        barMargin:1,
                        barPadding:0.5
                    },
                   axes:
                        {
                        xaxis:
                            {
                            ticks:myticks,
                            tickInterval:10,
                            renderer:$.jqplot.DateAxisRenderer,
                            pad:2.5,
                            tickOptions:
                                {
                                formatString:'%d-%m-%y'
                                }
                            }
                        },
                        legend:
                            {
                            show:true,
                            labels:series
                            }     
            });
}

Please build a working sample on http://jsfiddle.net so one can experiment on your data, and you could get your solution faster. — Boro, Jun 12 '12 at 10:14

score 1 · Accepted Answer · edited May 23 '17 at 12:10

In this case if you do not want to use the approach mentioned in the link, you might want to play with min/max values for your date axis.

I think you might also find useful the approach to a similar sort of problem with padding where I chose to set ticks on creation and hide the unwanted ones after the plot is drawn.

Before I can be of any further assistance please provide a sample presenting your problem.

score 0 · Answer 2 · edited Oct 05 '12 at 08:48

For your second problem, I ran into a similar issue. I set up a selection statement that widened the size of my chart depending on how many bars would be in it. I then made the parent div scrollable (called "dataHolder"), and that solved the problem.

        // set div properties depending on how many sets of data are in the 
        //array so the view is sized properly
        $("#chartDiv").html("").css("width", "750px"); // chartDiv's default settings
        $("#tabs-6").removeClass("dataHolder").css("width", "900px"); // parent Div's default settings
        if (dataArray.length > 10) {
            $("#chartDiv").css("width", "1600px");
            $("#tabs-6").addClass("dataHolder").css("width", "900px");
        } else if (dataArray.length > 6) {
            $("#chartDiv").css("width", "1200px");
            $("#tabs-6").addClass("dataHolder").css("width", "900px");
        }

score 0 · Answer 3 · answered Jun 19 '13 at 14:51

I found a solution to use Date data with CategoryAxisRenderer. You have to configure de xaxis like follows:

axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            rendererOptions: {
                tickRenderer: $.jqplot.DateTickRenderer,
                tickOptions: {
                    formatter: $.jqplot.DateTickFormatter,
                    formatString:'%d/%m'
                }
            }
        }
    }

I hope it helps! ;)

jqPlot- issue with displaying bar charts -axis padding and inter-bar distance

3 Answers3