Solved

Implmenting Pie Charts in Angularjs

Posted on 2016-11-01
3
43 Views
Last Modified: 2016-11-07
How do you implement pie charts in angularjs.
0
Comment
Question by:Member_2_7967608
  • 2
3 Comments
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41869705
You need a library to do this AngularJS does not natively support Pie Charts

A Google search should produce results on this.

I had a look at this one https://jtblin.github.io/angular-chart.js/

It appears to be well supported, is built for Angular and includes examples on how to create a Pie Chart.

From their sample page
HTML
<canvas id="pie" class="chart chart-pie"
  chart-data="data" chart-labels="labels" chart-options="options">
</canvas> 

Open in new window

JavaScript
angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});

Open in new window

0
 

Author Comment

by:Member_2_7967608
ID: 41876939
Thanks
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41877009
You are welcome.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AngularJS Pagination 6 91
angularls and plnkr 14 47
Angular- another way of coding hide and display 3 60
Convert Silverlight ERP To Angularjs,HTML5 3 61
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question