jqPlot Examples Baseline

This particular fiddle is setup so that basic jqPlot examples can be created. It's, at this point, a generic template setup in a state that will allow a simple fork to get you up and running faster.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<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.ohlcRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>

<button id="min">Get Min X Value</button>
<button id="max">Get Max X Value</button>

JavaScript

var plot1;
var ohlc = [
  ['06/15/2009 16:00:00', 136, 140, 134, 138],
  ['05/18/2009 16:00:00', 123, 129, 121, 122]
];
$(document).ready(function(){ 
    $('#min').click(function() {
        // Minimum from dataset
        alert('Min data: ' + plot1.axes.xaxis._dataBounds.min);
        alert('Min data: ' + new Date(plot1.axes.xaxis._dataBounds.min));
        
        // Minimum tick
        alert('Min tick: ' + plot1.axes.xaxis.min);
        alert('Min tick: ' + new Date(plot1.axes.xaxis.min));
    });
    
    $('#max').click(function() {
        // Maximum from dataset
        alert('Max data: ' + plot1.axes.xaxis._dataBounds.max);
        alert('Max data: ' + new Date(plot1.axes.xaxis._dataBounds.max));
        
        // Maximum tick
        alert('Max tick: ' + plot1.axes.xaxis.max);
        alert('Max tick: ' + new Date(plot1.axes.xaxis.max));
    });
    
  // Note, the ohlc data is specified below     
  plot1 = $.jqplot('chart1',[ohlc],{
    // use the y2 axis on the right of the plot 
    //rather than the y axis on the left.
    seriesDefaults:{yaxis:'y2axis'},
    axes: {
      xaxis: {
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions:{formatString:'%b %e'}, 
        // For date axes, we can specify ticks options as human 
        // readable dates.  You should be as specific as possible, 
        // however, and include a date and time since some 
        // browser treat dates without a time as UTC and some 
        // treat dates without time as local time.
        // Generally, if  a time is specified without a time zone,
        // the browser assumes the time zone of the client.
        min: "05-01-2009 16:00",
        max: "06-22-2009 16:00",
        tickInterval: "6 weeks",
      },
      y2axis: {
        tickOptions:{formatString:'$%d'}
      }
    },
    series: [{renderer:$.jqplot.OHLCRenderer}],
    highlighter: {
      show: true,
      showMarker:false,
      tooltipAxes: 'xy',
      yvalues: 4,
      // You can...