Team:Virginia/Tabs

From 2014.igem.org

(Difference between revisions)
 
(69 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Template:Team:Virginia:Test}}
<html>
<html>
-
<head> <meta charset="utf-8" />
+
<head>
-
  <title>jQuery UI Tabs - Default functionality</title>
+
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
-
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
+
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
-
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+
   <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
-
   <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
+
   <link rel="stylesheet" href="/resources/demos/style.css">
-
   <script type="text/javascript" src="https://www.google.com/jsapi"></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],
 +
          ]);
    
    
-
  </head>
+
          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],
 +
 
 +
          ]);
    
    
-
<body>
 
-
 
 
-
<script type="text/javascript">
 
-
google.load("visualization", "1", {packages:["corechart"]});
 
-
function drawChart2() {
 
-
var data = google.visualization.arrayToDataTable([
 
-
['Mes','Cuenta A','Cuenta B'],
 
-
['Enero',9632,3021],
 
-
['Febrero',8253,853],
 
-
['Marzo',8692,2653]
 
-
]);
 
-
var options = {
 
-
title: 'Estado cuentas'
 
-
};
 
-
var chart = new google.visualization.LineChart(document.getElementById('chart-2'));
 
-
chart.draw(data, options);
 
-
}
 
-
</script>
 
-
<script type="text/javascript">
+
          var options = {
-
google.load("visualization", "1", {packages:["corechart"]});
+
              resolution: 'subcontinents',
-
function drawChart1() {
+
legend: 'none',
-
var data = google.visualization.arrayToDataTable([
+
sizeAxis: { minValue: 0, maxValue: 100 },
-
['Mes','Gastos','Margen-Ventas','Ventas'],
+
              colorAxis: {colors: ['white', 'purple']},
-
['Enero',6320,7512,15035],
+
backgroundColor: '#EEF8FC'
-
['Febrero',6012,3987,8658],
+
        ,width:900
-
['Marzo',6215,6310,10366]
+
          ,height:500
-
]);
+
 
-
var options = {
+
          };
-
title: 'Ventas y costes'
+
 
-
};
+
          var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
-
var chart = new google.visualization.LineChart(document.getElementById('chart-1'));
+
  var chart2 = new google.visualization.GeoChart(document.getElementById('regions_div2'));
-
chart.draw(data, options);
+
          chart.draw(data, options);
 +
chart2.draw(data2, options);
 +
 
 +
 
 +
      }
 +
    </script>
 +
 
 +
 
 +
 
 +
<script>
 +
  $(function() {
 +
 
 +
    $( "#tabs" ).tabs();
 +
  });
 +
  </script>
 +
 
 +
<style>
 +
#regions_div{
 +
margin: 0 auto;
}
}
-
</script>
+
</style>
-
<!-- Tabs -->
 
-
$(function() {
 
-
drawChart1();
 
-
drawChart2();
 
-
$( "#tabs" ).tabs();
 
-
});
 
-
<div id="tabs">
+
</head>
-
<ul>
+
<body>
-
<li><a href="#tabs-0">Finanzas</a></li>
+
-
<li><a href="#tabs-1">Ventas</a></li>
+
<div id="regions_div"></div>
-
</ul>
+
-
<div id="tabs-0"><p>
+
-
  <div id="chart-2"></div>
+
-
</p></div>
+
-
<div id="tabs-1"><p>
+
-
  <div id="chart-1"></div>
+
-
</p></div>
+
-
</div>
+
</body>
</body>
</html>
</html>

Latest revision as of 00:43, 18 October 2014

Retrieved from "http://2014.igem.org/Team:Virginia/Tabs"