Using the replot method to change remote datasets

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:

  1. We pull up the code for the stock chart and save it as a new file. We leave all the plugins from before:
    <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. We add 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)';
  3. When we first load the chart, we pull in the data of the last 3 months. If a user wants a different time frame, they can select it from the drop-down menu after the page loads. For the 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' }
    },
  4. We include the dataRenderer option, and set dataPull as the callback for the renderer options:
        dataRenderer: remoteDataCallback,
    dataRendererOptions: { dataCallback: dataPull },
    seriesColors: ['#000'],
    series: [ { renderer:$.jqplot.OHLCRenderer } ],
  5. We set the renderer for the x axis to use 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' }
      }
    },
  6. We are still using the highlighter, so we set 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>'
    }
  });
  7. Next, we need an event handler for the select input we are going to create. Based on the selected value, we use this to create the URL for our JSON file. We will also update the title of our chart with the selected value, as follows:
      $("#timeframe").change(function() {
    stockPrice.replot({
      data: './data/'+$(this).val()+'_months.json',
      title:'Past '+$(this).val()+' Months'+title
    });
  });

});
</script>
  8. Next, we add the 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:

Using the replot method to change remote datasets

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:

Using the replot method to change remote datasets

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.

..................Content has been hidden....................

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