Adding an event handler for our stacked area chart

We wrap up the chart and move on to working on the stacked area chart from yesterday. We will create an event handler for the jqplotDataHighlight method. When a user hovers over a stacked area, we will populate a table with the current series data.

There are a few differences between this event handler and the one we used with our bar chart. We will use seriesIndex instead of pointIndex to access the data we need. For stacked charts, nothing is passed through pointIndex, so it will return null. Also, with the data parameter, it is an array of all the data points for the highlighted line.

Since we passed in date values originally, we might expect to have access to them in our callback. Not quite; when jqPlot takes in the data, it converts all of the date values to Unix timestamps. So, what we get in our callback are these timestamps.

We start by opening the file with our stacked chart. Below the existing chart, we set about adding in our new code, as explained in the following steps:

  1. In our table, we want to include the series label in the table caption. Then, we want the month, year, and the dollar amount in each row. First, we create an array with all the months of the year:
       var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
  2. Next, we start our callback method by resetting the table caption and table rows:
        $('#division_revenue').on('jqplotDataHighlight',
      function (ev, seriesIndex, pointIndex, data) {
        $('#divisional_data caption').html(''),
        $('#divisional_data tbody tr').remove();
  3. We then move on to create a loop that steps through each element in the highlighted data array. Then, we create a Date object from our timestamp:
            $.each(data, function(i, datum) {
          var date = new Date(datum[0]);
  4. After that, we use the getMonth method and pass it as the index for our monthNames array. Once we have the name, we concatenate the year and the dollar amount and append that to the table body:
              var row = '<tr><td>';
          row += monthNames[date.getMonth()];
          row += ', '+date.getFullYear()+'</td>';
          row += '<td class="right">$'+datum[1].toFixed(2);
          row += '</td></tr>';
          $('#divisional_data tbody').append(row);
        });
  5. Once we finish with our loop, we retrieve the label of the highlighted series. We access it through our plot object, div_revenue. To get to the correct series in our object, we pass in seriesIndex. We finish by unhiding our table:
            $('#divisional_data caption')
          .html(div_revenue.series[seriesIndex].label);
        $('#divisional_data').show();
      }
    );
  6. After our highlight method, we create a callback method for the jqplotDataUnhighlight event. When a user hovers away from a series, we want to clear out the table and hide it:
        $('#division_revenue').on('jqplotDataUnhighlight',
        function (ev) {
            $('#divisional_data caption').html(''),
            $('#divisional_data tbody tr').remove();
            $('#divisional_data').hide();
        }
    );
  7. When the page first loads, we want our table hidden, so we call the hide method on our table:
        $('#divisional_data').hide();
});
</script>
  8. We finish by creating our table and some styles to make our table appear next to our chart. Once we are done with our prototypes, we pull out our inline and embedded CSS styles into a separate file:
    <div id="division_revenue" style="float:left;width:600px;display:inline-block"></div>
<table id="divisional_data" class="div_data" style="">
<caption></caption>
<thead>
  <tr>
    <th>Month</th>
    <th>Dollar Amount</th>
  </tr>
</thead>
  <tbody></tbody>
</table>

<style>
    table.div_data {
        min-width:300px;
        float:left;
    }
    td.div_data, th.div_data {
        padding:0px 5px;
    }
    td.right {
        text-align: right;
    }
</style>

We reload the page, and when we hover over the Electronics area, the table is populated with the correct data:

Adding an event handler for our stacked area chart

Thinking about all the data Sara sent us, we can visualize it in several different ways. With our new roles as data analysts, we decide to do further research on data visualization. We find a couple of books by Stephen Few. He writes on simple techniques to visualize data in an understandable way. One of his books, Now You See It: Simple Visualization Techniques for Quantitative Analysis, which can be found at http://www.amazon.com/gp/product/0970601980, is very beneficial.

We have done all we can for the day. We will look at horizontal bar charts and stacked bar charts tomorrow. These will provide us with additional options to represent Sara's data.

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

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