We decide to grab an early lunch. When we get back, we start thinking about some of our other charts we could use the replot
method on. Our stock chart that shows the last quarter's prices comes to mind. We contact IT, and they inform us they already have a couple of URLs to get the last 3, 6, 12, or 24 months of data. That's all we need. With the data sets we need, we can begin work:
<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
to take the data, and wrap it in an array for jqPlot. We also create a variable to hold part of our title:<script> $(document).ready(function(){ function dataPull(remoteData,options) { return [remoteData]; } var title = ' - jQ Big Box Electronics (jqBBE)';
title
option, we concatenate the Past 3 Months
string and the title
variable. We'll do the same with our other datasets later, and it will allow us to update the title of our chart:$.jqplot.config.enablePlugins = true; var stockPrice = $.jqplot ('stockPrice', "./data/3_months.json", { title:'Past 3 Months'+title, axesDefaults: { tickRenderer: $.jqplot.CanvasAxisTickRenderer , tickOptions: { angle: -30, fontSize: '9pt' } },
dataRenderer
option, and set dataPull
as the callback for the renderer
options:dataRenderer: remoteDataCallback, dataRendererOptions: { dataCallback: dataPull }, seriesColors: ['#000'], series: [ { renderer:$.jqplot.OHLCRenderer } ],
DateAxisRenderer
, and we set the y axis to use a 2 decimal point float:axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickOptions: { formatString:'%b %e, %Y' } }, yaxis: { label: 'Share Price', tickOptions: { prefix: '$', formatString: '%.2f' } } },
yvalues
to 4
and add the relevant markup to generate our tooltip: highlighter: {
showMarker:false,
tooltipLocation:'w',
tooltipAxes: 'xy',
yvalues: 4,
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>'
}
});
$("#timeframe").change(function() { stockPrice.replot({ data: './data/'+$(this).val()+'_months.json', title:'Past '+$(this).val()+' Months'+title }); }); }); </script>
select
input above the div containing our chart:<select id="timeframe" name="timeframe"> <option value='3'>3 months</option> <option value='6'>6 months</option> <option value='12'>12 months</option> <option value='24'>24 months</option> </select> <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>
We open the chart in our browser, and we can see that it has loaded the last 3 months of data, as shown in the following screenshot:
We select 24 months from the drop-down menu, and the chart reloads without refreshing the page. We now see the stock prices of the last 2 years. We switch between the different time periods, and see that both the x and y axes change each time, as shown in the following screenshot:
The ability to change the data feeds and refresh our charts without reloading the page opens up a lot of possibilities. We can build labels, ticks, and other elements from the remote data. This way there will be less static elements in our charts.
3.144.100.237