Tracking Data in Wijmo Charts

In one of the previous blogs, I discussed about how you can get the XY coordinates and Data coordinates of the DataPoints in Wijmo Charts. But, recently, one of our customer had a requirement wherein he wanted to display the coordinates of the point on which mouse is being hovered by the end user. We cannot use Hint in this scenario because it displays the value of nearest datapoint irrespective of the data value which is being hovered. This is an extension of the previous blog and describes how you can display Tooltip between the Datapoints in Wijmo Chart. In other words, this blog demonstrates how you can track the data in WijLineChart. To simplify the things, I have divided the implementation in three steps: 1. Create WijTooltip object 2. Get the position of the point being hovered 3. Handle the MouseMove event and display the data points based on the point. Step 1 WijTooltip is a custom tooltip which allows you to show a popup tooltip or an overlay that provides information about a target element in a callout or small box. You can create its object like below:

  // Create wijtooltip outside the "mousemove" event to avoid creating multi-times.  
  tooltip = $(lineChart.canvas).wijtooltip({  
      style: { fill: "#000000", "stroke-width": "2", stroke: "#00a6dd" },  
      animated: "fade", showAnimated: "fade", hideAnimated: "fade",  
      // Make sure the wijtooltip move immediately when "mousemove"  
      showDelay: 1,  
      hideDelay: 150, easing: "easeOutExpo",  
      showEasing: "easeOutExpo", hideEasing: "easeOutExpo",  
      compass: "north", offsetX: 0, offsetY: 0,  
      position: {  
         my: 'center bottom',  
         at: 'center top',  
         offset: null  
     },  
     // Make sure that when mouse move into the wijtooltip, it will not hide by itself.  
    closeBehavior: "none"

Step 2 Create a custom method which returns the position of the point which is hovered by the end user. Here is the code for same:

  lineChart = $("#wijlinechart").data("wijmo-wijlinechart");  
  // Invoke this method to get a point whose position is always in the line of wijlinechart  
  // Parameters:  
  //"mousePosition": The relative position of mouse.  
  // "lineChart": wijlinechart object.  
   var GetPointPositionInLine = function (mousePosition, lineChart) {  
      var left = mousePosition.left, top = mousePosition.top,  
      pointXs = lineChart.pointXs, dataPoints = lineChart.dataPoints,  
      pointXCount = pointXs.length, showPointY;  

      for (var i = 1; i < pointXCount; i++) {  
         var pointX = pointXs[i];  
         if (left < pointX) {  
           var lastPointX, percent, lastdataPoint, dataPoint, pointYsInInLine = [], dValue = 99999;  
            lastPointX = pointXs[i - 1];  
            percent = (left - lastPointX) / (pointX - lastPointX);  
            lastdataPoint = dataPoints[lastPointX];  
            dataPoint = dataPoints[pointX];  

           for (var j = 0; j < dataPoint.length; j++) {  
             pointYsInInLine[j] = lastdataPoint[j].y + (dataPoint[j].y - lastdataPoint[j].y) * percent;  
             if (Math.abs(pointYsInInLine[j] - top) < dValue) {  
               dValue = Math.abs(pointYsInInLine[j] - top);  
               showPointY = pointYsInInLine[j];  
             }  
          }  
       break;  
     }  
   }  
  return { left: left, top: showPointY };  
}

Step 3 The final step is to handle the MouseMove event of the WijLineChart and display the WijTooltip using the data point calculated using GetPointPositionInLine() method. You can use the following code:

 $("#wijlinechart").mousemove(function (e) {  
   //get the bounds of chart  
   var offset = $(this).offset(),  
     left = e.pageX - offset.left,  
     top = e.pageY - offset.top,  
     bounds = lineChart.canvasBounds,  
     xMin = lineChart.axisInfo.x.min,  
     xMax = lineChart.axisInfo.x.max,  
     yMin = lineChart.axisInfo.y[0].min,  
     yMax = lineChart.axisInfo.y[0].max,  
     xVal, yVal;  

     if (left = bounds.endX || top = bounds.endY) {  
       // If mouse move outside the linechart, hide the wijtooltip.  
        if (tooltip.data("wijmo-wijtooltip")) {  
           tooltip.wijtooltip("hide");  
        }  
       return;  
     }  
  // According to the position of mouse, invoke method "GetPointPositionInLine" to get a point which is always in line.  
   var showPosition = GetPointPositionInLine({ left: left, top: top }, lineChart);  
   //calculate the x and y  
   xVal = xMin + (showPosition.left - bounds.startX) / (bounds.endX - bounds.startX)* (xMax - xMin);  
   yVal = yMax - (showPosition.top - bounds.startY) / (bounds.endY - bounds.startY)* (yMax - yMin);  

  //calculate datapoint  
  var target = $(e.target);  
  if (target.data('owner')) {  
      target = target.data('owner');  
  }  
  var data = target.data('wijchartDataObj');  
  if (data) {  
     $('#dataCoord').text('DataPoint X : ' + data.x + ', DataPoint Y :' + data.y);  
  }  
  //set the data to be displayed in tooltip  
  var label = lineChart.options.seriesList[0].label;  
  var x = xVal.toFixed(2);  
  var y = yVal.toFixed(2);  
  //set the properties of tooltip  
   $(tooltip).wijtooltip("option", "content", label + '\\n' + "X :" + x + '\\n' + "Y:" + y + '');  
   //set tooltip position  
    $(tooltip).wijtooltip("showAt", {  
        x: showPosition.left + offset.left,  
        y: showPosition.top + offset.top  
    });  

   $("#xyCoord").text("x : " + Math.round(xVal, 10) + ", y : " + Math.round(yVal, 10));  
   $('#dataCoord').text('');  
});

That's it !! Move the mouse over the line and you can see the corresponding data value. You can download the sample for complete implementation.