Update div with Javascript or Angularjs - for IONIC

Question

Hello,

I have the following problem, I have a select with an onchange method I would like you to update a div. The reason for this is because I have a 3 graphics made in angular-Chart.js and (supposedly) when the values that the graph variable changes, it should update (supposedly), but it does not update.

As I am using this for IONIC I do not know if it works Ajax, and I do not understand jQuery, if it is possible to use it for this, I will accept dirt.

My HTML:

<select ng-controller="chartController" ng-options="city.name for city in selectedState.cities"
        ng-model="selectedCity" ng-change="updateGrafico()">
    <option value="">Selecionar</option>
</select>
//div com um gráfico para exemplo
<div id="charts" class="item item-divider" ng-controller="chartController">
    Indices de Excesso e Deficiência:
    <div class="item item-text-warp" >
      <canvas id="base" class="chart-bar" chart-data="dataDefExce"
      chart-labels="labels" chart-colors="colors"
      chart-dataset-override="datasetOverrideDuplo">
      </canvas>
    </div>
</div>

my controller:

.controller('chartController', function($http, $scope) {
  $scope.colors = ['#000000', '#FF0000', '#00FFFF'];
  $scope.labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
  $scope.selectedCity = {id:'1'};
  var ret;


  $scope.updateGrafico = function(){
    var idCidade = $scope.selectedCity.id;
    console.log(idCidade);
    $http
    .get(myrepository)
    .success(function(response) {
      $scope.cityOBJ = response;
      popularGrafico();
    });
  }

  function popularGrafico() {
    this.ret = $scope.cityOBJ[0];
    $scope.dataEvapo = [this.ret.info.etppri];
    $scope.dataDefExce = [this.ret.info.bh.ex, this.ret.info.bh.def];
    $scope.dataPrecip = [this.ret.info.bh.pr];
    console.log(this.ret);
  }
  $scope.datasetOverrideDuplo = [{
    label: "Bar chart",
    borderWidth: 1,
    type: 'bar'
  }, {
    label: "Line chart",
    borderWidth: 3,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    type: 'line'
  }];

  $scope.datasetOverrideGraficoUnico = [{
    yAxisID: 'y-axis-1'
  }, {
    yAxisID: 'y-axis-2'
  }];
  $scope.options = {
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left'
      }]
    }
  };
})

Answer 1

Come on,

First you’re actually instilling two controllers separate from your chartController, see:

<select ng-controller="chartController" ...">
<div id="charts" ng-controller="chartController">...

You need to understand that a controller controls only the elements that are within its context, that is, it only controls what is inside the element that you put the ng-controller.

This strange you use ng-controller with Ionic, because it already comes "native" with ui-router and with it vc defines the controller for the Rote view in an "explicit" way, through the route configuration.

To work that way using the ng-controller you must encompass all elements of that controller’s context within it, try the following:

<section ng-controller="chartController">
    <select ...>
    <div id="charts" ...>
</section>

Now just a tip on the angular-Charts, beware!

I’ve used it in some projects and had problems with updating it, because it keeps the old canvas, the last generated values, under the new, ai eventually if you do an event over or click on the space that once had a bar, it will "blink" the old chart on the new. I solved this by making an abstraction over the angular-Harts, it was horrible to do that, but it was a matter of time. I suggest you study using the lib that angular-Charts works, the Chart.js.

A lib that I think is worth studying is also the Chartist.js.

And for your kind of "basic" doubt, I think it’s good that you do a review on both Angular and Ionic.