Removing axis labels and adding point labels

Since this chart will be in a confined space, we will turn off the ticks and label on the y axis to increase the amount of area in the chart. We will use the same plugins as before, but we will also include the pointLabels plugin this time:

  1. Since this is a proof-of-concept chart, we just pass in the last month's data for each data series and wrap it in an array. If Sara signs off on this, we can create a data renderer to pull last month's data dynamically:
    ...
<script src="../js/jqplot.pointLabels.min.js"></script>
...
  var rev_category = $.jqplot ('rev_category', [ [dvds[11]], [cds[11]], [software[11]], [digital[11]], [tvs[11]], [computers[11]], [consoles[11]], [dvd_players[11]], [media_streamers[11]]],
...
  2. Next, we use the new edgeTolerance option for the pointLabels option. In the previous charts, the point labels disappeared when they got too close to the edge of the plot. Our workaround was to add padding to the y axis. With edgeTolerance, if our point label is too long, it will continue beyond the edge of the plot. If it passes our newly set threshold, jqPlot will turn off the label:
        seriesDefaults: {
      renderer:$.jqplot.BarRenderer,
      pointLabels: { show: true, edgeTolerance: -75 },
      rendererOptions: {
        barDirection: 'horizontal',
        barPadding: 10,
        barMargin: 10,
        shadow: false
      }
    },
  3. We can use text labels instead of the y value for our point labels. We do away with the legend and set labels to the category name for the pointLabels option. The labels option takes an array because it expects a label for each point on the data series. Since we only have one data point per series, our arrays will also have one element:
        series: [
      { label: 'DVDs/Blu-ray', color: '#FF0000', pointLabels:{ labels:['DVDs/Blu-ray'] } },
      { label: 'Music CDs', color: '#0BBBE0', pointLabels:{ labels:['Music CDs'] } },
      { label: 'Software', color: '#0000FF', pointLabels:{ labels:['Software'] } },
      { label: 'Digital', color: '#555', pointLabels:{ labels:['Digital'] } },
      { label: 'TVs', color: '#FF960C', pointLabels:{ labels:['TVs'] } },
      { label: 'Computers', color: '#00007F', pointLabels:{ labels:['Computers'] } },
      { label: 'Game Consoles', pointLabels:{ labels:['Game Consoles'] } },
      { label: 'DVD Players', color: '#56C2B2', pointLabels:{ labels:['DVDs/Blu-ray Players'] } },
      { label: 'Media Streamers', color: '#62FF0D', pointLabels:{ labels:['Media Streamers'] } },
    ],
  4. We want to decrease the amount of space taken up by all the data on the x axis. So, we set fontSize to 10pt for the x axis:
        axes:{
      xaxis:{ label: 'Revenue in Dollars',
        tickOptions: {
          formatString: "$%'d",
          fontSize: '10pt'
        }
      },
  5. We can explain the data on the y axis with the HTML title and our point labels; so, we can hide the ticks and axis label. The parts of our ticks we can turn off are the grid lines, marks, and labels. The corresponding options under tickOptions are showGridline, showMark, and showLabel. We want to turn off all three so we use show and set it to false. We hide the axis label by setting showLabel to false:
          yaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickOptions: { show: false },
        showLabel: false
      }
    }
  });
});
</script>
  6. We add a bit of HTML to give a heading to our new dashboard and chart. We also include some CSS to format our point labels to make them easier to read on our plot:
    <h1>Dashboard</h1>
<div id="monthly_rev" class="dashboard block">
  <h2>Last Month's Revenue by Product Category</h2>
  <div id="rev_category" style="width:200px; height:400px;"></div>
</div>
<style>
.jqplot-point-label {
  font-size: .75em;
  z-index: 2;
  white-space: nowrap;
  border: 1.5px solid #aaaaaa;
  padding: 1px 2px;
  background-color: #eeccdd;
}
</style>

We load our new dashboard, and the chart works as we intended. The changes to our styles make the chart easier to view. Also, it is small enough, so we can place several other charts next to it, and it will all fit on one screen.

Removing axis labels and adding point labels

With our restrictions, we could not fit all these data series in a vertical bar chart, so this is one of the times that horizontal charts shine. Also, we see that most of our point labels stay inside our plot, but the label for Computers and Game Consoles extend beyond the chart. This is a compromise we made; either the labels extend beyond the chart or our bars are shorter and harder to see if we add padding.

As we think about what might come next, Calvin walks in the office with a woman. "This is Sara. She wanted to stop by and meet you two." We introduce ourselves and you mention that we just wrapped up the dashboard prototype.

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

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