jqPlot date axis - bars drawn on wrong day?

Question

Pretty simple stuff here:

   var dataHits = [['2011-10-16',1],['2011-11-05',7],['2011-11-06',1],['2011-11-09',2],['2011-11-12',5]];
   var plot1 = $.jqplot('chartHits', [dataHits], {
      title:'Zobrazenia profilu spolu',
      seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {            
            barPadding: 0,      // number of pixels between adjacent bars in the same
                                // group (same category or bin).
            barMargin: 0,      // number of pixels between adjacent groups of bars.
            barDirection: 'vertical', // vertical or horizontal.
            barWidth: 10

        }                
            },
      axes:{
        xaxis:{                    
          renderer:$.jqplot.DateAxisRenderer,
          min: '2011-10-15',
          max: '2011-11-13',
          tickInterval: "2 day",
          tickOptions:{
            formatString:'%d.%m'
          }          
        },
        yaxis:
        {
          min: 0,
          tickInterval: 1
        }        
      },
      highlighter: {
        show: true,
        sizeAdjust: 7.5
      },
      cursor: {
        show: false
      }
   });

But generated graph is wrong - first value is drawn OK - on 16.10.2011, but all other values (bars) are positioned incorrectly - one day sooner than they should be (even their "tooltip" when highlighted is OK, they are just in wrong place on x-axis). Any idea how to fix this?

See picture :

Answer 1

I think that in general, when dealing with barcharts you should always use ticks to have a nicer plot. Also for your problem you obtain interesting results when using this approach, please see here. Here you would need to remember that if you care on showing nothing for the days that are not specified in the dataHits you would need to provide them as well just giving them value of 0.

Interesting results you obtain (hope this is what you want) when you use both ticks and dateAxisRenderer capabilities. This I show in the following sample. Here the gaps, showing time distance between the readings, are preserved and all values are correctly painted. Also important to notice the min, max and tickInterval have no effect since we use ticks.

BTW: If you still want to have some gaps around the chart you could apply the approach presented in EDIT of this answer.