CODEWITHSUNDEEP
jqueryjquery-pluginsjqplot
jwien001
jwien001

Reputation: 169

jqPlot Bar Graph Not Rendering Correctly

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:

Correct grpah

Instead, I get this:

What I'm seeing

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?

Upvotes: 0

Views: 2477

Answers (3)

vaio
vaio

Reputation: 101

My problem was that the references to jqPlot scripts were placed inside of the head-block. After replacing them to the body-block the problem was solved.

Upvotes: 0

Dizzyspiral
Dizzyspiral

Reputation: 765

Another reason this might happen is if you add the scripts to your HTML file in the wrong order. Note that the jquery has to be included first, then jqplot, and finally any plugins.

<script type="text/javascript" src="jqplot/jquery.min.js"></script>
<script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>

<script type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script>

Upvotes: 0

Kenny
Kenny

Reputation: 66

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)

Upvotes: 5

Related Questions