CODEWITHSUNDEEP
jqplot
Mika Saarinen
Mika Saarinen

Reputation: 43

JQPlot shows only bar chart but doesn't draw line

I have a problem with JQPlot, I have managed to display bars in my chart but for some reason the lines are not drawn.

You can see the code on JSFiddle (didn't work on Internet Explorer): http://jsfiddle.net/gkp2N/

If I change "seriesDefaults" to "series" it show two lines but doesn't draw the bar. I have spent two hours figuring this out so hopefully someone can help me, thanks!

Here is the JS code:

var s1 = [
    ['2013-02-04 4:00PM', 11],
    ['2013-02-05 4:00PM', 11],
    ['2013-02-06 4:00PM', 15],
    ['2013-02-07 4:00PM', 12],
    ['2013-02-08 4:00PM', 16],
    ['2013-02-09 4:00PM', 7],
    ['2013-02-10 4:00PM', 9],
    ['2013-02-11 4:00PM', 6],
    ['2013-02-12 4:00PM', 13],
    ['2013-02-13 4:00PM', 12],
    ['2013-02-14 4:00PM', 6],
    ['2013-02-15 4:00PM', 13],
    ['2013-02-16 4:00PM', 3],
    ['2013-02-17 4:00PM', 9],
    ['2013-02-18 4:00PM', 18],
    ['2013-02-19 4:00PM', 18],
    ['2013-02-20 4:00PM', 12],
    ['2013-02-21 4:00PM', 14],
    ['2013-02-22 4:00PM', 7],
    ['2013-02-23 4:00PM', 5],
    ['2013-02-24 4:00PM', 3],
    ['2013-02-25 4:00PM', 9],
    ['2013-02-26 4:00PM', 15],
    ['2013-02-27 4:00PM', 14],
    ['2013-02-28 4:00PM', 4],
    ['2013-03-01 4:00PM', 0],
    ['2013-03-02 4:00PM', 0],
    ['2013-03-03 4:00PM', 0],
    ['2013-03-04 4:00PM', 0],
    ['2013-03-05 4:00PM', 0]
];



var s2 = [
    ['2013-02-04 4:00PM', 55],
    ['2013-02-05 4:00PM', 55],
    ['2013-02-06 4:00PM', 75],
    ['2013-02-07 4:00PM', 60],
    ['2013-02-08 4:00PM', 80],
    ['2013-02-09 4:00PM', 35],
    ['2013-02-10 4:00PM', 45],
    ['2013-02-11 4:00PM', 30],
    ['2013-02-12 4:00PM', 65],
    ['2013-02-13 4:00PM', 60],
    ['2013-02-14 4:00PM', 30],
    ['2013-02-15 4:00PM', 65],
    ['2013-02-16 4:00PM', 15],
    ['2013-02-17 4:00PM', 45],
    ['2013-02-18 4:00PM', 90],
    ['2013-02-19 4:00PM', 90],
    ['2013-02-20 4:00PM', 60],
    ['2013-02-21 4:00PM', 70],
    ['2013-02-22 4:00PM', 35],
    ['2013-02-23 4:00PM', 25],
    ['2013-02-24 4:00PM', 15],
    ['2013-02-25 4:00PM', 45],
    ['2013-02-26 4:00PM', 75],
    ['2013-02-27 4:00PM', 70],
    ['2013-02-28 4:00PM', 20],
    ['2013-03-01 4:00PM', 0],
    ['2013-03-02 4:00PM', 0],
    ['2013-03-03 4:00PM', 0],
    ['2013-03-04 4:00PM', 0],
    ['2013-03-05 4:00PM', 0]
];
var plot = $.jqplot('placeholder', [s1, s2], {

    // Turns on animatino for all series in this plot.
    animate: true,
    // Will animate plot on calls to plot1.replot({resetAxes:true})
    animateReplot: true,
    cursor: {
        show: true,
        zoom: true,
        looseZoom: true,
        showTooltip: false
    },

    seriesColors: ["#eee", "#ccc"],
    highlighter: {
        show: true,
        showLabel: true,
        tooltipAxes: 'y',
        sizeAdjust: 7.5,
        tooltipLocation: 'ne'
    },

    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        xaxis: 'xaxis',
        yaxis: 'yaxis',
        rendererOptions: {
            // Speed up the animation a little bit.
            // This is a number of milliseconds.  
            // Default for bar series is 3000.  
            animation: {
                speed: 2500
            },
            barWidth: 15,
            barPadding: -15,
            barMargin: 0,
            highlightMouseOver: false

        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: 30
        },
        showTicks: false
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickInterval: '1 day'

        },
        x2axis: {
            renderer: $.jqplot.DateAxisRenderer
        }

    }


});

Upvotes: 0

Views: 872

Answers (1)

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

Don't forget to include the needed plugins (barRenderer) :

<script class="include" src=" http://www.jqplot.com/deploy/dist/plugins/jqplot.barRenderer.min.js"></script>

Edit

Working example on Fiddle

Upvotes: 1

Related Questions