jqplot dates rendering, show only Sundays on x axis

Question

I'm trying to make an advanced rendering view where will show on x axis only month Sundays, I had already manage to have proper week colors, which means that each month week have different color and I'm using ractangle for it, so far it looks good, problem is with x-axis can't make to show only Sundays

xaxis: {
   renderer:$.jqplot.DateAxisRenderer,
   min: dFrom,
   max:   dTo,
   tics: ytics,
   numberTicks:yticcount,
   tickOptions:{
        showGridline: false,
        formatString:"%#d"
       }
 }

where dFrom is '2014-1-1' dTo is '2014-1-31', yticcount is just count of Sundays per month (for January 2014 it's 4) and ytics are:

[["2014-1-1", ""], ["2014-1-2", ""], ["2014-1-3", ""], ["2014-1-4", ""], ["2014-1-5", "2014-1-5"], ["2014-1-6", ""], ["2014-1-7", ""], ["2014-1-8", ""], ["2014-1-9", ""], ["2014-1-10", ""], ["2014-1-11", ""], ["2014-1-12", "2014-1-12"], ["2014-1-13", ""], ["2014-1-14", ""], ["2014-1-15", ""], ["2014-1-16", ""], ["2014-1-17", ""], ["2014-1-18", ""], ["2014-1-19", "2014-1-19"], ["2014-1-20", ""], ["2014-1-21", ""], ["2014-1-22", ""], ["2014-1-23", ""], ["2014-1-24", ""], ["2014-1-25", ""], ["2014-1-26", "2014-1-26"], ["2014-1-27", ""], ["2014-1-28", ""], ["2014-1-29", ""], ["2014-1-30", ""], ["2014-1-31", ""]]

as you can see it's contains empty string or date for second parameter if exact date is Sunday.

Problem is in fact that jqplot always include/show start and last record, I would like to start from first Sunday, and to show tics only on Sundays, second issue is that jqplot ignore ticks options.

Answer 1

For that purpose you actually don need the DateAxisRenderer, you can use LinearAxisRenderer and provide your formatted ticks (data should be converted to timestamps). Another option is to use the formatter in conjunction with tics but this is more simpler:

function getDaysInMonthTicks(month, year) {
    var date = new Date(year, month, 1);
    var days = [];
    var tstamp;
   while (date.getMonth() === month) {
        tstamp = date.getTime();
        if (date.getDay() == 0) {
            days.push([tstamp,$.jsDate.strftime(tstamp, '%Y/%m/%d')]);
        } else {
            days.push([tstamp]);
        }
        date.setDate(date.getDate() + 1);
    }
    return days;
}
function parseDate(input) {
    var parts = input.split('-');
    return new Date(parts[0], parts[1]-1, parts[2]).getTime(); // months are 0-based
}

$(document).ready(function () {

    var bars = [
        [parseDate('2014-01-5'), 21],
        [parseDate('2014-01-10'), 21],
        [parseDate('2014-01-12'), 22],
        [parseDate('2014-01-15'), 21],
        [parseDate('2014-01-19'), 22],
        [parseDate('2014-01-26'), 18]
    ];

    var plot1 = $.jqplot('chart1', [bars], {
        title: 'Default Date Axis',
        axes: {
            xaxis: {
                renderer:$.jqplot.LinearAxisRenderer,
                min:parseDate("2014-1-1"),
                max:parseDate("2014-1-31"),
                ticks: getDaysInMonthTicks(0,2014)
            }
        },
        series: [{
            pointLabels: {
                show: true,
                stackedValue: true
            },
            color: "#00749F",
            label: "peer expenses" 
        }],
        legend: {
            show: true,
            location: 'e',
            placement: "outsideGrid"
        }
    });
});

JSFiddle link

Answer 2

Here is the solution: JsFiddle Link

Couple of things to keep in mind:

• Inside xaxis, please specify the min valus as the correct sunday and then even if you dont supply max value it will still work. it will decide the max point based on the data you provide. In the below example, just try to comment out the max property and then run the program. you will see what i am talking about.

• If you are specifying tickInterval, then you dont have to specify numberTicks. you can control the number of ticks by giving a max value.

  $(document).ready(function (){

      var bars = [
          ['2014-01-5', 21],
          ['2014-01-10', 21],
          ['2014-01-12', 22],
          ['2014-01-15', 21],
          ['2014-01-19', 22],
          ['2014-01-26', 18]
      ];
  
      var plot1 = $.jqplot('chart1', [bars], {
          title: 'Default Date Axis',
          axes: {
              xaxis: {
                  renderer:$.jqplot.DateAxisRenderer,
                  tickInterval:"7 day",
                  min:"2014-1-5",
                  max:"2014-1-26"
              }
          },
          series: [{
              pointLabels: {
                  show: true,
                  stackedValue: true
              },
              color: "#00749F",
              label: "peer expenses" 
          }],
          legend: {
              show: true,
              location: 'e',
              placement: "outsideGrid"
          }
      });
  });