Olá,
Tenho o seguinte problema, eu tenho um select
com um método onchange que eu gostaria que atualizasse um div
. O motivo disso é porque tenho um 3 gráficos feitos em angular-chart.js e (supostamente) quando os valores que a variável do gráfico mudasse, ele deveria atualizar (supostamente), mas ele não atualiza.
Como estou utilizando isso para o IONIC eu não sei se funciona Ajax, e não entendo de jQuery, se for possível utilizá-lo para isso, aceitarei sujestões.
Meu 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>
meu 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'
}]
}
};
})