AngularJS - Update Chart Data from Input

Question

I’m new to angularJS and I’m having some issues updating chart data from an input using some calculations. I have an main html file and an app.js file with my controller.

I’m looking to:

• Have the user input a number value
• Have some type of calculation (e.g. input value*5)
• Then update an index in the data array

Example: Looking at the snippets provided below. I'd like to have the user input a number value, have some type of calculation happen, and have the total replace ser.data[4] - Something like (userInput*5). So if the user inputs 5, ser.data[4] would be 25, if they entered 4 ser.data[4] would be 20, etc.

I was able to return a value, after some calculations, by adding a function to a specific index – that only works when the page is first loaded. Since I have the input ng-model tied to the index, when the input changes, it just overrides the function and it is no longer being used.

Sorry if I did a poor job of explaining – let me know and I’ll try to clarify.

Thanks in advance for the help!

--moe

(input in my html file)

     <div class="row-fluid" ng-repeat="ser in chartSeries" >
          <div class="span12 well">
              <div class="row-fluid">Title <input type="number" ng-model="ser.data[4]" ></div>       
           </div>
      </div>

(code from my app.js file)

'use strict';

 var myapp = angular.module('myapp', ["highcharts-ng"]);
  
myapp.controller('myctrl', function ($scope) {

  $scope.chartSeries = [
    {"name": "Compounded Annually", data: [1, 2, 3, 4, 5]},
	
  
  ];

QUESTION UPDATE

Thanks for the help! Still a little fuzzy for me. I'll try to better explain by adding a mockup scenario (I understand if my initial question didn't make sense.) I'm building a savings calc, but I mocked up something else that's a bit more slim.

The chart in the pic would be pulling data from the chartSeries data. Let's say the user enters 10 for the daily rental charge and 30 for the amount of rental day's, I would be trying to update the "rental car" data to then reflect 300 (or the daily rental charge multiplied by the rental days.) So for example let's say that the "rental car" data is pulling data from the first index in my chartSeries data array in the app.js.

Does this help? Thanks again for your time!

Answer 1

You need to watch the input model:

$scope.$watch('chartSeries[0].data', function (newVal, oldVal) {
  // You can do a calculation with the new value.
  console.log(newVal[4]); // 5
}, true);

true means to deep watch. If the chartSeries array will have more than one value, you also could watch the whole series: $scope.$watch('chartSeries', fn);

I hope you get the point. Please update your question if this answer is in the wrong direction, because I do not totally understand what your want to do.