Building a bubble chart

We finish our planning and decide to grab lunch since we're still waiting on data from Sara. When we return to the office, we have an e-mail waiting for us from Sara with the manufacturer revenue numbers she promised us this morning:

  1. We begin coding our chart by including the bubbleRenderer plugin file along with the highlighter and canvas plugin files:
    <script src="../js/jqplot.bubbleRenderer.min.js"></script>
<script src="../js/jqplot.highlighter.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>
  2. Next, we create our data array. We place the total revenue in the first element for each data array followed by the units sold. Based on the numbers Sara sent us, we calculate the percentage of profit for each manufacturer and make this the third element. For the fourth element, we can pass in a label as a string or an object with a label and/or a color for the bubble:
    <script>
$(document).ready(function(){
 var tv_manufacturers =
  [
    [148474, 226, 20.22, "Kogan"],
    [166778, 261, 14.87, "Beko"],
    [139054, 205, 12.24, "Akurra"],
    [88143,  118, 8.79, "Finlux"],
    [179734, 316, 15.93, "Vestel"],
    [280141, 446, 27.95, "Sansui"]
  ];
  3. We move on to create the plot and set title and axesDefaults:
      var bubbleChart = $.jqplot ('bubbleChart', [tv_manufacturers],
  {
    title:'Revenue in TV Category by Manufacturer - Last 12 Months',
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: -30,
          fontSize: '9pt'
        }
    },
  4. We format the x axis to display the revenue with a dollar sign and thousand place separators. For the y axis, we format the values to two decimal places. We don't need this for the actual y axis, but because we want our percent of profit to show two decimal places, we need to set this option. This is because jqPlot considers the third element a y axis value:
        axes:{
      xaxis:{
        label: 'Revenue',
        tickOptions: { formatString: "$%'d" }
      },
      yaxis: {
        label: 'Units Sold',
        tickOptions: { formatString: "%'.2f" }
      }
    },
  5. We make use of the highlighter plugin to show all the values for each data series. We set tooltipOffset to 5 so that our tooltip will not crowd the label of each bubble. Since we want to use actual percentage signs in formatString, we need to use two percentage signs. This way, the second percentage sign will be treated as a character:
        highlighter: {
      show: true,
      tooltipOffset: 5,
      yvalues: 2,
      formatString:"<table border='0'> 
      <tr><td>Revenue:</td><td class='right'>%s</td></tr> 
      <tr><td>Units Sold:</td><td class='right'>%d</td></tr> 
      <tr><td>%% of Profit:</td><td class='right'>%.2f%%</td></tr></table>"
    },
  6. Under seriesDefaults, we set renderer to $.jqplot.BubbleRenderer. Bubble charts allow for a gradient on the bubble, so we set bubbleGradients to true. Since some of our bubbles might cover the rest, we set bubbleAlpha to 0.6 so that we can see through the bubbles. We also set highlightAlpha to 0.8 so that when we highlight a bubble, it becomes less translucent, and it's easier to see the label and full size of the bubble. We also make the bubbles stand out more by setting shadow to true:
        seriesDefaults:{
      renderer: $.jqplot.BubbleRenderer,
      rendererOptions: {
        bubbleGradients: true,
        bubbleAlpha: 0.6,
        highlightAlpha: 0.8,
      },
      shadow: true
    }
  });
});
</script>
  7. We finish our chart by creating the div to contain the plot and add some CSS to format the tooltip. We set z-index to 99 so that the tooltip will always appear on top of the bubble. We also set the background to be opaque so that the tooltip will be easier to read:
    <div id="bubbleChart" style="width:600px;"></div>
<style>
.jqplot-highlighter-tooltip { background: rgba(208,208,208,1); z-index: 99; padding: 5px;}
.jqplot-highlighter td { padding-right: 5px; text-align: right;}
</style>

We save our work, and then preview the results in a browser, which are shown in the following screenshot:

Building a bubble chart

The bubbles have a nice gradient fill. They are also in a line, and this suggests a trend: the more units sold, the more revenue generated. Since we expected this outcome, it won't be necessary to include a trend line. We hover our mouse over the group of bubbles in the middle and highlight Kogan.

Based on the size of the bubble and the text in the tooltip, we see that Kogan TVs accounted for 20 percent of our profits, but we sold less units than some of the neighboring manufacturers. So, we can say that the profit margin for Kogan TV is higher than Beko or Vestel. This will be useful to Sara.

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

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