"
Team:Imperial/Resources/JS:charts
From 2014.igem.org
$(function () {
$('#water_use_breakdown').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1, //null,
plotShadow: false
},
title: {
text: 'Water Consumption by Sector'
},
subtitle: {
text: 'Worldometers 2014'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Agricultural irrigation', 67.0],
['Industrial', 11.0],
{
name: 'Domestic Use',
y: 22.0,
sliced: true,
selected: true
},
]
}]
});
});
$(function () {
$('#freshwater_per_capita').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Per capita freshwater resources'
},
subtitle: {
text: 'World Bank 2009'
},
xAxis: {
categories: ['Canada', 'Russia', 'Brazil', 'Australia', 'US','Sub-Saharan Africa','Japan','EU','UK','China','India','Middle East & North Africa'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Per capita freshwater resources(cubic metres)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Per capita freshwater resources(cubic meters)',
data: [84495,30393,29037,22413,9186,4708,3371,2929,2346,2113,1197,616]
}]
});
});
$(function () {
$('#freshwater_per_capita_withdraw').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Per capita freshwater withdrawals'
},
subtitle: {
text: 'World Bank 2009'
},
xAxis: {
categories: ['UK', 'Australia', 'Canada', 'Russia', 'Brazil', 'Japan', 'US','China','India'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Per capita freshwater withdrawals(cubic metres)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Per capita freshwater withdrawals(cubic meters)',
data: [13, 22.6, 46.0, 66.2, 74.8, 90, 478.4, 554.1, 761.0]
}]
});
});
$(function () {
$('#freshwater_breakdown').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1, //null,
plotShadow: false
},
title: {
text: 'Geographic breakdown of global freshwater resources'
},
subtitle: {
text: 'World Bank 2009'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Brazil', 13.0],
['Russia', 10.0],
['Canada', 7.0],
['US', 7.0],
['China', 6.0],
['Colombia', 5.0],
['Indonesia', 5.0],
['Peru', 4.0],
['India', 3.0],
['Myanmar', 10.0],
{
name: 'Rest of World',
y: 38.0,
sliced: true,
selected: true
},
]
}]
});
});
$(function () {
$('#JudgesAndTeams').highcharts({
title: {
text: 'International teams and multilingual judges in iGEM',
x: -20 //center
},
subtitle: {
text: 'Source: igem.org',
x: -20
},
xAxis: {
categories: ['2009', '2010', '2011', '2012', '2013']
},
yAxis: {
tickPixelInterval: '20',
min: '0',
max: '100',
title: {
text: 'Percentage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Teams',
data: [54.86, 55.4, 61, 67.5, 64]
}, {
name: 'Judges',
data: [39.2, 43.6, 48.9, 32.3, 38.5]
}]
});
});
$(function () {
$('#JudgesTop5Languages').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Number of judges speaking Top 5 foreign languages in Championship'
},
xAxis: {
categories: ['2009', '2010', '2011', '2012', '2013']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of judges'
}
},
tooltip: {
formatter: function () {
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '
' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Japanese',
data: [3, 6, 3, 1, 4],
}, {
name: 'German',
data: [2, 5, 4, 2, 4],
}, {
name: 'French',
data: [4, 9, 4, 4],
}, {
name: 'Spanish',
data: [3, 0, 4, 4, 3],
}, {
name: 'Mandarin',
data: [2, 8, 6, 4, 1],
}]
});
});
$(function () {
$('#LanguageFamily').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Top 10 languages represented in iGEM, grouped by language family'
},
xAxis: {
categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '
' +
'Total: ' + this.point.categoryTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Swedish',
color: '#FA6508',
data: [0, 0, 0, 0, 0, 2, 2, 1, 2, 2, 3],
stack: 'Germanic'
}, {
name: 'Danish',
color: '#22C851',
data: [0, 0, 0, 0, 0, 2, 2, 3, 2, 3, 3],
stack: 'Germanic'
}, {
name: 'Dutch',
color: '#C82243',
data: [0, 0, 0, 0, 3, 3, 3, 5, 6, 5, 5],
stack: 'Germanic'
}, {
name: 'German',
color: '#F0DE17',
data: [0, 1, 2, 2, 4, 5, 8, 6, 12, 12, 14],
stack: 'Germanic'
}, {
name: 'English',
color: '#459AC4',
data: [5, 13, 28, 35, 46, 51, 57, 62, 71, 72, 103],
stack: 'Germanic'
}, {
name: 'French',
color: '#AA08FA',
data: [0, 0, 0, 1, 3, 4, 5, 6, 8, 8, 10],
stack: 'Romance'
}, {
name: 'Spanish',
color: '#57AC0D',
data: [0, 0, 3, 1, 4, 6, 6, 10, 14, 10, 12],
stack: 'Romance'
}, {
name: 'Cantonese',
color: '#AC0D2F',
data: [0, 0, 0, 0, 2, 2, 3, 3, 3, 3, 4],
stack: 'East Asian'
}, {
name: 'Japanese',
color: '#8ABA96',
data: [0, 0, 2, 2, 3, 5, 9, 9, 11, 11, 8],
stack: 'East Asian'
}, {
name: 'Mandarin',
color: '#0DAC97',
data: [0, 0, 0, 6, 7, 10, 10, 20, 28, 41, 53],
stack: 'East Asian'
}]
});
});
$(function () {
$('#MultilingualJudges').highcharts({
title: {
text: 'Percentage of multilingual judges in regionals and championships',
x: -20 //center
},
subtitle: {
text: 'Source: igem.org',
x: -20
},
xAxis: {
categories: ['2011', '2012', '2013']
},
yAxis: {
tickPixelInterval: '20',
min: '0',
max: '100',
title: {
text: 'Percentage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Europe',
data: [72.7, 81.8, 78.8]
}, {
name: 'North America',
data: [31.4, 24.4, 19.2]
}, {
name: 'Latin America',
data: [31.4, 93.75, 100]
}, {
name: 'Asia',
data: [96, 96.875, 100]
}, {
name: 'Championships',
data: [48.9, 32.3, 38.5]
}]
});
});
$(function () {
$('#TeamCountryLanguage').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Number of iGEM teams, countries and languages per year'
},
subtitle: {
text: 'Source: igem.org'
},
xAxis: [{
categories: ['2004', '2005', '2006', '2007', '2008', '2009',
'2010', '2011', '2012', '2013', '2014']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Languages',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Countries',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Countries',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Teams',
type: 'column',
yAxis: 1,
data: [5, 13, 40, 59, 88, 113, 128, 159, 191, 204, 246],
tooltip: {
valueSuffix:
}
}, {
name: 'Countries',
type: 'spline',
yAxis: 2,
data: [1, 4, 14, 15, 23, 27, 26, 27, 30, 32, 32],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix:
}
}, {
name: 'Languages',
type: 'spline',
data: [1, 2, 8, 10, 13, 19, 20, 20, 20, 23, 20],
tooltip: {
valueSuffix:
}
}]
});
});
$(function () {
$('#Top10Countries').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Top 10 countries represented in iGEM, grouped by continent'
},
xAxis: {
categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of countries'
}
},
tooltip: {
formatter: function () {
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '
'
;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Canada',
data: [0, 1, 3, 6, 10, 10, 8, 7, 8, 11, 9],
stack: 'North America'
}, {
name: 'US',
data: [5, 10, 22, 26, 28, 30, 36, 44, 52, 44, 71],
stack: 'North America'
}, {
name: 'Switzerland',
data: [0, 1, 1, 1, 2, 1, 2, 2, 2, 2, 2],
stack: 'Europe'
}, {
name: 'France',
data: [0, 0, 0, 1, 2, 2, 4, 4, 6, 6, 7],
stack: 'Europe'
}, {
name: 'Netherlands',
data: [0, 0, 0, 0, 2, 2, 2, 4, 5, 4, 4],
stack: 'Europe'
}, {
name: 'Germany',
data: [0, 0, 1, 1, 2, 4, 7, 5, 11, 11, 13],
stack: 'Europe'
}, {
name: 'UK',
data: [0, 1, 3, 5, 6, 9, 9, 8, 9, 15, 17],
stack: 'Europe'
}, {
name: 'Japan',
color: '#387F6A',
data: [0, 0 , 2 ,2, 3, 5, 9, 9, 11, 11, 8],
stack: 'Asia'
}, {
name: 'China',
color: '#41387F',
data: [0, 0, 0, 4, 6, 9, 9, 19, 26, 38, 50],
stack: 'Asia'
}, {
name: 'Mexico',
color: '#C9202E',
data: [0, 0, 1, 0, 1, 2 ,3, 4, 6, 5, 8],
stack: 'South America'
}]
});
});
$(function () {
$('#Top13Countries').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Top 13 countries represented in iGEM, grouped by continent'
},
xAxis: {
categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of countries'
}
},
tooltip: {
formatter: function () {
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '
' +
'Total: ' + this.point.categoryTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Canada',
data: [0, 1, 3, 6, 10, 10, 8, 7, 8, 11, 9],
stack: 'North America'
}, {
name: 'US',
data: [5, 10, 22, 26, 28, 30, 36, 44, 52, 44, 71],
stack: 'North America'
}, {
name: 'Switzerland',
data: [0, 1, 1, 1, 2, 1, 2, 2, 2, 2, 2],
stack: 'Europe'
}, {
name: 'Spain',
data: [0, 0, 1, 1 ,1 ,2 ,2 ,3 ,2 ,2 ,2],
stack: 'Europe'
}, {
name: 'Denmark',
data: [0, 0, 0, 0, 0 ,2 ,2, 3, 2 ,3, 3],
stack: 'Europe'
}, {
name: 'Turkey',
data: [0, 0, 1, 1, 1, 1, 2, 4, 2, 4, 2],
stack: 'Europe'
}, {
name: 'France',
data: [0, 0, 0, 1, 2, 2, 4, 4, 6, 6, 7],
stack: 'Europe'
}, {
name: 'Netherlands',
data: [0, 0, 0, 0, 2, 2, 2, 4, 5, 4, 4],
stack: 'Europe'
}, {
name: 'Germany',
data: [0, 0, 1, 1, 2, 4, 7, 5, 11, 11, 13],
stack: 'Europe'
}, {
name: 'UK',
data: [0, 1, 3, 5, 6, 9, 9, 8, 9, 15, 17],
stack: 'Europe'
}, {
name: 'Japan',
color: '#387F6A',
data: [0, 0 , 2 ,2, 3, 5, 9, 9, 11, 11, 8],
stack: 'Asia'
}, {
name: 'China',
color: '#41387F',
data: [0, 0, 0, 4, 6, 9, 9, 19, 26, 38, 50],
stack: 'Asia'
}, {
name: 'Mexico',
color: '#C9202E',
data: [0, 0, 1, 0, 1, 2 ,3, 4, 6, 5, 8],
stack: 'South America'
}]
});
});
$(function () {
$('#PercentageInternational').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Percentage of international students in Imperial iGEM teams'
},
subtitle: {
text: 'Source: igem.org'
},
xAxis: {
categories: [
'2007',
'2008',
'2009',
'2010',
'2011',
'2013',
'2014'
]
},
yAxis: {
min: 0,
title: {
text: 'Percentage of international students (%)'
}
},
tooltip: {
headerFormat: '{point.key}| {series.name}: | ' + '{point.y:.1f} % |
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'international students',
data: [90, 55.5, 62.5, 67, 89, 57, 69]
}] });
});
