The plot(s) on this page use the following plugins:

<script type="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>

jqPlot supports Open Hi Low Close charts through the OHLCRenderer plugin. For best display, the x axis should use a "DateAxisRenderer". Data series should be supplied with all the necessary data in the data point arrays such as: [['07/06/2009', 138.7, 139.68, 135.18, 135.4], ['06/29/2009', 143.46, 144.66, 139.79, 140.02], ...].

The jqPlot highlighter plugin's tooltip works with the extra data in the OHLC series also. You can specify the number of y data values to display in the tooltip with the "yvalues" option of the highlighter plugin. The default is to display 1 y value (for simple [x,y] data). Set this to 4 to display the open, hi, low and close value.

plot1 = $.jqplot('chart1',[ohlc],{
  title: 'Apple Stock Price',
  series: [{renderer:$.jqplot.OHLCRenderer}],
  axesDefaults:{},
  axes: {
      xaxis: {
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%Y.%m'}
      },
      yaxis: {
          tickOptions:{formatString:'$%.2f'}
      }
  },
  highlighter: {
      showMarker: false,
      yvalues: 4
  }
});

Candlestick style charts can be created by setting the "candlestick" option to true. In addition, the highlighter tooltip can be customized to better display the data. Here, by setting the "formatString" option, a customized html table will display the open, high, low and close values. Also, the tooltip has been restricted to show only the y axis data by setting the "tooltipAxes" option to "y".

plot2 = $.jqplot('chart2',[ohlc],{
  title: 'Apple Stock Price',
  series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
  axesDefaults:{},
  axes: {
      xaxis: {
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%Y.%m'}
      },
      yaxis: {
          tickOptions:{formatString:'$%.2f'}
      }
  },
  highlighter: {
      showMarker:false,
      tooltipAxes: 'y',
      tooltipLocation: 'nw',
      yvalues: 4,
      formatString:'<table class="jqplot-highlighter">
  <tr><td>open:</td><td>%s</td></tr>
  <tr><td>hi:</td><td>%s</td></tr>
  <tr><td>low:</td><td>%s</td></tr>
  <tr><td>close:</td><td>%s</td></tr>
</table>'
  }
});

the OHLCREnderer can render a hi, low, close chart as well. If the plot data is passed in with only 3 y values instead of 4, it is assumed to be a HLC chart and not an OHLC chart.

plot3 = $.jqplot('chart3',[hlc],{
  title: 'Apple Stock Price',
  series: [{renderer:$.jqplot.OHLCRenderer}],
  axesDefaults:{},
  axes: {
      xaxis: {
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%Y.%m'}
      },
      yaxis: {
          tickOptions:{formatString:'$%.2f'}
      }
  },
  highlighter: {show: false}
});