Create a pie chart with html and angularjs

Question

Create a pie chart with html and angularjs

Navigation

#1 by (1 votes)

1

I would like to know how to create a graph (eg pie) from the data of an array with html and angularjs. An example would help a lot. Many thanks.

angularjs html5

asked by anonymous 26.08.2017 / 01:03

1 answer

Redirect after receiving response from the server? Ajax Async: true, I need an example

score 1 · Accepted Answer

You can use the library Angular Chart to do what you want. I've put a simple example.

(function() {
  'use strict';

  angular
    .module('app', ['chart.js']);

  angular
    .module('app')
    .controller('GraficoController', GraficoController);

  GraficoController.$inject = [];

  function GraficoController() {
    var vm = this;

    vm.grafico = {};
    vm.grafico.descricoes = ['Carros', 'Motos', 'Lanchas'];
    vm.grafico.valores = [3, 1, 8];
  }
})();

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.js"></script>

<div ng-app="app">
  <div ng-controller="GraficoController as vm" style="height: 50%; width: 50%">
    <canvas id="pie" class="chart chart-pie" chart-data="vm.grafico.valores" chart-labels="vm.grafico.descricoes">
    </canvas>
  </div>
</div>

There are other libraries quoted in this SOen answer (How can i make bar & pie charts in angular js) :

Angular charts using D3 ;

Angular-nvD3 ;

You can use Google Charts in conjunction with AngularJS.