Making a pie chart with many data points

After the meeting concludes, we head back to our office to try and make the best of a possibly bad situation. We talk it over and decide to start on the product category pie chart first.

We have been in talks with the IT department, and they have created more data feeds for us. The one we will use for this chart returns an array of arrays. Each array has two elements: the division and product category as a label and the revenue for the last month. Here is the data it returns:

[
["Electronics - Computers", 134764.98],
["Nerd Corral - Service", 103405.96],
["Media & Software - Music CDs", 97045.54],
["Electronics - Game Consoles", 85518.01],
["Media & Software - DVDs/Blu-ray", 83181.89],
["Electronics - TVs", 76345.37],
["Media & Software - Digital Media", 53375.05],
["Nerd Corral - Parts", 47002.71],
["Media & Software - Software", 43670.49],
["Electronics - Media Streamers", 35632.50],
["Electronics - DVD/Blu-ray Players", 21379.50]
]
  1. We include the pieRenderer plugin and the functions.js file. We create the dataPull function to wrap the remote data in an array, and then return it to jqPlot. We have made an addition to our remoteDataCallback function. It now passes all the options passed in by jqPlot to the data callback method we created:
    <script src="../js/jqplot.pieRenderer.min.js"></script>
<script src="../js/functions.js"></script>
<script>
function dataPull(remoteData,options) {
  return [remoteData];
}

$(document).ready(function(){
  var divisions = $.jqplot ('divisions', './data/last_month_revenue.json',
  {
    title: 'Percentage of Revenue by Product Category',
  2. We set the renderer to PieRenderer, and then move on to the renderer options. We want to show the data labels of our pie pieces. By default, the labels are set to percent, which shows the percentage. If we want to change the label type, we will set dataLabels to label, value, or an array of custom labels:
        seriesDefaults: {
      renderer:$.jqplot.PieRenderer,
      rendererOptions: { 
        showDataLabels: true,
  3. Next, we set startAngle to -90 so that our pie pieces start at 12 o'clock. Also, we set dataLabelThreshold to 0. By default, jqPlot hides slices of less than three percent of the total pie area. This way, we will have labels for all of our wedges:
            
startAngle: -90,
        dataLabelThreshold: 0
      }
    },
  4. We set dataRenderer to use our remoteDataCallback function, and then pass in the dataPull function name as an option to the data renderer. Finally, we place the legend below the chart:
        dataRenderer: remoteDataCallback,
    dataRendererOptions: { dataCallback: dataPull },
    legend: { show: true, placement: 'outside', location: 's' },
  });
  5. In an effort to make the pie charts easier to understand, we create a callback for the jqplotDataHighlight event handler. When a user highlights a pie piece, we pass in the label and the actual dollar amount to a div we named tooltip. We use a new function, numberWithCommas, to format our numbers with thousands place separators:
      $('#divisions').on('jqplotDataHighlight',
    function (ev, seriesIndex, pointIndex, data) {
      $('#tooltip').html(data[0]+' - $'+numberWithCommas(data[1].toFixed(2)));
    }
  );
  $('#divisions').on('jqplotDataUnhighlight',
    function (ev, seriesIndex, pointIndex, data) {
      $('#tooltip').html(''),
    }
  );
});
</script>
  6. We finish by writing some CSS rules to have tooltip appear on top of our plot just above the pie chart:
    <div id="divisions" style="width:400px;height:300px;"></div>
<div id="tooltip"></div>
<style>
  .jqplot-table-legend.jqplot-table-legend-label { white-space: nowrap;}
  #tooltip { float:left;position: absolute; top:52px;left:75px;}
</style>

We load the chart in our browser and see the following result. It is overwhelming!

Making a pie chart with many data points

It's not as bad as we thought, but it can be better. We can see that one pie piece is so small that its label overlaps the label next to it. With others, the fill color is so dark that we can't make out the label unless we hover over the piece.

Also, there is the problem of trying to match the wedges to the legend. If we try to include the labels on the wedges, the chart will be unreadable. In its current form, if we want to know what product category has 10 percent of the total revenue, we have to count items in the legend till we find the category. We don't feel like the user will be able to compare categories quickly.

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

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