Question

I’m trying to get started using jqPlot in my jQuery Mobile app, but I can’t seem to get one of the examples on the jqPlot site to work. My code:

var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var ticks = ['a', 'b', 'c', 'd'];

$.jqplot('chartdiv', [s1, s2], {
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        pointLabels: { show: true }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        }
    }
});

should produce this graph:

Instead, I get this:

Notice the x-axis labels all rendered on top of each other in the bottom-left corner. What could be causing the chart to render wrong?

Answer 1

I struggled with the same problem. After some testing I found out that I actually hadn’t included the category axis renderer plugin.

So if you still have the same trouble try including it. (plugins/jqplot.categoryAxisRenderer.min.js)