estadisticas latinoamerica

2020-03-17 14:35:32 -05:00 · 2020-03-17 14:35:32 -05:00 · 21c0a82bc1
commit 21c0a82bc1
parent 1f8a79c74b
1 changed files with 187 additions and 0 deletions
--- a/estadisticas_latam.php
+++ b/estadisticas_latam.php
@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <title>Basic line</title>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+  <script
+    type="text/javascript"
+    src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"
+
+  ></script>
+
+
+
+
+  <style id="compiled-css" type="text/css">
+      .highcharts-figure, .highcharts-data-table table {
+    min-width: 360px;
+    max-width: 800px;
+    margin: 1em auto;
+}
+
+.highcharts-data-table table {
+	font-family: Verdana, sans-serif;
+	border-collapse: collapse;
+	border: 1px solid #EBEBEB;
+	margin: 10px auto;
+	text-align: center;
+	width: 100%;
+	max-width: 500px;
+}
+.highcharts-data-table caption {
+    padding: 1em 0;
+    font-size: 1.2em;
+    color: #555;
+}
+.highcharts-data-table th {
+	font-weight: 600;
+    padding: 0.5em;
+}
+.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
+    padding: 0.5em;
+}
+.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
+    background: #f8f8f8;
+}
+.highcharts-data-table tr:hover {
+    background: #f1f7ff;
+}
+
+  </style>
+
+
+
+</head>
+<body>
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/series-label.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script src="https://code.highcharts.com/modules/export-data.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
+
+<figure class="highcharts-figure">
+    <div id="container"></div>
+    <p class="highcharts-description">
+
+    </p>
+</figure>
+
+
+
+
+  <!-- TODO: Missing CoffeeScript 2 -->
+
+  <script type="text/javascript">//<![CDATA[
+
+
+let countries = ['CO', 'ES', 'FR', 'IT', 'MX', 'US'];
+let countrySeries = [];
+
+countries.forEach((country) => {
+    $.ajax({
+    url: 'https://thevirustracker.com/free-api?countryTimeline='+country,
+    dataType: 'json',
+    success: function(data) {
+    	let countryName = data.countrytimelinedata[0].info.title;
+      let covidInfo  = data.timelineitems[0];
+      let infoByDay = [];
+      let countryObj = {
+      	 name: countryName,
+         data: null
+      };
+
+      let compareDays = 21;
+			let acum = 0;
+
+
+      Object.keys(covidInfo).forEach(function (item) {
+      	if(covidInfo[item].total_cases > 0 && acum < compareDays){
+        	infoByDay.push(covidInfo[item].total_cases);
+          acum++;
+        }
+      });
+
+
+      countryObj.data = infoByDay;
+
+      countrySeries.push(countryObj);
+
+      if(countrySeries.length == countries.length){
+        printchart(countrySeries);
+      }
+    }
+  });
+});
+
+
+function printchart(series){
+
+	    Highcharts.chart('container', {
+
+      title: {
+          text: 'Casos registrados los primeros 21 días'
+      },
+
+      subtitle: {
+          text: 'Source: thevirustracker.com'
+      },
+
+      yAxis: {
+          title: {
+              text: 'Número de casos'
+          }
+      },
+
+      xAxis: {
+          accessibility: {
+              rangeDescription: 'Range: 2010 to 2017'
+          }
+      },
+
+      legend: {
+          layout: 'vertical',
+          align: 'right',
+          verticalAlign: 'middle'
+      },
+
+      plotOptions: {
+          series: {
+              label: {
+                  connectorAllowed: false
+              },
+              pointStart: 1
+          }
+      },
+
+      series: series,
+
+      responsive: {
+          rules: [{
+              condition: {
+                  maxWidth: 500
+              },
+              chartOptions: {
+                  legend: {
+                      layout: 'horizontal',
+                      align: 'center',
+                      verticalAlign: 'bottom'
+                  }
+              }
+          }]
+      }
+
+  });
+
+}
+
+
+  //]]></script>
+
+
+</body>
+</html>