How can I get starting point of X & Y of a bar in Bar Graph

Question

I have a bar graph in which I am calling a javascript function to do some operation on mouse click of the bar, I want to get starting point of X & Y axis of the same bar on which I clicked, Can I do this in fusion chart, if yes how?

I highlighted with yellow color, I need these positions according to screen.

Do you have a live example? Basically, you can get position and dimensions of html block with `event.target.getBoundingRect()` method on click. So all you need is to get a right element. — extempl, Oct 09 '18 at 07:26
It looks like fusion charts use SVG, and it already has a position (with need in some static shift, perhaps) in attributes. Just read them: https://dzwonsemrish7.cloudfront.net/items/3m2m2h2z2y3z462M3y0h/Image%202018-10-09%20at%2010.28.40.png?v=653798d3 — extempl, Oct 09 '18 at 07:30
I got mouse clicked position, but when mouse click occur at start i can have right positions only. — Imran Qamer, Oct 09 '18 at 07:48
Can you set a live example on a jsbin or somewhere like that? — extempl, Oct 09 '18 at 07:52

score 3 · Accepted Answer · answered Oct 29 '18 at 08:28

Yes, you can get the x and y co-ordinates with respect to the chart dimension when you click on the bar plots.

You need to use the FusionCharts "dataPlotClick" event API that is triggered when you click anywhere on the plots. Then, in the event function parameter you can use the predefined attributes "chartX" and "chartY" to fetch the x and y co-ordinate of the clicked point.

Please check the documentation link for reference : https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events#dataplotclick-261

Also find a sample fiddle for reference : https://jsfiddle.net/mf1qh9ku/1/

FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
  "chart": {
    "caption": "Monthly revenue for last year",
    "subCaption": "Harry's SuperMart",
    "xAxisName": "Month",
    "yAxisName": "Revenue (In USD)",
    "numberPrefix": "$",
    "paletteColors": "#0075c2",
    "bgColor": "#ffffff",
    "borderAlpha": "20",
    "canvasBorderAlpha": "0",
    "usePlotGradientColor": "0",
    "plotBorderAlpha": "10",
    "placevaluesInside": "1",
    "rotatevalues": "1",
    "valueFontColor": "#ffffff",
    "showXAxisLine": "1",
    "xAxisLineColor": "#999999",
    "divlineColor": "#999999",
    "divLineIsDashed": "1",
    "showAlternateHGridColor": "0",
    "subcaptionFontBold": "0",
    "subcaptionFontSize": "14"
  },
  "data": [{
    "label": "Jan",
    "value": "420000"
  }, {
    "label": "Feb",
    "value": "810000"
  }, {
    "label": "Mar",
    "value": "720000"
  }, {
    "label": "Apr",
    "value": "550000"
  }, {
    "label": "May",
    "value": "910000"
  }, {
    "label": "Jun",
    "value": "510000"
  }, {
    "label": "Jul",
    "value": "680000"
  }, {
    "label": "Aug",
    "value": "620000"
  }, {
    "label": "Sep",
    "value": "610000"
  }, {
    "label": "Oct",
    "value": "490000"
  }, {
    "label": "Nov",
    "value": "900000"
  }, {
    "label": "Dec",
    "value": "730000"
  }]
},
"events": {
  "dataPlotClick": function(eventObj, dataObj) {
    alert("X : " + eventObj.data.chartX + ", Y : " + eventObj.data.chartY);
  }
}
}).render();
});

How can I get starting point of X & Y of a bar in Bar Graph

1 Answers1