Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added basic chart

  • Loading branch information...
commit 10daa6e85fd7eaaae7845085248bac871345b801 1 parent 9a64156
Gabriel Florit authored
11 census/dashboard.html
View
@@ -0,0 +1,11 @@
+<html>
+ <head>
+ <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
+ <script src="https://raw.github.com/ireapps/census/master/tools/js/ire_census.js"></script>
+ <script src='js/highcharts.js'></script>
+ <script src='js/profile.js'></script>
+ </head>
+ <body>
+ <div id='chart'></div>
+ </body>
+</html>
239 census/js/highcharts.js
View
239 additions, 0 deletions not shown
102 census/js/profile.js
View
@@ -0,0 +1,102 @@
+$(function(){
+
+ function render_profile(data) {
+ $("#name").html(data.metadata.NAME);
+ show_gender_breakdown(data);
+ return data;
+ }
+
+ function show_gender_breakdown(data) {
+ breakdown = age_breakdown(data, 'PCT012', '2010');
+ render_age_chart(breakdown);
+ }
+
+ function make_padded_key(table,fieldnum) {
+ fieldnum += ""
+ while (fieldnum.length < 3) {
+ fieldnum = "0" + fieldnum;
+ }
+ return table + fieldnum;
+ }
+
+ function age_breakdown(data,group,year) {
+ if (!year) { year = '2010' }
+ // male = PCT012003..102
+ // female = PCT12107..206
+ breakdown = {'male': [], 'female': [], 'total': [] };
+ breakdown.place = data.metadata.NAME;
+ i = 0;
+ for (var i = 0; i < 100; i++ ){
+ breakdown['male'][i] = Number(ire_census.sf1val(data,make_padded_key(group,i+3),year))
+ breakdown['female'][i] = Number(ire_census.sf1val(data,make_padded_key(group,i+107),year))
+ breakdown['total'][i] = parseInt(breakdown['male'][i]) + parseInt(breakdown['female'][i])
+
+ }
+ return breakdown;
+ }
+
+ // breakdown will be an array of objects
+ // each object has female, male, total, place
+ function render_age_chart(breakdown) {
+
+ var series = [
+ {name:'female', data:breakdown.female},
+ {name:'male', data:breakdown.male}];
+
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'chart',
+ type: 'line',
+ marginRight: 130,
+ marginBottom: 25
+ },
+ plotOptions: {
+ line: {
+ dataLabels: {
+ // enabled: true
+ },
+ shadow: false,
+ lineWidth: 3,
+ marker: {
+ enabled: false,
+ radius: 3,
+ lineWidth: 0,
+ symbol: 'circle'
+ }
+ }
+ },
+ title: {
+ text: 'Population by Gender'
+ },
+ subtitle: {
+ text: ''
+ },
+ yAxis: {
+ title: {
+ text: ''
+ },
+ plotLines: [{
+ value: 0,
+ width: 1,
+ color: '#808080'
+ }]
+ },
+ tooltip: {
+ },
+ legend: {
+ },
+ series: series
+ });
+
+
+
+ }
+
+ window.age_breakdown = age_breakdown;
+
+ $(document).ready(function() {
+ data = ire_census.do_with_sf1_data('1714000',render_profile);
+ $("#geoid-form").submit(function() { ire_census.do_with_sf1_data($("#geoid").val(),render_profile); return false; })
+ });
+
+});
60 census/js/script.js
View
@@ -0,0 +1,60 @@
+var chart;
+$(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'chart',
+ type: 'line',
+ marginRight: 130,
+ marginBottom: 25
+ },
+ title: {
+ text: 'Monthly Average Temperature',
+ x: -20 //center
+ },
+ subtitle: {
+ text: 'Source: WorldClimate.com',
+ x: -20
+ },
+ xAxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ },
+ yAxis: {
+ title: {
+ text: 'Temperature (°C)'
+ },
+ plotLines: [{
+ value: 0,
+ width: 1,
+ color: '#808080'
+ }]
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.series.name +'</b><br/>'+
+ this.x +': '+ this.y +'°C';
+ }
+ },
+ legend: {
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'top',
+ x: -10,
+ y: 100,
+ borderWidth: 0
+ },
+ series: [{
+ name: 'Tokyo',
+ data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+ }, {
+ name: 'New York',
+ data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
+ }, {
+ name: 'Berlin',
+ data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
+ }, {
+ name: 'London',
+ data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+ }]
+ });
+});
57 census/profile.js
View
@@ -18,7 +18,7 @@ $(function(){
}
return table + fieldnum;
}
- window.make_padded_key = make_padded_key
+
function age_breakdown(data,group,year) {
if (!year) { year = '2010' }
// male = PCT012003..102
@@ -32,34 +32,71 @@ $(function(){
}
return breakdown;
}
+
function render_age_chart(title, breakdown) {
chart = new Highcharts.Chart({
chart: {
- renderTo: 'gender-age-chart',
+ renderTo: 'chart',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
- text: title,
+ text: 'Monthly Average Temperature',
x: -20 //center
},
+ subtitle: {
+ text: 'Source: WorldClimate.com',
+ x: -20
+ },
xAxis: {
- title: { text: 'age' }
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
- text: 'number'
+ text: 'Temperature (°C)'
+ },
+ plotLines: [{
+ value: 0,
+ width: 1,
+ color: '#808080'
+ }]
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.series.name +'</b><br/>'+
+ this.x +': '+ this.y +'°C';
}
},
- series: [
- 'Men': breakdown['male'],
- 'Women': breakdown['female']
- ]
+ legend: {
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'top',
+ x: -10,
+ y: 100,
+ borderWidth: 0
+ },
+ series: [{
+ name: 'Tokyo',
+ data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+ }, {
+ name: 'New York',
+ data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
+ }, {
+ name: 'Berlin',
+ data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
+ }, {
+ name: 'London',
+ data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+ }]
+ });
}
+
window.age_breakdown = age_breakdown;
+
$(document).ready(function() {
- data = ire_census.do_with_sf1_data('1714000',render_profile)
+ data = ire_census.do_with_sf1_data('1714000',render_profile);
$("#geoid-form").submit(function() { ire_census.do_with_sf1_data($("#geoid").val(),render_profile); return false; })
});
Please sign in to comment.
Something went wrong with that request. Please try again.