Adding extra canvas elements

Our overlayLogo function will calculate the new height and position for our logo. Then, we will use the drawImage method to convert the image and make it part of the main canvas. We wrap all of this in a setInterval function because we have to wait for jqPlot to render all the canvas elements before we can add our image. Perform the following steps to add extra canvas elements:

  1. We start by setting yPos to bottom if nothing is passed in for this parameter. When calculating coordinates for a canvas element, we begin at the upper-left corner. So, we declare variables for our height and the x and y coordinates. Next, we create a variable to hold our setInterval function as follows:
    function overlayLogo(id, scaledWidth, yPos) {
  if(typeof(yPos) === 'undefined') { yPos = 'bottom' };
  var height = 0, top = 0, left = 0, canvas = '';
  var checkCanvas = setInterval(function() {
  2. jqPlot does not add an ID to the canvas elements it creates, so we need to locate our canvas element using the class name. If the canvas we want exists, we create a new area on the selected canvas to draw our image. Next, we find the DOM element for our logo as follows:
        canvas = $("#"+id+" .jqplot-event-canvas");
    if (canvas.length > 0) {
      var context = canvas[0].getContext("2d");
      var logo = $("#company_logo")[0];
  3. To get our height, we divide the original height and width to get the ratio and then multiply it by scaledWidth. We calculate left so that the image is placed five pixels from the right edge of the chart as shown in the following code snippet:
          height = (logo.height/logo.width) * scaledWidth;
      left = canvas[0].width - scaledWidth - 5;
  4. If yPos is set to bottom, we calculate the top variable so the image will be five pixels from the bottom of the chart. If yPos is set to top, we place the image at the top edge of the chart as follows:
          switch (yPos) {
        case 'bottom':
          top = canvas[0].height - height - 5;
          break;
        case 'top':
          top = 0;
          break;
      }
  5. With all our new values, we pass these into the drawImage method. Then, we run clearInterval so that our interval loop will cease as follows:
          context.drawImage(logo, left, top, scaledWidth, height);
      clearInterval(checkCanvas);
    }
  }, 100);
}

We review the results in our browser and can see the interaction between conversions and revenue. We see that revenue shows an upward trend. The logo also appears in the upper-right corner of our chart. We hope Roshan will appreciate these additions.

Adding extra canvas elements

Upon further inspection, we see that the average dollar amount per conversion is $100. However, in October, the average is closer to $125 and in November, it is close to $160. Knowing this, the next step would be to determine what items were sold each month.

With this chart done, it is close to five o'clock so we collect our things and head home. We can look at Jeff's request to add a cursor tooltip to the donut chart in the morning.

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

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