Team:Imperial/Water Report
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
{{:Team:Imperial/Templates:header}} | {{:Team:Imperial/Templates:header}} | ||
- | + | ||
<html> | <html> | ||
+ | <script type="text/javascript"> | ||
+ | $(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}: <b>{point.percentage:.1f}%</b>' | ||
+ | }, | ||
+ | plotOptions: { | ||
+ | pie: { | ||
+ | allowPointSelect: true, | ||
+ | cursor: 'pointer', | ||
+ | dataLabels: { | ||
+ | enabled: true, | ||
+ | format: '<b>{point.name}</b>: {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 | ||
+ | }, | ||
+ | ] | ||
+ | }] | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(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] | ||
+ | }] | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(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}: <b>{point.percentage:.1f}%</b>' | ||
+ | }, | ||
+ | plotOptions: { | ||
+ | pie: { | ||
+ | allowPointSelect: true, | ||
+ | cursor: 'pointer', | ||
+ | dataLabels: { | ||
+ | enabled: true, | ||
+ | format: '<b>{point.name}</b>: {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 | ||
+ | }, | ||
+ | ] | ||
+ | }] | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
<body> | <body> | ||
<!--End of Header section--> | <!--End of Header section--> | ||
- | + | <script src="https://2014.igem.org/Team:Imperial/Resources/JS:highcharts?action=raw&ctype=text/js"></script> | |
+ | <script src="https://2014.igem.org/Team:Imperial/Resources/JS:exporting?action=raw&ctype=text/js"></script> | ||
<div class="content-wrapper"> | <div class="content-wrapper"> | ||
Revision as of 23:44, 16 October 2014