Format date axis depending on zoom.

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>
<button class="button-reset">Reset</button>
<div id="chart1">


</div>

CSS

//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 drawn in proper place */
  top: 15px;
  /*...

JavaScript

$(document).ready(function() {
  var goog = [
    ["6/22/2009 16:00:00", 425.32],
    ["6/8/2009 16:00:00", 424.84],
    ["5/26/2009 16:00:00", 417.23],
    ["5/11/2009 16:00:00", 390],
    ["4/27/2009 16:00:00", 393.69],
    ["4/13/2009 16:00:00", 392.24],
    ["3/30/2009 16:00:00", 369.78],
    ["3/16/2009 16:00:00", 330.16],
    ["3/2/2009 16:00:00", 308.57],
    ["2/17/2009 16:00:00", 346.45],
    ["2/2/2009 16:00:00", 371.28],
    ["1/20/2009 16:00:00", 324.7],
    ["1/5/2009 16:00:00", 315.07],
    ["12/22/2008 16:00:00", 300.36],
    ["12/8/2008 16:00:00", 315.76],
    ["11/24/2008 16:00:00", 292.96],
    ["11/10/2008 16:00:00", 310.02],
    ["10/27/2008 16:00:00", 359.36],
    ["10/13/2008 16:00:00", 372.54],
    ["9/29/2008 16:00:00", 386.91],
    ["9/15/2008 16:00:00", 449.15],
    ["9/2/2008 16:00:00", 444.25],
    ["8/25/2008 16:00:00", 463.29],
    ["8/11/2008 16:00:00", 510.15],
    ["7/28/2008 16:00:00", 467.86],
    ["7/14/2008 16:00:00", 481.32],
    ["6/30/2008 16:00:00", 537],
    ["6/16/2008 16:00:00", 546.43],
    ["6/2/2008 16:00:00", 567],
    ["5/19/2008 16:00:00", 544.62],
    ["5/5/2008 16:00:00", 573.2],
    ["4/21/2008 16:00:00", 544.06],
    ["4/7/2008 16:00:00", 457.45],
    ["3/24/2008 16:00:00", 438.08],
    ["3/10/2008 16:00:00", 437.92],
    ["2/25/2008 16:00:00", 471.18],
    ["2/11/2008 16:00:00", 529.64],
    ["1/28/2008 16:00:00", 515.9],
    ["1/14/2008 16:00:00", 600.25],
    ["12/31/2007 16:00:00", 657],
    ["12/17/2007 16:00:00", 696.69],
    ["12/3/2007 16:00:00", 714.87],
    ["11/19/2007 16:00:00", 676.7],
    ["11/5/2007 16:00:00", 663.97],
    ["10/22/2007 16:00:00", 674.6],
    ["10/8/2007 16:00:00", 637.39],
    ["9/24/2007 16:00:00", 567.27],
    ["9/10/2007 16:00:00", 528.75],
    ["8/27/2007 16:00:00", 515.25]
  ];


  //the method is taken from http://www.mcfedries.com/javascript/daysbetween.asp
  function days_between(date1, date2) {
    // The number of milliseconds in one day
    var ONE_DAY = 1000 * 60 *...