JSFiddle - React, Tailwind, and code Playground

rosa de direccións lacenas

by abubelinha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script language="javascript">

</script>
<div id="container" style="width: 100%; height: 800px; margin: 0 auto"></div>
<div id="datos">

</div>

JavaScript

var url = 'https://script.google.com/macros/s/AKfycbx-W6mvfL1EK-qusc7hwMTwYSRBM81Jl7BawxnnYtFRtBnq81I/exec?lacenas=';
var datosjson;//=getJSON(url);
var roseDataJSON;
var getJSON = function(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        resolve(xhr.response);
      } else {
        reject(status);
      }
    };
    xhr.send();
  });
};

getJSON(url).then(function(data) {
    var fila, result;
    result='Your Json result is:  ' + data.length + ' length<br>';
    //alert(result); //you can comment this, i used it to debug
    roseDataJSON=creadatosrosewind(data,16);
    //alert(JSON.stringify(roseDataJSON));
    document.getElementById('datos').innerHTML=JSON.stringify(roseDataJSON);
    verrosa();
}, function(status) { //error detection....
  alert('Something went wrong.');
});


function catgrados(grados,ngrupos=8,base=0) {
    // categoría base significa Norte (por E e por W tamén)
    // base = valor del rango más bajo (0 o 1, normalmente)
    var grupo=(grados>(360-360/ngrupos/2) ? base : parseInt(
    Math.min(359.999,grados+360/ngrupos/2) / (360/ngrupos)) 
    + base);
    var mediana=(grupo-base) * 360/ngrupos;
		return([grupo,mediana]);
		return(grupo);
    // a mediana en grados deste grupo sería = (grupo-base) * 360/ngrupos
}
var categories = [
  'N','N-E','NNE','NE-N','NE','NE-E','ENE','E-N', 
  'E','E-S','ESE','SE-E','SE','SE-S','SSE','S-E', 
  'S','S-W','SSW','SW-S','SW','SW-W','WSW','W-S', 
  'W','W-N','WNW','NW-W','NW','NW-N','NNW','N-W'];

function creadatosrosewind(data,nrangos=16){
    var rango,fila;
    var rangoymed=Array();
    var seriedatos=Array();
    for(i=0;i<nrangos;i++) {
      seriedatos[i]=[i,0];
    }
    for(var i=1;i<data.length;i++) {
    	if(360 >= data[i][22] >= 0) {
        fila=data[i];
        //if(fila[22] > 0) {
       ...