Using the highlighter plugin

We move on to the highlighter plugin. This plugin works very much like the cursor plugin, but it only highlights the data point that our cursor is hovering over. We will start with the Social Media Shares chart from Chapter 2, More Line Charts, Area Charts, and Scatter Plots, found in 1168_02_01.html, which we created last week. There are a lot of data points to test with:

  1. We start by including the highlighter plugin file with the other included JavaScript files:
    <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
<script src="../js/jqplot.highlighter.min.js"></script>
  2. We will only add the highlighter option to our chart. No other change to the chart is necessary. As with the cursor plugin, we set show to true to enable the highlighter plugin. We want a halo to appear around the data point when we highlight it, so we set showMarker to true:
        highlighter: {
      show: true,
      showMarker: true,

    Tip

    Non-rendering plugins such as highlighter, cursor, or trend line are disabled by default to avoid possible conflicts with custom plugins. As we discussed, we can manually enable each plugin using the show option. If we are certain that there are no conflicts with our plugins, we can use the following shortcut:

    $.jqplot.config.enablePlugins = true;

    We set this option before we create our chart, and all non-renderers will be enabled.

  3. As with the cursor plugin, there is a tooltipLocation option and eight possible positions. For this chart, we set tooltipLocation to e so that the tooltip appears to the right of our cursor. Finally, we set tooltipAxes to yx. This will place the y value first and the x value second, and separate them both by a comma:
          tooltipLocation: 'e',
      tooltipAxes: 'yx'
    },

    Tip

    The other options for tooltipAxes are x, y, and xy (note that both can also be used in place of xy). We can use formatString to modify the entire tooltip, but the values will appear in the order specified in tooltipAxes.

    We load the chart in our browser. As shown in the following screenshot, when we highlight a data point, the point appears larger, and a tooltip appears next to it:

    Using the highlighter plugin
..................Content has been hidden....................

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