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

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?

enter image description here

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

Answers:

Answer

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();
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.