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

Building a block plot

We receive another e-mail from Sara. She forgot to send us numbers for the other electronics categories she wanted us to chart. Having created a bubble chart, we decide to create a block plot.

A block plot is one of those charts that has different implementations or definitions. Block plots in jqPlot are similar to bubble charts, but the data points are rendered as a block instead of as a bubble. Also, block plots only use x and y values, so the blocks are all of the same size. Their sizes will differ slightly because of the length of the label for each data point. An example of a block plot can be seen in the following screenshot:

After looking at the data from Sara's e-mail, there will be 17 data points on our chart. It is likely that some blocks will overlap others, and it may be hard to see some of the blocks. We will use the enhanced legend plugin, which will give us the ability to hide certain data series. So, for example, we can hide the TVs and Computers categories and only show the DVDs category:

To get started, we include the blockRenderer plugin file along with the highlighter, enhancedLegendRenderer, and canvasTextRenderer plugin files:

<script src="../js/jqplot.blockRenderer.min.js"></script>
<script src="../js/jqplot.highlighter.min.js"></script>
<script src="../js/jqplot.enhancedLegendRenderer.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>
<script>
$(document).ready(function(){

Next, we include arrays with the values for TV, computer, and DVD player manufacturers:

 var tv_manufacturers =
    [
    [226, 148474, "Kogan"],
    [261, 166778, "Beko"],
    [205, 139054, "Akurra"],
    [118, 88143,  "Finlux"],
    [316, 179734, "Vestel"],
    [446, 280141, "Sansui"]
    ];

  var computer_manufacturers =
    [
      [325, 238978, "Konvex"],
      [367, 310553, "Luxor"],
      [226, 170127, "Sperry"],
      [121, 87008, "Finlux"],
      [259, 180924, "Hasee"],
      [295, 251509, "Olidata"],
      [497, 405308, "Akurra"]
    ];

  var dvd_player_manufacturers =
    [
      [248, 61147, "BenQ"],
      [255, 51107, "Cinram"],
      [100, 14695, "Finlux"],
      [334, 72634, "Akurra"],
    ];

Now, we create the variable to hold our jqPlot object and pass in the three data arrays. We set the title and axesDefaults values:

  var blockPlot = $.jqplot ('blockPlot', [tv_manufacturers, computer_manufacturers, dvd_player_manufacturers],
  {
    title:'Revenue for Various Categories by Manufacturer',
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: -30,
          fontSize: '9pt'
        }
    },

For this chart, we decide to swap the axes, putting Revenue on the y axis and Units Sold on the x axis. Since we are not passing in floating values, we set both formatString options to $%'d:

    axes:{
      yaxis:{
        label: 'Revenue',
        min: 0,
        tickOptions: { formatString: "$%'d" }
      },
      xaxis: {
        label: 'Units Sold',
        tickOptions: { formatString: "%'d" }
      }
    },

The only new option for the legend is to set renderer to EnhancedLegendRenderer:

    legend:{
      renderer: $.jqplot.EnhancedLegendRenderer,
      show:true,
      placement: 'outsideGrid'
    },

For seriesDefaults, we set renderer to BlockRenderer, and we enable shadows to make the chart more visually appealing:
```
    seriesDefaults:{
      renderer: $.jqplot.BlockRenderer,
      shadow: true
    },
```

We want custom colors for each data series, and we want to lower the opacity, so we set the color using the rgba format. With translucent blocks, users will be able to see through them if they overlap:

    series: [
      { label: 'TVs', color: 'rgba(255, 150, 12, .6)' },
      { label: 'Computers', color: 'rgba(160, 160, 255, .6)' },
      { label: 'DVD Players', color: 'rgba(86, 194, 174, .6)' },
    ],

We use the same configuration for our block plot that we used for our bubble chart. Since the background of our blocks is translucent, it is possible to see the data point that jqPlot renders underneath the block. So, we add the showMarker option and set it to false. Since we are only passing in the block label behind the y axis value, we set yvalues to 2:

    highlighter: {
      show: true,
      showMarker: false,
      tooltipOffset: 5,
      yvalues: 2,
      formatString:"<table border='0'><tr><td colspan='2' align='center'>%3$s</td></tr> 
      <tr><td>Units Sold:</td><td class='right'>%1$d</td></tr> 
      <tr><td>Revenue:</td><td class='right'>%2$s</td></tr></table>"
    }
  });
});
</script>

We finish by adding the div to contain our plot and the CSS we created for our bubble chart. It will be useful for this chart as well:

<div id="blockPlot" style="width:600px;"></div>
<style>
.jqplot-highlighter-tooltip { background: rgba(208,208,208,1); z-index: 99;}
.jqplot-highlighter td { padding-right: 5px; text-align: right;}
</style>

We load the chart and hover over the block for Hasee under Computers. We can see what the chart looks like in the following screenshot. The chart looks good, but as we thought, many of the blocks overlap.

We want to see only the Computers category, so we click on the TVs category in the legend first. We see that jqPlot draws a line through the legend item and all the TVs blocks fade out. Next, we click on the DVDs category; the blocks fade out and the legend item is also crossed out. We are now left with only the Computers category.

As we wrap up for the day, Calvin stops by and we show him the two charts we created for Sara. "I like them. They're different from bar charts, and you can still get to all the relevant data with the tooltips and what not."

Calvin continues, "Roshan wants a quick meeting in the morning with you two. I'll have Sara sit in, and we can show her the charts you did today. Well, I'll see you tomorrow morning." He turns and leaves. We grab our things and follow behind him.

Gaining our next set of requirements

The next morning we meet with Calvin, Roshan, and Sara in a small conference room. We walk Sara through the charts and she loves them. "These will be perfect for my presentation."

Then, Roshan speaks up, "And now for my request. I was telling Calvin I have been reading this great book called The McKinsey Way, Ethan Rasiel, McGraw-Hill. It had a great section on charting data. One chart mentioned a waterfall chart." I hold up my hand, "We have never heard of a waterfall chart. What does it do?"

Roshan continues, "It shows how certain data points impact others. It looks like a bar chart, but some of the bars are floating. I'm not explaining it well. I'm sure you can find more information about them. I want a waterfall chart showing revenue along with operating expenses and fixed costs."

Sara gets a quizzical look on her face. "Are inventory losses included in your operating expenses?" Roshan stops to think. "No, they're not." Sara continues, "In that case, I would like to add inventory losses as an item to the chart."

I speak up, "Roshan, if you and Sara compile the numbers for us, we'll look at creating one for you." Roshan nods, "That sounds good. I'd like to see this chart by Friday. I've got a presentation with the rest of the VPs."

..................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 Building a block plot

Create new playlist

Sign In

Sign Up

Building a block plot

Gaining our next set of requirements

Table of Contents for
Building a block plot