Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active March 16, 2017 19:07
Show Gist options
  • Save aaizemberg/45aea54d48c189d1a697f051fa3096b6 to your computer and use it in GitHub Desktop.
Save aaizemberg/45aea54d48c189d1a697f051fa3096b6 to your computer and use it in GitHub Desktop.
Download ZIP
bar chart using CharJS & AngularJS
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment