Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Adding trend lines to selected product categories

We can tell from the chart we just created that TVs and computers sell better than DVDs and CDs. However, with so many bars and so little perceived movement in the data between quarters, this chart doesn't tell us much more. This leads us to think about how we can make the chart more interactive. We conclude that adding a trend line to one data series will help us see whether revenue is trending up or down for a given category.

We don't want to create separate charts for each product category; so we will just add a drop-down menu with each product category. When the dropdown changes, it will submit the form and reload the page. We'll add functions to determine which drop-down item is selected, and then create a trend line for the corresponding data series. We decide to start with our query string parsing function:

We open functions.js and create getQueryStringVar that accepts the parameter name. This is the name of the value from our query string that is created when we submit our form. Next, we pull in the query string and split it into the array, hashes:
```
function getQueryStringVar(name){
  var vars = [];
  var hash = [];
  var hashes = window.location.href.slice( window.location.href.indexOf('?') + 1 ).split('&'),
```

We loop through each key-value pair and create an array with each value. Then, we return the value of the selected key:

  for(var i = 0; i < hashes.length; i++)
  {
    hash = hashes[i].split('='),
    vars.push(hash[0]);
    vars[hash[0]] = decodeURI(hash[1]);
  }
  return vars[name];
}

We switch back to the code for our chart. We include the trendline plugin and functions.js file along with our other plugins:

<script src="../js/jqplot.categoryAxisRenderer.min.js"></script>
<script src="../js/jqplot.barRenderer.min.js"></script>
<script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="../js/jqplot.trendline.min.js"></script>
<script src="../js/functions.js"></script>

Next, we include the arrays for each product category:

<script>
$(document).ready(function(){
  var dvds = [546643.33, 517902.14, 482774.32, 455892.62, 438679.00, 406907.18];
  var cds = [398583.39, 386552.99, 372738.46, 359209.91, 336457.82, 327396.58];
  var tvs = [378583.39, 346552.99, 368164.98, 371856.60, 366457.82, 327396.58];
  var computers = [563621.35, 540214.96, 589978.66, 637114.31, 621279.49, 599837.31];

After that, we create the array trendline to contain an object for each of our product category data series. Next, we declare the variable selectedIndex, which uses our new getQueryStringVar function to get the existing value of our query string parameter, trendline. If trendline is not set, we set selectedIndex to 0:
```
  var trendline = new Array();
  var selectedIndex = getQueryStringVar('trendline') || 0;
```
Next, we create a loop to step through each option in the dropdown. When we begin each step, we create an object in the current element of our trendline array. We create default values for our show and label parameters in the new object. These parameters match the options available to us under the trend line option in jqPlot:
```
$("#trendline option").each(function(i, option) {
  trendline[i] = new Object();
  trendline[i].show = false;
  trendline[i].label = '';
```
After we create our object, we check whether the current element is the selected index. If it is, we select the option in the drop-down. Then for the current trendline object, we set show to true, pull the text from the drop-down option, and set this option to our label:
```
  if(i == selectedIndex) {
    $('#trendline > option:eq('+i+')').prop('selected', true);
    trendline[i].show = true;
    trendline[i].label = 'Trend: ' + $('#trendline > option:eq('+i+')').text();
  }
});
```

We create an array for our tick labels and set the defaults for the axes:

var ticks = ['Q2 - 2011', 'Q3 - 2011', 'Q4 - 2011', 'Q1 - 2012', 'Q2 - 2012', 'Q3 - 2012'];

var rev_category = $.jqplot ('rev_category', [dvds, cds, tvs, computers],
{
  title:'Quarterly Revenue by Product Category',
  axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions: { angle: -30 }
  },

We set the trendline option in seriesDefaults so that trend lines will be available on any given series with the set color and line width:

    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
        barMargin: 6,
        barPadding: 2,         
        shadow: false
      },
      trendline: {        
        color: '#111',
        lineWidth: 4,    
      }
    },

Then, in each series, we set the show option to match the corresponding parameter in our trendline array, and do the same for the label:

    series: [
      { label: 'DVDs/Blu-ray', trendline: { 
          show: trendline[0].show, label: trendline[0].label 
        } 
      },
      { label: 'Music CDs' , trendline: { 
          show: trendline[1].show, label: trendline[1].label   
        } 
      },
      { label: 'TVs' , trendline: { 
          show: trendline[2].show, label: trendline[2].label      
        } 
      },
      { label: 'Computers' , trendline: { 
          show: trendline[3].show, label: trendline[3].label 
        }
      }
    ],

For this chart, we place the legend in the lower-left corner and set padMax for our y axis so that the legend will not cover the top of our bars:

    legend: { show: true, placement: 'insideGrid', location: 'sw' },
    axes:{
      xaxis:{ label: 'Quarters', renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks },
      yaxis: {
        label: 'Totals Dollars',
        padMax: 1,
        tickOptions: { formatString: "$%'d" }
      }
    }
  });

With our chart complete, we create an event handler so that when our drop-down menu is changed, it will submit the form:
```
  $("#trendline").change(function() {
    $("#form").submit();
  });

});
</script>
```

We finish the HTML by creating the dropdown to change trend lines and wrap it all in a form. The value of each option matches the position of the data series array for our chart:

<form action="1168_03_04.html" method="GET" id="form">
  <select id="trendline" name="trendline">
    <option value='0'>DVDs/Blu-ray</option>
    <option value='1'>Music CDs</option>
    <option value='2'>TVs</option>
    <option value='3'>Computers</option>
  </select>
</form>

<div id="rev_category" style="width:700px;"></div>

We test our chart, and a trend line for DVDs/Blu-ray is rendered since we did not pass a query string. Viewing the following results, we see that revenue shows a downward trend for DVDs/Blu-ray:

Adding trend lines to selected product categories

We try another data series and select Computers to render a new trend line. From the following screenshot, we can see that revenue shows an upward trend for Computers:

It's close to quitting time, so we decide that now will be a good time to wrap up. Calvin stops by to review our work. As we walk out with him, he comments, "What you have done is amazing. Sara and the others will be ecstatic. They are going to love what you've done. Just be ready for more work. Now that they know what you are capable of, they are going to send a lot more your way."

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

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

Table of Contents for Adding trend lines to selected product categories

Create new playlist

Sign In

Sign Up

Adding trend lines to selected product categories

Table of Contents for
Adding trend lines to selected product categories