I'm using JHispter, angularJS and xt fusion chart for an home data chart application
The behavior I want to implement is pretty basic: reloading data according to a change in an option list in a page already displayed
So I have put a method in the detail controller, which is calling a method from the service This method calls a REST resource which itself maps the data from the entity
The data I want to refresh is not from the database, it's computed.
Regarding the logs, the data are really computed, but it's not affecting the scope. I tend to believe that the data is computed after, or the object is not returned
I'm beginner in AngularJS and I have made a lot of redoing in those code parts, so please excuse the dirty code and the fact that I'm surely not making this right
Controller:
(function() {
'use strict';
angular
.module('dashboardsApp')
.controller('ChartDetailController', ChartDetailController);
ChartDetailController.$inject = ['$scope', '$rootScope', '$stateParams', 'entity', 'Chart', 'Client', 'Device', 'Selecteur', 'ChartParam', 'TypeChart'];
function ChartDetailController($scope, $rootScope, $stateParams, entity, Chart, Client, Device, Selecteur, ChartParam, TypeChart) {
var vm = this;
vm.chart = entity;
console.log ("!!! entity.id : " + entity.id);
vm.devices = Chart.getDevices({id : entity.id});
$scope.periodicites = {
"Heure" : "HEURE" ,
"Jour" : "JOURNEE" ,
"Semaine" : "SEMAINE" ,
"Mois" : "MOIS" ,
"Année" : "ANNEE" ,
"Temps réel" : "TEMPSREEL"
};
$scope.changePeriodicite = function () {
entity = Chart.refresh({id : entity.id, pitch: $scope.periodicite});
entity = $scope.vm.chart ;
console.log("dataset : " + entity.dataset );
console.log("id : " + entity.id );
console.log("jsonparam : " + entity.jsonparam );
console.log("chart:entity.attrs" + entity.attrs );
FusionCharts.render({type: vm.chart.nameTypeChart, renderAt:"chartobject-1", chart:entity.attrs, dataSource : entity.dataset });
}
var unsubscribe = $rootScope.$on('dashboardsApp:chartUpdate', function(event, result) {
vm.chart = result;
});
$scope.$on('$destroy', unsubscribe);
}
})();
Service:
(function() {
'use strict';
angular
.module('dashboardsApp')
.factory('Chart', Chart);
Chart.$inject = ['$resource'];
function Chart ($resource) {
var resourceUrl = 'api/charts/:id/:subResource/:pitch';
return $resource(resourceUrl, {}, {
'query': { method: 'GET', isArray: true},
'get': {
method: 'GET',
transformResponse: function (data) {
if (data) {
data = angular.fromJson(data);
}
return data;
}
},
'update': { method:'PUT' },
'getDevices' : { method:'GET', isArray: true, params: { subResource: 'devices'}},
'refresh' : {
method:'GET' ,
transformResponse: function (data) {
if (data) {
data = angular.fromJson(data);
}
return data;
},
params: { subResource: 'changePitch', pitch:'pitch'}}
});
}
})();
REST Resource
/**
* GET /charts/:id.changePitch : change chart Pitch and get the datas accordingly.
*
* @param id the id of the chartDTO to retrieve
* @return the ResponseEntity with status 200 (OK) and with body the chartDTO, or with status 404 (Not Found)
*/
@RequestMapping(value = "/charts/{id}/changePitch/{pitch}",
method = RequestMethod.GET,
produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public ResponseEntity<ChartDTO> changeChartPitch(@PathVariable Long id, @PathVariable String pitch) {
log.debug("REST request to chnage Chart pitch : {}", id);
Chart chart = chartRepository.findOne(id);
ChartDTO chartDTO = chartMapper.chartToChartDTO(chart);
chartDTO.setCategories(pitch);
chartDTO.setDataset(chartDTO.getDataset());
//chartDTO = chartMapper.chartToChartDTO(chart);
log.info("Resource dataset :" + chartDTO.getDataset());
log.info("Resource JSONParam :" + chartDTO.getJSONParam());
return Optional.ofNullable(chartDTO)
.map(result -> new ResponseEntity<>(
result,
HttpStatus.OK))
.orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND));
}
DTO
public String getDataset() {
String returnString = "[{\"data\": []}]";
if (this.categories != null ) {
returnString = "[{\"data\": [";
for (String s:this.categories) {
returnString += "{label: \"" + s + "\", value: '" + new Random().nextInt(1000) + "'},";
}
returnString += returnString.substring(0, returnString.length()-1) + "]} ] ";
log.debug ("DTO Dataset :" + returnString);
} else {
log.debug ("Categories' null");
log.debug ("DTO Dataset :" + returnString);
}
return returnString;
}
HTML Parts
<tr>
<td>
<table>
<tr>
<td>
<select ng-model="periodicite" ng-options="x for (x, y) in periodicites" ng-change="changePeriodicite()"></select>
</td>
</tr>
<tr>
<td>
<md-datepicker ng-model="myDatedeb" md-placeholder="Enter date"></md-datepicker>
</td>
</tr>
<tr>
<td>
<md-datepicker ng-model="myDatefin" md-placeholder="Enter date"></md-datepicker>
</td>
</tr>
</table>
</td>
<td>
<div fusioncharts
width="600"
height="400"
type="{{vm.chart.nameTypeChart}}"
chart="{{vm.chart.jsonparam}}"
dataset="{{vm.chart.dataset}}" >
</div>
</td>
</tr>
logs:
2016-11-09 12:03:27.345 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect : Enter: com.domoticsystem.dashboards.web.rest.ChartResource.changeChartPitch() with argument[s] = [2, HEURE]
2016-11-09 12:03:27.345 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.ChartResource : REST request to chnage Chart pitch : 2
Hibernate: select chart0_.id as id1_0_0_, chart0_.chart_id as chart_id2_0_0_, chart0_.client_id as client_i5_0_0_, chart0_.json_data_chart as json_dat3_0_0_, chart0_.nom_chart as nom_char4_0_0_, chart0_.type_chart_id as type_cha6_0_0_, client1_.id as id1_2_1_, client1_.client_adress as client_a2_2_1_, client1_.client_city as client_c3_2_1_, client1_.client_id as client_i4_2_1_, client1_.client_name as client_n5_2_1_, client1_.client_zip as client_z6_2_1_, selections2_.chart_id as chart_id6_0_2_, selections2_.id as id1_1_2_, selections2_.id as id1_1_3_, selections2_.chart_id as chart_id6_1_3_, selections2_.default_value as default_2_1_3_, selections2_.name as name3_1_3_, selections2_.type as type4_1_3_, selections2_.type_chart_id as type_cha7_1_3_, selections2_.value as value5_1_3_, typechart3_.id as id1_15_4_, typechart3_.type_name_chart as type_nam2_15_4_, typechart4_.id as id1_15_5_, typechart4_.type_name_chart as type_nam2_15_5_ from chart chart0_ left outer join client client1_ on chart0_.client_id=client1_.id left outer join chart_param selections2_ on chart0_.id=selections2_.chart_id left outer join type_chart typechart3_ on selections2_.type_chart_id=typechart3_.id left outer join type_chart typechart4_ on chart0_.type_chart_id=typechart4_.id where chart0_.id=?
2016-11-09 12:03:27.391 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect : Enter: com.domoticsystem.dashboards.web.rest.mapper.ChartMapper.chartToChartDTO() with argument[s] = [Chart{id=2, chartId='2', nomChart='Chart numéro 2', jsonDataChart='null'}]
2016-11-09 12:03:27.391 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect : Exit: com.domoticsystem.dashboards.web.rest.mapper.ChartMapper.chartToChartDTO() with result = ChartDTO{id=2, chartId='2', nomChart='Chart numéro 2', jsonDataChart='null'}
2016-11-09 12:03:27.406 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO : DTO Dataset :[{"data": [{label: "0", value: '1'},{label: "10", value: '348'},{label: "20", value: '309'},{label: "30", value: '98'},{label: "40", value: '637'},{label: "50", value: '86'},[{"data": [{label: "0", value: '1'},{label: "10", value: '348'},{label: "20", value: '309'},{label: "30", value: '98'},{label: "40", value: '637'},{label: "50", value: '86'}]} ]
2016-11-09 12:03:27.407 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO : DTO Dataset :[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'},[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'}]} ]
2016-11-09 12:03:27.407 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.ChartResource : Resource dataset :[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'},[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'}]} ]
2016-11-09 12:03:27.407 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO : DTO jsonParam : [ {"showvalues" : "0"},{"showcanvasborder" : "0"},{"canvasborderalpha" : "0"},{"canvasbordercolor" : "CCCCCC"},{"canvasborderthickness" : "1"},{"yaxismaxvalue" : "30000"},{"captionpadding" : "30"},{"linethickness" : "3"},{"yaxisvaluespadding" : "15"},{"legendshadow" : "0"},{"legendborderalpha" : "0"},{"palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e"},{"showborder" : "0"},{"subCaption" : "Batiment du Port"},{"numberPrefix" : "kWh"},{"bgcolor" : "FFFFFF"},{"showalternatehgridcolor" : "0"},{"caption" : "Consommation Eclectrique"},{"divlinecolor" : "CCCCCC"},{"showvalues" : "0"},
2016-11-09 12:03:27.407 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.ChartResource : Resource JSONParam : [ {"showvalues" : "0"},{"showcanvasborder" : "0"},{"canvasborderalpha" : "0"},{"canvasbordercolor" : "CCCCCC"},{"canvasborderthickness" : "1"},{"yaxismaxvalue" : "30000"},{"captionpadding" : "30"},{"linethickness" : "3"},{"yaxisvaluespadding" : "15"},{"legendshadow" : "0"},{"legendborderalpha" : "0"},{"palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e"},{"showborder" : "0"},{"subCaption" : "Batiment du Port"},{"numberPrefix" : "kWh"},{"bgcolor" : "FFFFFF"},{"showalternatehgridcolor" : "0"},{"caption" : "Consommation Eclectrique"},{"divlinecolor" : "CCCCCC"},{"showvalues" : "0"}]
2016-11-09 12:03:27.407 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect : Exit: com.domoticsystem.dashboards.web.rest.ChartResource.changeChartPitch() with result = <200 OK,ChartDTO{id=2, chartId='2', nomChart='Chart numéro 2', jsonDataChart='null'},{}>
2016-11-09 12:03:27.409 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO : DTO Dataset :[{"data": [{label: "0", value: '13'},{label: "10", value: '179'},{label: "20", value: '751'},{label: "30", value: '715'},{label: "40", value: '707'},{label: "50", value: '641'},[{"data": [{label: "0", value: '13'},{label: "10", value: '179'},{label: "20", value: '751'},{label: "30", value: '715'},{label: "40", value: '707'},{label: "50", value: '641'}]} ]
2016-11-09 12:03:27.410 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO : DTO jsonParam : [ {"showvalues" : "0"},{"showcanvasborder" : "0"},{"canvasborderalpha" : "0"},{"canvasbordercolor" : "CCCCCC"},{"canvasborderthickness" : "1"},{"yaxismaxvalue" : "30000"},{"captionpadding" : "30"},{"linethickness" : "3"},{"yaxisvaluespadding" : "15"},{"legendshadow" : "0"},{"legendborderalpha" : "0"},{"palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e"},{"showborder" : "0"},{"subCaption" : "Batiment du Port"},{"numberPrefix" : "kWh"},{"bgcolor" : "FFFFFF"},{"showalternatehgridcolor" : "0"},{"caption" : "Consommation Eclectrique"},{"divlinecolor" : "CCCCCC"},{"showvalues" : "0"},
2016-11-09 12:24:48.146 WARN 4110 --- [scheduler][T#1]] org.elasticsearch.monitor.jvm : [Eros] [gc][young][8492][20] duration [1.6s], collections [1]/[2.4s], total [1.6s]/[2.9s], memory [538.8mb]->[134.4mb]/[1.2gb], all_pools {[young] [403.5mb]->[1.7mb]/[408mb]}{[survivor] [14.3mb]->[3.4mb]/[40.5mb]}{[old] [121mb]->[129.3mb]/[981.5mb]}
Your changePeriodicite function needs to update the bound chart object (and render the chart) within the success callback of Chart.refresh:
$scope.changePeriodicite = function () {
Chart.refresh({id : entity.id, pitch: $scope.periodicite}, onSuccess, onError);
function onSuccess(result) {
// success callback, `result` is the retrieved chart
vm.chart = result
FusionCharts.render({type: vm.chart.nameTypeChart, renderAt: "chartobject-1", chart: vm.chart.attrs, dataSource: vm.chart.dataset});
}
function onError(error) {
// handle error here
}
}
Another option, if you prefer promises:
$scope.changePeriodicite = function () {
return Chart.refresh({id : entity.id, pitch: $scope.periodicite}).$promise.then(onSuccess, onError);
function onSuccess(result) {
// success callback, `result` is the retrieved chart
vm.chart = result
FusionCharts.render({type: vm.chart.nameTypeChart, renderAt: "chartobject-1", chart: vm.chart.attrs, dataSource: vm.chart.dataset});
}
function onError(error) {
// handle error here
}
}