Extending the highlighter plugin to the legend

We can also use the highlighter on bar charts. We decide we will add the highlighter plugin to our stacked bar chart, Monthly Revenue by Product Category, from Chapter 4, Horizontal and Stacked Bar Charts, executing the following steps:

  1. We use the same options as our Social Media Shares chart to which we added the highlighter plugin. However, in this chart, we decide to turn off the halo on the data point; so, we set showMarker to false. We also only want the x value. So, we set tooltipAxes to x:
    ...   
    highlighter: {
      show: true,
      tooltipLocation: 'e',
      showMarker: false,
      tooltipAxes: 'x'
    },
...
  2. We will also experiment and highlight the corresponding legend item when we highlight a bar. We'll do that by creating an event handler for jqplotDataHighlight. If we move our cursor from one stack to another within the same bar, jqplotDataUnhighlight will not fire. So, we begin by removing the highlight class from all the legend table rows:
      $('#rev_category').on('jqplotDataHighlight',
    function (ev, seriesIndex, pointIndex, data) {
      $("tr.jqplot-table-legend").removeClass("highlight");
  3. Our table has the last item of the data series at the top, so the legend items are in the opposite order of the data series. We use the reverse method, and then loop through each table row in the legend. When the index of the legend matches the index of the series we highlighted, we add the highlight class, which adds a border to the table cell:
          $($("tr.jqplot-table-legend").get().reverse())
      .each(function(i,index) {
        if(i == seriesIndex){
          $(this).addClass("highlight");
        }
      });
  });
  4. For the jqplotDataUnhighlight event, we remove the highlight class from all our legend rows. Then, within our style element, we include the highlight class:
      $('#rev_category').on('jqplotDataUnhighlight',
    function (ev, seriesIndex, pointIndex, data) {
      $("tr.jqplot-table-legend").removeClass("highlight");
  });
...
<style>
.jqplot-highlighter-tooltip { background: rgba(208,208,208,1);}
.highlight .jqplot-table-legend-label { border: 1px solid #000; padding: 0px 0px 0px 4px;}
</style>

We pull up the chart in our browser and see the results of our effort in the following screenshot. We begin highlighting different stacks in our bar chart. We are able to see the individual dollar amount for each data point. Also, the legend is highlighted so that it's easier to match a bar with the product category.

Extending the highlighter plugin to the legend
..................Content has been hidden....................

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