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:
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('&'),
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]; }
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>
<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];
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;
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 = '';
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(); } });
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 } },
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, } },
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 } } ],
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" } } } });
$("#trendline").change(function() { $("#form").submit(); }); }); </script>
<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:
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."
18.119.159.178