Old school D3 from simpler times

All examples By author By category About

aaizemberg

Full window Github gist

bar chart using CharJS & AngularJS

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
</head>
<body>

<div ng-controller="BarCtrl">
    <canvas id="chart" class="chart chart-horizontal-bar" chart-data="data" chart-labels="labels"></canvas>
  </div>

<script>
  var data = [{"provincia":"Buenos Aires","poblacion":15625084},
              {"provincia":"Córdoba","poblacion":3308876},
              {"provincia":"Santa Fe","poblacion":3194537},
              {"provincia":"Ciudad Autónoma de Buenos Aires","poblacion":2890151},
              {"provincia":"Mendoza","poblacion":1738929},
              {"provincia":"Tucumán","poblacion":1448188},
              {"provincia":"Entre Ríos","poblacion":1235994},
              {"provincia":"Salta","poblacion":1214441},
              {"provincia":"Misiones","poblacion":1101593},
              {"provincia":"Chaco","poblacion":1055259},
              {"provincia":"Corrientes","poblacion":992595},
              {"provincia":"Santiago del Estero","poblacion":874006},
              {"provincia":"San Juan","poblacion":681055},
              {"provincia":"Jujuy","poblacion":673307},
              {"provincia":"Río Negro","poblacion":638645},
              {"provincia":"Neuquén","poblacion":551266},
              {"provincia":"Formosa","poblacion":530162},
              {"provincia":"Chubut","poblacion":509108},
              {"provincia":"San Luis","poblacion":432310},
              {"provincia":"Catamarca","poblacion":367828},
              {"provincia":"La Rioja","poblacion":333642},
              {"provincia":"La Pampa","poblacion":318951},
              {"provincia":"Santa Cruz","poblacion":273964},
              {"provincia":"Tierra del Fuego","poblacion":127205}];

var pob = data.map(function(d) {
  	return d.poblacion;
  });

var lab = data.map(function(d) {
  	return d.provincia;
  });

angular.module("myApp", ["chart.js"]).controller("BarCtrl", function ($scope) {
    $scope.labels = lab;
    $scope.series = ['2010'];
    $scope.data = [pob];
  });
  </script>  
  
</body>
</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js to https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js

https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js