Adding tooltips to canvas overlay lines

We wrap up our work and prepare for a little bit of relaxing reading on Reddit when Calvin, Bob, and Roshan stop by. We show Roshan the first two charts, and then show off our colored candlestick chart. Roshan asks, "Can we just make the bigger chart a line chart? I'm afraid all the extra marks and what not will confuse users." We tell him that won't be a problem.

We also point out the price jump on February 15. "Right," Roshan says, "that was the day the quarterly earnings were released. Actually, some of the numbers were leaked over the weekend, and the stock jumped before the market opened."

Roshan stops and looks like he is thinking something over. "You added a line to one of the bar charts, showing a threshold. Can you do something similar to denote when the quarterly earnings were released?" We tell him we should be able to do that. "Excellent. I look forward to seeing it. Now, we'll get out of your hair."

We save the previous chart as a new file and begin making our changes using the following steps:

  1. To add canvas overlay lines, we include the corresponding plugin file. Since we are using three non-rendering plugins, we use enablePlugins to turn them all on. Then, we create the canvasOverlay option:
    ...
<script src="../js/jqplot.canvasOverlay.min.js"></script>
...
  $.jqplot.config.enablePlugins = true;
  var stockPrice = $.jqplot ('stockPrice', "./data/q1_q3_2012.json", {
  ...
    canvasOverlay: {
  2. Next, we create the objects array. We set each of our three lines to dashedVerticalLine. For the first line, we set the name to Q4 2011 Earnings. With our previous lines, we set x to our threshold, which was an integer. Since we are using dates, we need to convert our date to a valid ISO 8601 timestamp so that jqPlot can place it properly:
          objects: [
        {   
          dashedVerticalLine: {
            name: 'Q4 2011 Earnings',
            x: new Date("2012-02-15T06:00:00").getTime(),
  3. Most of the other options are the same as before. However, this time we make use of the showTooltip option and set it to true. Then, we set tooltipLocation to e so that it will not overlap our highlighter tooltip. We finish by setting tooltipFormatString to the name of our line. We'll use the same layout for the other two lines, but change the x value, name, and tooltipFormatString:
                lineWidth: 2,
            color: '#00f',
            shadow: false,
            yOffset: 0,
            showTooltip: true,
            tooltipLocation:'e',
            tooltipFormatString: 'Q4 2011 Earnings'
          }
        },
        ...
      ]
    },
    ...
  4. We remove the renderer option from the series object. Then, we set showMarker to false, so we'll only show the line and not all the data points. We also set lineWidth to 1 so that the line is not so thick:
        series: [ { showMarker: false, lineWidth: 1 } ],
    ...

With all of that wrapped, we load the chart in our browser. We hover over the middle line, and the tooltip appears and shows Q1 2012 Earnings.

Adding tooltips to canvas overlay lines

We zoom in to look at the month of July and notice something as we hover over the data point for July 6. The numbers in the tooltip don't seem to match the line.

Adding tooltips to canvas overlay lines

Our chart uses the opening price as the y value for our line, ignoring the other elements in the array. We need to swap the opening price with the closing price on the y axis, but we want to keep all the other values for the tooltip.

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

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