JQPlot not rendering with labels

Question

I am rendering some script to create a graph using jqplot, and the script on the page ends up like this:

 <script>
     $.jqplot('chartdiv', [[['13/11/2013', 38.25],['14/11/2013', -11.70],['15/11/2013', 5930.15],['16/11/2013', 4139.13],['17/11/2013', 207.92],['18/11/2013', -103.53],['19/11/2013', 635.81],['20/11/2013', 559.16],['21/11/2013', 253.53],['22/11/2013', 183.53],['23/11/2013', 183.53],['24/11/2013', 183.53],['25/11/2013', 54.62],['26/11/2013', 67.62],['27/11/2013', 67.62],['28/11/2013', 47.62],['29/11/2013', -32.38],['30/11/2013', -32.38],['1/12/2013', -32.38],['2/12/2013', -82.33],['3/12/2013', 364.07],['4/12/2013', 254.45],['5/12/2013', 186.95],['6/12/2013', 114.05],['7/12/2013', 57.05],['8/12/2013', 53.36],['9/12/2013', 50.51],['10/12/2013', 30.51],['11/12/2013', 30.51],['12/12/2013', -86.43],['13/12/2013', 5922.89],['14/12/2013', 5720.82],['15/12/2013', 5468.87],['16/12/2013', 4742.57],['17/12/2013', 896.11],['18/12/2013', 680.69],['19/12/2013', 425.07],['20/12/2013', 323.07],['21/12/2013', 228.42],['22/12/2013', 113.42],['23/12/2013', -20.82],['24/12/2013', -20.82],['25/12/2013', -20.82],['26/12/2013', -47.82],['27/12/2013', -47.82],['28/12/2013', -47.82],['29/12/2013', -47.82],['30/12/2013', -59.30],['31/12/2013', 1004.02],['1/01/2014', 767.00],['2/01/2014', 663.15],['3/01/2014', 302.16],['4/01/2014', 231.66],['5/01/2014', 223.16],['6/01/2014', 12.60],['7/01/2014', -27.40],['8/01/2014', -27.40],['9/01/2014', -27.40],['10/01/2014', -27.40],['11/01/2014', -27.40],['12/01/2014', -27.40],['13/01/2014', -39.60],['14/01/2014', 803.29],['15/01/2014', 6709.11],['16/01/2014', 4968.20],['17/01/2014', 1381.55],['18/01/2014', 296.86],['19/01/2014', 285.61],['20/01/2014', 161.77],['21/01/2014', 47.80],['22/01/2014', 70.90],['23/01/2014', 56.30]]], {
     title: 'Your financial control',
     axes: { yaxis: { renderer: $.jqplot.LogAxisRenderer } },
     series: [{
         lineWidth: 1,
         color: '#5FAB78',
         showMarker: false
     }] });</script>

This renders a blank graph - no line. However, the Y axis shows the totals, but the x axis is blank.

However, if I render it with JUST the value - it works:

    $.jqplot('chartdiv', [[38.25,-11.70,5930.15,4139.13,207.92,-103.53,635.81,559.16,253.53,183.53,183.53,183.53,54.62,67.62,67.62,47.62,-32.38,-32.38,-32.38,-82.33,364.07,254.45,186.95,114.05,57.05,53.36,50.51,30.51,30.51,-86.43,5922.89,5720.82,5468.87,4742.57,896.11,680.69,425.07,323.07,228.42,113.42,-20.82,-20.82,-20.82,-47.82,-47.82,-47.82,-47.82,-59.30,1004.02,767.00,663.15,302.16,231.66,223.16,12.60,-27.40,-27.40,-27.40,-27.40,-27.40,-27.40,-39.60,803.29,6709.11,4968.20,1381.55,296.86,285.61,161.77,47.80,70.90,56.30]],
{
    title: 'Your financial control',
    axes: { yaxis: { renderer: $.jqplot.LogAxisRenderer } },
    series: [{
        lineWidth: 1,
        color: '#5FAB78',
        showMarker: false
    }]
});

I'm trying to follow the example provided on their page - but it seems as soon as I add the labels to the data - it doesn't work. Can you spy an issue?

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

Answer 1

You need to specify xaxis date renderer

xaxis: {
          renderer: $.jqplot.DateAxisRenderer
        }

Your date format also needs to be changed if you use default renderer. as shown in example, date format is mm/dd/yyyy and the one in your code its dd/mm/yyyy -

Change the input date format, it should come up fine - ['11/13/2013', 38.25],['11/14/2013', -11.70],....

There might be some util in jqplot itself to accept the other date format.

Edit - Here is the option to accept other date format - http://www.jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html

you will need to set tickOptions.formatString = ‘%Y-%m-%d’