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:
<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>
dataPull
function to wrap the remoteData
array in another array:<script> $(document).ready(function(){ function dataPull(remoteData,options) { return [remoteData]; }
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' } },
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 }
}
],
formatString
to %b %e, %Y
:axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickOptions: { formatString:'%b %e, %Y' },
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" },
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' } } },
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,
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>
<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:
3.12.163.175