Expanding our datasets with event handlers

We come to work on Wednesday and spend the morning catching up on work that we put off while we worked on these charts. The VPs are scheduled to meet this afternoon.

The morning is busy and we work through our normal lunch break. We finally get away at about 2 o'clock. We walk back into our office around 3 and find Calvin waiting for us. "Good news first. They loved what you've done, Sara especially. The bar graph showing the losses really got the other VP's attention. This leads to the bad news. Well, it's not actually bad news. It's more like the next step. Can you pull up that chart?"

We sit down at the computer and pull up the chart. Calvin continues while pointing at the screen, "So, like I said, Sara loved this. What she wants to know is if there is any way we can drill down into the various bars? She's envisioning clicking on a bar and it breaks out the loss numbers by region. Her team is seeing evidence that a large percentage of returns occur in a few select regions. The team is suspicious, and Sara wants to represent this in a chart."

We tell Calvin we can and we'll work on that this afternoon. "Also," Calvin continues, "they loved the stacked chart with the revenue by division. Is there any way you can show the numbers for each month when you hover over the area?" We tell him we can do this as well. "Great. Well, I'll leave you to it." With that, he walks out of the office.

As I sit down, you mention that we received an e-mail from Sara. She sent over the regional breakdowns for each return reason. We will add a second chart under our first chart. When a user clicks on a bar, the page will reload and send the selected index as a value in our query string.

  1. We open the code for our existing chart and include functions.js because we need our query string parsing function:
    <script src="../js/functions.js"></script>
...
  2. After the code to build our first chart, we create an event handler for jqplotDataClick using the jQuery on method. jqPlot passes the four parameters of ev, seriesIndex, pointIndex, and data to the callback method inside the event handler:
    var product_returns = $.jqplot ('product_returns', [returns], {
  ...
}
$('#product_returns').on('jqplotDataClick',
  function (ev, seriesIndex, pointIndex, data) {
    • The ev object contains all the object variables for the event triggering the callback.
    • The second parameter, seriesIndex, is an integer denoting the data series we click in the chart's data array. Since this chart only has one data series, seriesIndex will return 0 no matter which bar we click on.
    • The third parameter is pointIndex. This returns the index of the bar that was clicked on.
    • Finally, we have data. This is an array of the x and y axes values for the bar that was clicked on.
  3. Inside our callback method, we use window.location to reload our page. We append pointIndex as a query string value:
        window.location = "1168_03_05.html?reason="+pointIndex;
  }
);
  4. Next, we include the formatted data series for our second chart separated out by regions. Each element in the array matches with a return reason and dollar amount in the first data array:
      var region_breakdown = new Array();

  region_breakdown[0] = [['Southwest', 3175.40], ['California', 6350.79], ['Northwest', 3969.25], ['West Central', 2381.55]];
  region_breakdown[1] = [['Southwest', 8330.93], ['California', 27075.54], ['Northwest', 4165.47], ['West Central', 2082.73]];
  region_breakdown[2] = [['Southwest', 5215.68], ['California', 10431.36], ['Northwest', 6519.60], ['West Central', 3911.76]];
  region_breakdown[3] = [['Southwest', 1279.41], ['California', 2558.82], ['Northwest', 1599.27], ['West Central', 959.56]];
  region_breakdown[4] = [['Southwest', 2575.32], ['California', 5150.64], ['Northwest', 3219.15], ['West Central', 1931.49]];
  region_breakdown[5] = [['Southwest', 7224.56], ['California', 43347.38], ['Northwest', 18061.41], ['West Central', 3612.28]];
  5. Like our other chart, we call getQueryStringVar. If no value is passed in, we want it to be false. We create an if statement so that the second chart is not rendered when the page first loads:
      var selectedIndex = getQueryStringVar('reason') || false;

  if(selectedIndex) {
  6. The options for this chart are almost identical to the first chart, but for the current one we pass in the corresponding regional data series. We also access the return reason label from the first chart. This way the user will know what return reason was clicked on:
        var region_returns = $.jqplot ('region_returns', [region_breakdown[selectedIndex]],
    {
      title:'Product Returns by Region over 6 months<br>Reason: '+returns[selectedIndex][0],
      axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: { angle: -30 }
      },
      seriesDefaults:{ renderer:$.jqplot.BarRenderer },
      series: [
        {
          renderer:$.jqplot.BarRenderer,
          rendererOptions: { shadowAlpha: 0.8 }
        }
      ],
  7. Next, we format the y axis to display dollar values and add a label to the y axis. We conclude by adding a new div to hold our regional chart:
          axes:{
        xaxis:{ renderer: $.jqplot.CategoryAxisRenderer },
        yaxis: {
          label: 'Totals Dollars',
          tickOptions: { formatString: "$%'d" }
        }
      }
    });
  }

});
</script>

<div id="product_returns" style="width:600px;"></div>
<div id="region_returns" style="width:500px;"></div>

We load the page and click on the Defective Item bar. The page reloads and we see the charts shown in the following screenshot. The numbers for California are high but do not seem too out of the ordinary.

Expanding our datasets with event handlers

Next, we click on the Other / No Reason Given bar since it has the highest numbers. After the page loads, we see the results shown in the following screenshot. This chart tells a very interesting story, with over half of the returns of this region occurring in California.

Expanding our datasets with event handlers

We know that the first question out of the mouths of the VPs will be, "Why are these numbers so high?" We'll have to answer candidly, "We don't know." Some people may slip into the belief that charts are supposed to explain why things are happening. The real goal of data visualization is to represent what is happening. By attempting to make the data easier to understand, we help those analyzing the data to develop a hypothesis to explain the data.

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

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