Line chart with quarters - v2.

Much better solution where we set the graph's ticks directly.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.cursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<div id="chart"></div>

CSS

#chart {
  width: 100%;
  height: 100%;
}

//jquery.jqplot.css

/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/

.jqplot-target {
  position: relative;
  color: #666666;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1em;
  /*    height: 300px;
    width: 400px;*/
}


/*rules applied to all axes*/

.jqplot-axis {
  font-size: 0.75em;
}

.jqplot-xaxis {
  margin-top: 10px;
}

.jqplot-x2axis {
  margin-bottom: 10px;
}

.jqplot-yaxis {
  margin-right: 10px;
}

.jqplot-y2axis,
.jqplot-y3axis,
.jqplot-y4axis,
.jqplot-y5axis,
.jqplot-y6axis,
.jqplot-y7axis,
.jqplot-y8axis,
.jqplot-y9axis,
.jqplot-yMidAxis {
  margin-left: 10px;
  margin-right: 10px;
}


/*rules applied to all axis tick divs*/

.jqplot-axis-tick,
.jqplot-xaxis-tick,
.jqplot-yaxis-tick,
.jqplot-x2axis-tick,
.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick,
.jqplot-yMidAxis-tick {
  position: absolute;
  white-space: pre;
}

.jqplot-xaxis-tick {
  top: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-top: 10px;*/
  vertical-align: top;
}

.jqplot-x2axis-tick {
  bottom: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-bottom: 10px;*/
  vertical-align: bottom;
}

.jqplot-yaxis-tick {
  right: 0px;
  /* initial position untill tick is drawn in proper place */
  top: 15px;
  /*    padding-right: 10px;*/
  text-align: right;
}

.jqplot-yaxis-tick.jqplot-breakTick {
  right: -20px;
  margin-right: 0px;
  padding: 1px 5px 1px 5px;
  /*    background-color: white;*/
  z-index: 2;
  font-size: 1.5em;
}

.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick {
  left: 0px;
  /* initial position untill tick is...

JavaScript

$(document).ready(function() {
  // $.jqplot.config.enablePlugins = true;
  var chLines = [
    [
      [new Date('09/30/2010 00:00:00'), 24.13],
      [new Date('12/31/2010 00:00:00'), 28.26],
      [new Date('03/31/2011 00:00:00'), 24.00],
      [new Date('06/30/2011 00:00:00'), 25.35],
      [new Date('09/30/2011 00:00:00'), 26.26],
      [new Date('12/31/2011 00:00:00'), 29.71]
    ]
  ];
  var chSeries = [{
    color: '#436277',
    label: 'label'
  }];
  var mnth;
  var quarter;
  $.jqplot.DateTickFormatter = function(format, val) {
    if (!format) {
      format = '%Y/%m/%d';
    }
    if (format == '%Q') {
      mnth = $.jsDate.strftime(val, '%#m');
      quarter = parseInt((mnth - 1) / 3) + 1;
      return $.jsDate.strftime(val, '%Y') + 'Q' + quarter;
    }
    return $.jsDate.strftime(val, format);
  };
  var plot = $.jqplot('chart', chLines, {
    axes: {
      xaxis: {
        //    tickInterval: "3 months",
        renderer: $.jqplot.DateAxisRenderer,
        borderColor: 'black',
        borderWidth: 0.5,
        pad: 8,
        tickOptions: {
          showGridline: false,
          formatString: '%Q',
          textColor: 'black',
          fontSize: '11px'
        },
        ticks: [new Date('09/30/2010 00:00:00'),
            new Date('12/31/2010 00:00:00'),
            new Date('03/31/2011 00:00:00'),
            new Date('06/30/2011 00:00:00'),
            new Date('09/30/2011 00:00:00'),
            new Date('12/31/2011 00:00:00')
          ] //,
          //    min: chLines[0][0][0],
          //    max: new Date('12/31/2011 00:00:00')
      },
      yaxis: {
        min: 0,
        tickOptions: {
          formatString: '%.2f',
          textColor: 'black',
          fontSize: '11px'
        }
      }
    },
    cursor: {
      show: true
    },
    highlighter: {
      show: true,
    },
    seriesDefaults: {
      lineWidth: 3
    },
    series: chSeries,
    legend: {
      show: true,
      location: 'sw',
      //compass direction,...