I transmit data for plotting using the drop-down list. The code is written in jQuery. How to rewrite this code in Angular 1.5?

An example and all the code here https://plnkr.co/edit/NR7GKcyqdjJKBfWB5fTG?p=preview

html

<select id="test"> <option isabled selected value="">Choose options</option> <option value="kpi_2">Kpi 2</option> <option value="kpi_3">Kpi 3</option>

js

 var dataFee = { labels: [], datasets: [{ label: " ", data: [18, 16, 125, 65, 100, 71, 12], .... }], }; var ctx = $("#myChartLine").get(0).getContext("2d"); var myLineChart = new Chart(ctx, { type: "line", data: dataFee, }); $('#test').change(function(){ const val = $(this).val(); switch (val){ case 'kpi_2': var secondData = { label: " ", data: [1, 12, 115, 55, 90, 80, 22], ..... }; dataFee.datasets.push(secondData); myLineChart.update(); break; ... } });
  • Show how far advanced on angular ? - Stepan Kasyanenko
  • I think that has not progressed. Here I have a stupor. I don’t know how to rewrite this function $ ('# test'). Change (function () {const val = $ (this) .val (); - alexeyll
  • Here I started to do it on angular plnkr.co/edit/McPMClaYkhaISXJw8UjY?p=preview I think, probably, something like this should be the function createChart () {$ scope.data = []; for (var i = 0; i <3; i ++) {$ scope.data.push ([{}]); }} - alexeyll

1 answer 1

You were on the right track and almost done.

See the finished example.

An example on plunker .

 angular.module('app', ['chart.js']) .controller('LineCtrl', function() { var vm = this; vm.labelsMulty = ['w01', 'w02', 'w03', 'w04', 'w05', 'w06', 'w07']; vm.seriesMulty = []; vm.dataMulty = []; vm.kpis = [{ name: 'kpi 1', value: 'kpi_1', data: [12, 45, 77, 11, 75, 57, 50] }, { name: 'kpi 2', value: 'kpi_2', data: [75, 57, 75, 57, 8, 54, 54] }, { name: 'kpi 3', value: 'kpi_3', data: [54, 35, 35, 53, 24, 54, 75] }]; vm.change = change; function change() { if (!vm.myKpi) return; if (vm.seriesMulty.indexOf(vm.myKpi.name) > -1) return; vm.dataMulty.push(vm.myKpi.data); vm.seriesMulty.push(vm.myKpi.name); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> <div ng-app="app"> <div ng-controller="LineCtrl as vm"> <div> <canvas class="chart chart-line" chart-data="vm.dataMulty" chart-labels="vm.labelsMulty" chart-series="vm.seriesMulty"> </canvas> </div> <select ng-model="vm.myKpi" ng-options="kpi as kpi.name for kpi in vm.kpis" ng-change="vm.change()"> <option value="">-- choose option --</option> </select> </div> </div>

  • Thanks for the help!) - alexeyll