how do I access the amchart object , so I can attach event?

[yukiachen]

I want to make the chart clickable, looking at amchart docs, I should be able to do the following , but I don't know how to access chart obj using amcharts-Angular

chart.addListener("clickGraphItem", handleClick);

This plunk http://jsfiddle.net/amcharts2/cv8gg/ is what I want to do using amcharts-angular . do you know how?

[tejasatara]

@yukiachen
"listeners": [{ "event": "clickGraphItem", "method": graphItemClicked }],
is how I am doing it however I am note sure how we can access the validateData method without having access to the graph object.

[SteveShe]

@tejasatara I think this is the answer to your question. I'll copy it here as well.

I just had to figure this out as well and I think the right way to do this is to broadcast the right events to get the chart to redraw. You do this in two steps:

1. Include the $rootScope on whatever controller is in scope when you want to do this.
2. Broadcast the events that you want amCharts to execute.

app.controller('myController', ['$scope', '$rootScope', function ($scope, $rootScope) {
...
$rootScope.$broadcast('amCharts.renderChart');
...
The available events that he is listening for are defined in amChartsDirective.js

     var onAmChartsTriggerChartAnimate = $scope.$on('amCharts.triggerChartAnimate', function (event, id) {
        if (id === $el[0].id || !id) {
          chart.animateAgain();
        }
      });

      var onAmChartsUpdateData = $scope.$on('amCharts.updateData', function (event, data, id) {
        if (id === $el[0].id || !id) {
          chart.dataProvider = data;
          chart.validateData();
        }

      });

      var onAmChartsValidateNow = $scope.$on('amCharts.validateNow', function (event, validateData, skipEvents, id) {
        if (id === $el[0].id || !id) {
          chart.validateNow(validateData === undefined ? true : validateData,
            skipEvents === undefined ? false : skipEvents);
        }
      });

      var onAmChartsRenderChart = $scope.$on('amCharts.renderChart', function (event, amChartOptions, id) {
        if (id === $el[0].id || !id) {
          chart.clear();
          renderChart(amChartOptions);
        }
      });

[tbow]

I having this same issue with no success. Is it possible you could provide a JSFiddle example?

[seetsy]

Hi, to answer the original question, you do have access to the chart object from $scope. Just set a reference to "chart" on the element. For example:

<am-chart id="myFirstChart" options="amChartOptions" chart="chartObj"></am-chart>

Then you can access it in the scope:

$scope.chartObj

Hope that helps.

[obidano]

@seetsy Not working. the chart attributes ....can't access the object => result undefined

[pratiksanglikar]

@obidano
The chart object is initially undefined but it is initialized later.
var refUpdated = false; $scope.$watch('chartObj', function (oldValue, newValue) { if(!refUpdated && $scope.chartObj) { refUpdated = true; // Use the chart object. } });

This code snippet should solve your problem.