Building an OHLC chart with last quarter's stock data

When we return to our office, we contact the IT team to get a JSON feed of the company's stock prices. They have one that was created a few months back. This gives us the stock prices of the last three quarters, which should be enough to get us started. We load the JSON feed in our browser and see that it is an array of arrays. For each array corresponding to a day, there are five elements: the date, the opening price, the high price, the low price, and the closing price:

[
["30-Sep-2012", 16.91, 17.29, 16.86, 17.16],
["29-Sep-2012", 16.70, 16.91, 16.46, 16.89],
...
]

With an understanding of the format of our remote data, we begin coding our chart using the following steps:

  1. We start by including the OHLC plugin file. We also include the highlighter plugin so that we can show all the prices when the user highlights each day. In addition, we want the plugins that allow us to format our dates on the axis and rotate them:
    <script src="../js/jqplot.ohlcRenderer.min.js"></script>
<script src="../js/jqplot.highlighter.min.js"></script>
<script src="../js/jqplot.dateAxisRenderer.min.js"></script>
<script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="../js/functions.js"></script>
  2. Since the JSON feed returns an array, we can reuse our dataPull function to wrap the remoteData array in another array:
    <script>
$(document).ready(function(){
  function dataPull(remoteData,options) {
    return [remoteData];
  }
  3. We set the title of our chart to the company's name and stock symbol. We also set the default angle and font size for our axis ticks:
      var stockPrice = $.jqplot ('stockPrice', "./data/q1_q3_2012.json",
  {
    title:'Q3 2012 - jQ Big Box Electronics (jqBBE)',
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: -30,
          fontSize: '9pt'
        }
    },
  4. We set the options for dataRenderer, and then set the color for our line to black. This way it will show up more clearly. Under the series options, we pass in the OHLC renderer to renderer and increase the thickness of our line:
        dataRenderer: remoteDataCallback,
    dataRendererOptions: { dataCallback: dataPull },
    seriesColors: ['#000'],
    series: [
      {
        renderer:$.jqplot.OHLCRenderer,
        rendererOptions: { lineWidth: 2 }
      }
    ],
  5. Next, we move on to the x axis. For our ticks, we want the date in the format of Jan 1, 2012, so we set formatString to %b %e, %Y:
        axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions: { formatString:'%b %e, %Y' },
  6. Even though our JSON feed has 9 months of data, we can limit how much data appears on our chart using the min and max options. Since we are using DateAxisRenderer, we pass in a date and time instead of an integer or float:
            max: "09-30-2012 16:00",
        min: "07-01-2012 16:00"
      },
  7. Looking at the remote data, we notice the stock price stayed above 15. We make this the min value to reduce the empty space at the bottom of our chart. We also use the prefix option to prepend a dollar sign to our ticks. By default, jqPlot formats ticks as integers. Our prices use decimals, so we set formatString to %.2f, which formats our ticks as a float with two decimal places:
          yaxis: {
        min: 15,
        label: 'Share Price',
        tickOptions: { prefix: '$', formatString: '%.2f' }
      }
    },
  8. We use the highlighter plugin so that we can display all five array elements for each data point. We set tooltipAxes to xy so that our date will appear in our string, followed by the four y values. We then need to set the yvalues option to 4 so jqPlot will know that the three remaining elements are part of the y axis:
        highlighter: {
      show: true,
      showMarker:false,
      tooltipLocation:'w',
      tooltipAxes: 'xy',
      yvalues: 4,
  9. We finish the setup for our tooltip by setting formatString. We create a table with the date in the first row, and then we create a row for each price. We also use %.2f to format our prices as floats, with two decimal places like our ticks:
          formatString:'<table class="jqplot-highlighter"> 
      <tr><td colspan="2">Date: %s</td></tr> 
      <tr><td>Open</td><td>%.2f</td> 
      <tr><td>High</td><td>%.2f</td></tr> 
      <tr><td>Low</td><td>%.2f</td></tr> 
      <tr><td>Close</td><td>%.2f</td></tr> 
      </table>'
    }
  });
});
</script>

    Tip

    Be aware, you can set your tooltip to display floating numbers, but if you do not format your axis ticks, then the values displayed in the tooltip will be rounded to the nearest whole number and will show zeroes for the decimal places.

  10. We finish our chart by making the tooltip background opaque so that it is more legible when displayed. Since our tooltip is created inside a div element, we have the full use of CSS to style the tooltip:
    <div id="stockPrice" style="width:600px;"></div>
<style>
.jqplot-highlighter-tooltip { background: rgba(208,208,208,1);}
.jqplot-highlighter td { padding-right: 5px; text-align: right;}
</style>

With all this complete, we save our work and load the chart in our browser. We hover over one of the lines and see our tooltip appear with all our data points:

Building an OHLC chart with last quarter's stock data
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.190.175