Passing Angular scope members to axis and series members.

Daniel Przybylski posted over 7 years ago

In the following HTML using the IgniteUI angular directives, if I try to pass a scope value to a series title ( title="scopeValue" ) it just give me the literal 'scopeValue' in the rendering on the web page for the series title. If I use the same scope variable mustached {{}} then I get nothing. The data-source works fine using a scope value.

I know I can work around this (and have) for other thing by just using jQuery in my angular controller, but we're trying to use Angular. Also, I would like to pass a scope variable which is set to a function() for formatting the series axis title or tool-tip-template.

Any one have any ideas, and thank in advance.

            data-source="delinquencyRatios60Plus"
         window-response="immediate"
         width="100%"
         height="500px">

             type="categoryX"
        label="Column">

             type="numericY"
        minimumvalue="0">



            type="column"
       is-highlighting-enabled="true"
       is-transition-in-enabled="true"
       x-axis="TypeAxis"
       y-axis="ValueAxis"
       title="scopeValue"
       show-tooltip="true"
       value-member-path="MeasureValue">

16310

Offline Hristo Anastasov posted over 7 years ago

Hi Daniel,

I have tried to reproduce the issue with no success. My test samples binds the axis and series title attribute just fine - you can have a look at http://jsfiddle.net/zbkfz9j4/9/

Please provide a sample reproducing the issue you describe that we can investigate.
Cancel
Reply

Cancel
60

Daniel Przybylski posted over 7 years ago in reply to Hristo Anastasov

Thank you, just seeing that I need the mustache operator is help enough. But perhaps the issue is that I'm setting it in a promise resolution. I'm able to set the data in the promise resolution, but it doesn't work for the title.

Please see the updated jsfiddle:

http://jsfiddle.net/Alfetta159/zbkfz9j4/12/
Cancel
Reply

Cancel
16310

Offline Hristo Anastasov posted over 7 years ago in reply to Daniel Przybylski

Hi,

at the time you set $scope.title and $scope.value grid is already initialized. For some reason setting a value to the dataChart causes the grid to refresh the value of its dataSource option, which is not the case for the axes/series object property.

You can manually change the axes/series object via the chart api as follows:

    getData($q).then(function(data) {
      $scope.title = "Post Test name";
      var newAxis = $("#datachart1").igDataChart("option", "axes")[1];
     newAxis.title = $scope.title;
      $("#datachart1").igDataChart("option", "axes", [newAxis]);
      $scope.dataChart = data;
    });

Please let me know if this would work for you.
Cancel
Reply

Cancel
60

Daniel Przybylski posted over 7 years ago in reply to Hristo Anastasov

Yes, that's a workaround that I'm already using, but it's looking to me like IgniteUI is not ready for AngularJS.
Cancel
Reply

Cancel
16310

Offline Hristo Anastasov posted over 7 years ago in reply to Daniel Przybylski

Hi Daniel,

Currently the two day data-binding with scope is implemented only for the data-source attribute. It is not supported for declarative syntax that is used for defining the axis/series for example. Moreover there are properties that do not have native setters. As mentioned it is recommended to add a watch to the scope variable and update the corresponding property via the API.

Please let me know if you have further questions.
Cancel
Reply

Cancel