jqPlot: Line Graph: Lines and Ticks are not displaying

Question

I am struggling with the creation of a jqPlot line graph, and am hoping someone can help. For some reason, my lines and ticks are not showing up, and I can't figure out why. I've copied the troublesome code, below.

Can anyone tell me what I'm doing wrong?

If there is anything else I can do to help illustrate or solve the problem, please let me know.

$(document).ready(function(){   

    var line1 = [['07-01-2014',0],['08-01-2014',87],['09-01-2014',0],['10-01-2014',0],['11-01-2014',0],['12-01-2014',0],['01-01-2015',0],['02-01-2015',71],['03-01-2015',0],['04-01-2015',83],['05-01-2015',0],['06-01-2015',82]]
    var line2 = [['07-01-2014',0],['08-01-2014',85],['09-01-2014',0],['10-01-2014',0],['11-01-2014',1],['12-01-2014',0],['01-01-2015',0],['02-01-2015',71],['03-01-2015',0],['04-01-2015',83],['05-01-2015',0],['06-01-2015',82]]
    var jqpData = [line1, line2];

    var xLabels = ['07-01-2014','08-01-2014','09-01-2014','10-01-2014','11-01-2014','12-01-2014','01-01-2015','02-01-2015','03-01-2015','04-01-2015','05-01-2015','06-01-2015'],
        lLables = ['Series 1','Series 2'];

    $(function () {
        var plot1 = $.jqplot('chart1', jqpData, {
            title: 'July through June',
            seriesDefaults:{

                rendererOptions: {smooth: true},
                label:' ',
                lineWidth: 2
            },
            axesDefaults: {
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer
            },
            legend:{
                show: true,
                location: 'sw',
                placement: 'outsideGrid',
                labels: lLables
            },
            axes: {
                xaxis: {
                    renderer:$.jqplot.DateAxisRenderer,
                    tickOptions:{
                        angle:-30,
                        fontFamily:'Trebuchet MS,Arial,Helvetica,sans-serif',
                        fontSize: '1em',
                        min:'07-01-2014', 
                        tickInterval:'1 month'
                    }
                },
                yaxis:{
                    label:'',
                    min:0,
                    max:96.9849
                }
            }
        });
    });
});

Answer 1

Try adding this as one of the options:

axes: {
    xaxis:{
        renderer: $.jqplot.CategoryAxisRenderer, //etc

More info here: Take a look at this link if you haven't already:

http://www.jqplot.com/docs/files/jqplot-axisTickRenderer-js.html

and then apply as shown here:

http://www.jqplot.com/tests/rotated-tick-labels.php