How to display content $scope in HighCharts?

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,

Thank you for your answer, I tried as you said, but I have problem: Uncaught SyntaxError: Unexpected token. in y: {Stat.resNotCon} I updated the post — Michael1
check this plnkr.co/edit/2NYCtm4tGTTEFt0ZIydL?p=preview as answered earlier — Deep 3015
this solution do not work for my, I have the graphic code in the $scope.FindStats() function, but the graph is not displayed on the screen — Michael1

Michael1 Michael1 · Accepted Answer · 2017-06-11T14:06:11

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();

 });

How to display content $scope in HighCharts?

2 Answers