How to display content $scope in HighCharts? - angularjs

Question

I'm doing a statistical graph using angularJs and highChartsJS.
Here is the code angularJS:
app.controller("StatController",function($scope,$http,fileUpload,$window, $filter)
{
var ids=location.search; // id ressource
$scope.FindStats=function(){
$http.get(url+"/Stats"+ids)
.success(function(data){
$scope.Stat = data;
console.log(JSON.stringify($scope.Stat));//{"idStat":21,"nbrBoks":7,"nbSection":5,"total":135,"resCon":0.0518519,"resNotCon":0.037037}
}).error(function(err,data){
console.log("error:"
+data);
});
};
$scope.FindStats();
});
Html code:
<div>
{{Stat}}
<!--{"idStat":21,"nbrBoks":7,"nbSection":5,"total":135,"resCon":0.0518519,"resNotCon":0.037037} -->
</div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Result of books',
y: '{Stat.resNotCon}', // error is here
color: '#00c853',
},{
name: 'Result of section',
y:'{Stat.resCon}', //error is here
color: '#b71c1c',
}]
}]
});
</script>
After a test of the code, I have a problem :
Uncaught Error: Highcharts error #14: www.highcharts.com/errors/14
at Object.a.error (http://code.highcharts.com/highcharts.js:10:49)
at k.setData (http://code.highcharts.com/highcharts.js:289:213)
at k.init (http://code.highcharts.com/highcharts.js:282:174)
at a.Chart.initSeries (http://code.highcharts.com/highcharts.js:248:70)
at http://code.highcharts.com/highcharts.js:271:370
at Array.forEach (native)
at a.each (http://code.highcharts.com/highcharts.js:27:360)
at a.Chart.firstRender (http://code.highcharts.com/highcharts.js:271:341)
at a.Chart.init (http://code.highcharts.com/highcharts.js:247:444)
at a.Chart.getArgs (http://code.highcharts.com/highcharts.js:246:307)
So the problem is with the format of the data in highCharts.js:
Highcharts Error #14
String value sent to series.data, expected Number
This happens if you pass in a string as a data point, for example in a
setup like this:
series: [{ data: ["3", "5", "1", "6"] }] Highcharts expects the data
values to be numbers. The most common reason for this is that data is
parsed from CSV or from a XML source, and the implementer forgot to
run parseFloat on the parsed value.
For performance reasons internal type casting is not performed, and
only the first value is checked (since 2.3).
Edit1:
data: [{
name: 'Result of books',
color: '#00c853',
y: {Stat.resNotCon} // error is here
},{
name: 'Result of section',
color: '#b71c1c',
y: {Stat.resCon} //error is here
}]
Error of edit1:
Uncaught SyntaxError: Unexpected token. in y: {Stat.resNotCon}
Edit2:
$scope.FindStats=function(){
$http.get(url+"/Stats"+ids)
.success(function(data){
$scope.Stat = data;
console.log(JSON.stringify($scope.Stat));//{"idStat":21,"nbrBoks":7,"nbSection":5,"total":135,"resCon":0.0518519,"resNotCon":0.037037}
}).error(function(err,data){
console.log("error:"
+data);
});
};
$scope.FindStats();
console.log("$scope "+$scope.Stat); //it's empty
var Stat=$scope.Stat;
console.log("after "+Stat); // it's empty
How to format data for highCharts.JS?
Thank you,

Answer 1

The problem is resolved through the following code:
var app = angular.module('myApp',[]);
app.controller("StatController",function($scope,$http,$window, $filter,$RootScope)
{
$RootScope.FindStats = function() {
$scope.Stat = {
"idStat": 21,
"nbrBoks": 7,
"nbSection": 5,
"total": 135,
"resCon": 0.0518519,
"resNotCon": 0.037037
};
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Result of books',
y: Stat.resNotCon,
color: '#00c853',
},{
name: 'Result of section',
y:Stat.resCon,
color: '#b71c1c',
}]
}]
});
}
$scope.FindStats();
});

Answer 2

You just have to store the value of Stat in variable and not bind it to scope.
var app = angular.module('myApp',[]);
app.controller("StatController",function($scope,$http,$window, $filter)
{
$scope.FindStats = function() {
$scope.Stat = {
"idStat": 21,
"nbrBoks": 7,
"nbSection": 5,
"total": 135,
"resCon": 0.0518519,
"resNotCon": 0.037037
};
}
$scope.FindStats();
var Stat = $scope.Stat;
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Result of books',
y: Stat.resNotCon, // error is here
color: '#00c853',
},{
name: 'Result of section',
y:Stat.resCon, //error is here
color: '#b71c1c',
}]
}]
});
});
Working Example
http://jsfiddle.net/ADukg/11648/