HowTo: Retrive X-Y & Data Co-ordinates of Clicked point in Wijmo Charts

One of customer wanted to retrieve the XY and Data coordinates of the point clicked by the end user on Wijmo Chart. As such, there is no direct method like GetXYCoordinates etc. to find the same but still, we can easily achieve the same with the help rich object model of Wijmo Charts. In this blog, we will see how we can get XY coordinates on single click and data coordinates on double click of WijBarChart. To start with, we have a Column Bar chart created with the help of online demo. WijBarChart does not have any click event, so we will handle the click event of the base div tag and will get the bounds of the chart like below:

$("#wijbarchart").click(function (e) {  
   //get the bounds of chart  
   var offset = $(this).offset(),  
   left = e.pageX - offset.left,  
   top = e.pageY - offset.top,  
   lineChart = $(this).data("wijbarchart"),  
   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.startX || left >= bounds.endX || top <= bounds.startY || top >= bounds.endY) {  
      return;  
   }  
   //calculate the x and y  
   xVal = xMin + (left - bounds.startX) / (bounds.endX - bounds.startX) * (xMax - xMin);  
   yVal = yMax - (top - bounds.startY) / (bounds.endY - bounds.startY) * (yMax - yMin);  
   $("#xyCoord").text("x : " + Math.round(xVal, 10) + ", y : " + Math.round(yVal, 10));  
   $('#dataCoord').text('');  
});  

Similarly, we can handle the double click event of the div tag and can find the data coordinates with the help of below code:

$("#wijbarchart").dblclick(function (e) {  
   //get the linechart object  
   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);  
   }  
});  

You may also refer to the sample implementing the same.