Team:Virginia/Tabs
From 2014.igem.org
(Difference between revisions)
(64 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | {{Template:Team:Virginia:Test}} | ||
<html> | <html> | ||
<head> | <head> | ||
- | |||
- | |||
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> | <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> | ||
<script src="//code.jquery.com/jquery-1.10.2.js"></script> | <script src="//code.jquery.com/jquery-1.10.2.js"></script> | ||
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> | <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> | ||
<link rel="stylesheet" href="/resources/demos/style.css"> | <link rel="stylesheet" href="/resources/demos/style.css"> | ||
- | <script> | + | <script src="https://www.google.com/jsapi"></script> |
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | google.load("visualization", "1", {packages:["geochart"]}); | ||
+ | google.setOnLoadCallback(drawRegionsMap); | ||
+ | |||
+ | function drawRegionsMap() { | ||
+ | |||
+ | |||
+ | var data = google.visualization.arrayToDataTable([ | ||
+ | ['Region Code', 'Sub-Continent', 'Popularity'], | ||
+ | ['154' ,'Northern European', 30.5], | ||
+ | ['143' ,'Central Asia', 52], | ||
+ | ['021' ,'North American', 38.9], | ||
+ | ['039' ,'Southern Europe', 40.6], | ||
+ | ['030' ,'Eastern Asia', 34.2], | ||
+ | ['155' ,'Western Europe', 30.2], | ||
+ | ['151' ,'Eastern Europe', 60], | ||
+ | ['034' ,'Southern Asia', 75], | ||
+ | ['035' ,'South-Eastern Asia', 0], | ||
+ | ['029' ,'Carribean/Central America/South America', 15.6], | ||
+ | ['013' ,'Carribean/Central America/South America', 15.6], | ||
+ | ['005' ,'Carribean/Central America/South America', 15.6], | ||
+ | ['053' ,'Oceania', 33.3], | ||
+ | ['054' ,'Oceania', 33.3], | ||
+ | ['057' ,'Oceania', 33.3], | ||
+ | ['061' ,'Oceania', 33.3], | ||
+ | ['145' ,'Western Asia', 100], | ||
+ | ['018' ,'', 0], | ||
+ | ]); | ||
+ | |||
+ | var data2 = google.visualization.arrayToDataTable([ | ||
+ | ['Region Code', 'Sub-Continent', 'Popularity'], | ||
+ | ['154' ,'Northern European', 80.5], | ||
+ | ['143' ,'Central Asia',76], | ||
+ | ['021' ,'North American', 90.3], | ||
+ | ['039' ,'Southern Europe', 93.8], | ||
+ | ['030' ,'Eastern Asia', 83.3], | ||
+ | ['155' ,'Western Europe', 82.7], | ||
+ | ['151' ,'Eastern Europe',80], | ||
+ | ['034' ,'Southern Asia',100], | ||
+ | ['035' ,'South-Eastern Asia', 100], | ||
+ | ['029' ,'Carribean/Central America/South America', 68.8], | ||
+ | ['013' ,'Carribean/Central America/South America', 68.8], | ||
+ | ['005' ,'Carribean/Central America/South America', 68.8], | ||
+ | ['053' ,'Oceania', 100], | ||
+ | ['054' ,'Oceania', 100], | ||
+ | ['057' ,'Oceania', 100], | ||
+ | ['061' ,'Oceania', 100], | ||
+ | ['145' ,'Western Asia', 100], | ||
+ | |||
+ | ]); | ||
+ | |||
+ | |||
+ | var options = { | ||
+ | resolution: 'subcontinents', | ||
+ | legend: 'none', | ||
+ | sizeAxis: { minValue: 0, maxValue: 100 }, | ||
+ | colorAxis: {colors: ['white', 'purple']}, | ||
+ | backgroundColor: '#EEF8FC' | ||
+ | ,width:900 | ||
+ | ,height:500 | ||
+ | |||
+ | }; | ||
+ | |||
+ | var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); | ||
+ | var chart2 = new google.visualization.GeoChart(document.getElementById('regions_div2')); | ||
+ | chart.draw(data, options); | ||
+ | chart2.draw(data2, options); | ||
+ | |||
+ | |||
+ | } | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
$(function() { | $(function() { | ||
+ | |||
$( "#tabs" ).tabs(); | $( "#tabs" ).tabs(); | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
+ | <style> | ||
+ | #regions_div{ | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
- | <div id=" | + | <div id="regions_div"></div> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 00:43, 18 October 2014