unable to draw pie chart in angularjs using highcharts
Question
I have a AngularJS App (angularJS 1) and I am trying to create a basic pie chart using the data that I fetch from an API here is my code:
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl" class="wrapper">
This is my Pie Chart:
<br>
<div id="mypie"></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/highcharts/highcharts.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
app.js
angular.module('myApp').controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.fetchData = function () {
var url = 'http://localhost:8080/service/piedata';
$http({
method: 'GET',
url: url
})
.then(
function (response) {
$scope.myData = response.data;
console.log($scope.myData);
var chartConfig = {
chart: {
type: 'pie'
},
title: {
text: 'My Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
data: $scope.myData
}]
};
Highcharts.chart('mypie', chartConfig);
},
function (err) {
console.log('ERROR: ' + JSON.stringify(err));
}
);
};
$scope.fetchData();
}]);
the data in my response is this:
[{ '3': 10 }, { '4': 60 }, { '5': 30 }];
Now, when I am running the app, I can see the page load and the static content and a white area for the pie chart, but I do not see any data load.
What am I doing wrong?
EDIT:
forgot to add the main.js file where I am declaring my angular module.
main.js
angular.module('myApp', ['ui.router','ngMaterial','highcharts-ng'])
//there is some other stuff in this file like filters and config which is irrelevant here.
2 answers
solution1
1 ACCPTED 2018-12-20 04:17:08
A few things...
- the structure of myData needs to be [{ name: "YOUR LABEL NAME", y: 56.33 }, ... ]
- the angular declaration should be angular.module('myApp' , [] )
- you can add $http back again... but ensure that format is as per the highcharts requirement
Working demo below:
angular.module('myApp', []) .controller('myCtrl', ['$scope', function ($scope) { $scope.fetchData = function () { $scope.myData = [{ 'name':'3', y: 10 }, { 'name':'4', y: 60 }, { 'name':'5' ,y: 30 }]; //console.log($scope.myData); var chartConfig = { chart: { type: 'pie' }, title: { text: 'My Pie Chart' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ data: $scope.myData }] }; Highcharts.chart('mypie', chartConfig); }; $scope.fetchData(); }]);
<div ng-app="myApp"> <div ng-controller="myCtrl" class="wrapper"> This is my Pie Chart: <br> <div id="mypie"></div> </div> </div> <link href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.2.0/css/highcharts.css"rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.2.0/highcharts.js"></script>
solution2
1 2018-12-20 06:30:31
Your data points to render Pie chart is not correct with the format of Highchart document. You can see the demo of pie chart here https://www.highcharts.com/demo/pie-basic to know.
The structure of series is:
series: [{
data: [{
name: 'Chrome',
y: 61.41
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
Your API return response with format [{ '3': 10 }, { '4': 60 }, { '5': 30 }]; , so you can fix it on server (change response API meaningful) or change format of response on client (simply):
const dataChart = myData.map(d => {
const name = Object.keys(d)[0];
return { name, y: d[name] }
})
and
series: [{
data: dataChart
}]
You should also declare your angular app angular.module('myApp', []) before using it with angular.module('myApp').controller('myCtrl', ... . I think you've declared it, so I don't think it's an error.
I've created a demo with simple API at http://5c1b231ee193d000132a73a8.mockapi.io/api/53860059 . And it's demo on jsfiddle https://jsfiddle.net/huynhsamha/fd80g7rp/
You can also run it on snippet here:
angular.module('myApp', []).controller('myCtrl', ['$scope', '$http', function ($scope, $http) { const fetchData = function () { const url = 'https://5c1b231ee193d000132a73a8.mockapi.io/api/53860059'; $http({ method: 'GET', url }) .then(function (response) { const myData = response.data; console.log(myData); const dataChart = myData.map(d => { const name = Object.keys(d)[0]; return { name, y: d[name] } }) console.log(dataChart); const chartConfig = { chart: { type: 'pie' }, title: { text: 'My Pie Chart' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ data: dataChart }] }; Highcharts.chart('mypie', chartConfig); }, function (err) { console.log(err); }); }; fetchData(); }]);
<html ng-app="myApp"> <body> <div ng-controller="myCtrl" class="wrapper"> This is my Pie Chart: <br> <div id="mypie"></div> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script> <script src="https://code.highcharts.com/highcharts.src.js"></script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.