Chapter 6. Spice Up Your Charts with Animation, Tooltips, and Highlighting

In the last five chapters, we have looked at how to create line charts, area charts, bar charts, pie charts, and donut charts. Now, we will look at ways to extend the functionality of our charts and how to make them easier to use. In this chapter, we will cover the following topics:

  • Adding the cursor plugin and being able to see the data where our cursor is
  • Making the tooltip follow our cursor and adding lines to make the cursor easier to follow
  • Connecting the cursor with the legend and showing data points when our cursor intersects a data point
  • Adding the highlighter plugin so that we only see data when we highlight a data point
  • Extending the highlighter plugin to select a legend item
  • Animating a line chart
  • Augmenting the animation for a bar chart by varying the speed of the animations

Using the cursor plugin to see the data behind our charts

We return to our office on Tuesday morning and spend the first half of our morning reviewing the charts we have created so far. Calvin swings by, and we ask him for some direction on how to proceed.

"Well, I think Roshan's suggestion to show the coordinates at the point of the cursor will be a great starting point. Just experiment. You've proven that you can meet the requirements. Now, you need to make it easier for the management to digest the data you are presenting. I hate to say it, but if you can work in some eye candy to grab their attention, that will impress them all the more. The data should speak for itself, but sometimes, you need to glitz it up."

Calvin leaves and we pull out our earlier line chart, 1168_01_04.html, showing profit and revenue on the same y axis. Since the data points for each line are so far apart, it is hard to get a good idea of what the actual dollar amounts are:

  1. We start by including the cursor plugin file. Our original chart did not have a legend, so we add in labels for each data series and add options for our legend:
    <script src="../js/jqplot.cursor.min.js"></script>
...
      series:[
        { label: 'Revenue' },
        { label: 'Profit' }
      ],
      legend: {
        show: true,
        placement: 'outsideGrid'
      },
  2. To add the cursor, we create a cursor option and set the show option inside to true. Just as with the legend, we can position the tooltip showing our data points. There are eight possible locations based on the compass directions n, ne, e, se, s, sw, w, and nw. Using sw will place the tooltip in the lower-left corner:
          cursor: {
        show: true,
        tooltipLocation:'sw'
      },
      ...

We load the chart in our browser and move our cursor around the chart. We move our cursor over the data point on our Revenue line for June and see that the total revenue for this month was $752,294. We also notice that the cursor tooltip uses the same format as our axes.

Using the cursor plugin to see the data behind our charts
..................Content has been hidden....................

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