changes on radial chart

public/js/cuerpos_charts.js

@@ -667,6 +667,12 @@ am4core.ready(function() {
     /* Create chart instance */
     var chart = am4core.create("radial_chart", am4charts.RadarChart);
 
+    let title = chart.titles.create();
+    title.text = "Superficie total por año";
+    title.fontSize = 15;
+    title.marginBottom = 10;
+    title.fill = am4core.color(mainTextColor);
+
     var data = [];
     /* var value1 = 500;
      var value2 = 600;
@@ -685,7 +691,9 @@ am4core.ready(function() {
     //console.log(data);
 
     /* Create axes */
-    var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
+    //var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
+    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+    categoryAxis.dataFields.category = "month";
     categoryAxis.fontSize = 9;
     categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
 
@@ -702,31 +710,32 @@ am4core.ready(function() {
     /* Create and configure series */
     var series1 = chart.series.push(new am4charts.RadarSeries());
     series1.dataFields.valueY = "value1";
-    series1.dataFields.dateX = "date";
-    series1.strokeWidth = 1.5;
-    series1.tooltipText = "{valueY.formatNumber('#,###.#')} Ha";
-    series1.name = "Series 1";
+    series1.dataFields.categoryX = "month" //"date";
+    series1.strokeWidth = 2;
+    series1.tooltipText = "{valueY}";
+    series1.name = "2016";
     //series1.bullets.create(am4charts.CircleBullet);
-    series1.dataItems.template.locations.dateX = 0.5;
+    // series1.dataItems.template.locations.dateX = 0.5;
 
 
     var series2 = chart.series.push(new am4charts.RadarSeries());
     series2.dataFields.valueY = "value2";
-    series2.dataFields.dateX = "date";
-    series2.strokeWidth = 1.5;
+    series2.dataFields.categoryX = "month"; //"date";
+    series2.strokeWidth = 2;
     series2.tooltipText = "{valueY}";
-    series2.name = "Series 2";
+    series2.name = "2017";
     //series2.bullets.create(am4charts.CircleBullet);
-    series2.dataItems.template.locations.dateX = 0.5;
+    // series2.dataItems.template.locations.dateX = 0.5;
 
     var series3 = chart.series.push(new am4charts.RadarSeries());
     series3.dataFields.valueY = "value3";
-    series3.dataFields.dateX = "date";
-    series3.strokeWidth = 1.5;
+    series3.dataFields.categoryX = "month"; //"date";
+    series3.strokeWidth = 2;
     series3.tooltipText = "{valueY}";
-    series3.name = "Series 3";
+    series3.name = "2018";
     //series2.bullets.create(am4charts.CircleBullet);
-    series3.dataItems.template.locations.dateX = 0.5;
+    // series3.dataItems.template.locations.X = 0.5;
+
 
 
 
@@ -747,44 +756,97 @@ am4core.ready(function() {
 
 
     var range_estiaje = categoryAxis.axisRanges.create();
-    range_estiaje.date = new Date(2020, 2, 1);
-    range_estiaje.endDate = new Date(2020, 4, 1);
+    range_estiaje.category = "March";
+    range_estiaje.endcategory = "April";
     range_estiaje.axisFill.fill = am4core.color("#DFA34D");
     range_estiaje.axisFill.fillOpacity = 0.5;
     range_estiaje.grid.strokeOpacity = 0;
 
+    var range_estiaje_1 = categoryAxis.axisRanges.create();
+    range_estiaje_1.category = "April";
+    range_estiaje_1.endcategory = "May";
+    range_estiaje_1.axisFill.fill = am4core.color("#DFA34D");
+    range_estiaje_1.axisFill.fillOpacity = 0.5;
+    range_estiaje_1.grid.strokeOpacity = 0;
+
     var range_lluvTropical = categoryAxis.axisRanges.create();
-    range_lluvTropical.date = new Date(2020, 4, 1);
-    range_lluvTropical.endDate = new Date(2020, 8, 1);
+    range_lluvTropical.category = "May";
+    range_lluvTropical.endcategory = "June";
+    //range_lluvTropical.date = new Date(2020, 4, 1);
+    //range_lluvTropical.endDate = new Date(2020, 8, 1);
     range_lluvTropical.axisFill.fill = am4core.color("#D8736D");
     range_lluvTropical.axisFill.fillOpacity = 0.5;
     range_lluvTropical.grid.strokeOpacity = 0;
 
+    var range_lluvTropical_1 = categoryAxis.axisRanges.create();
+    range_lluvTropical_1.category = "June";
+    range_lluvTropical_1.endcategory = "July";
+    range_lluvTropical_1.axisFill.fill = am4core.color("#D8736D");
+    range_lluvTropical_1.axisFill.fillOpacity = 0.5;
+    range_lluvTropical_1.grid.strokeOpacity = 0;
+
+    var range_lluvTropical_2 = categoryAxis.axisRanges.create();
+    range_lluvTropical_2.category = "July";
+    range_lluvTropical_2.endcategory = "August";
+    range_lluvTropical_2.axisFill.fill = am4core.color("#D8736D");
+    range_lluvTropical_2.axisFill.fillOpacity = 0.5;
+    range_lluvTropical_2.grid.strokeOpacity = 0;
+
+    var range_lluvTropical_3 = categoryAxis.axisRanges.create();
+    range_lluvTropical_3.category = "August";
+    range_lluvTropical_3.endcategory = "September";
+    range_lluvTropical_3.axisFill.fill = am4core.color("#D8736D");
+    range_lluvTropical_3.axisFill.fillOpacity = 0.5;
+    range_lluvTropical_3.grid.strokeOpacity = 0;
+
     var range_lluvTropicalInv = categoryAxis.axisRanges.create();
-    range_lluvTropicalInv.date = new Date(2020, 8, 1);
-    range_lluvTropicalInv.endDate = new Date(2020, 11, 1);
+    range_lluvTropicalInv.category = "September";
+    range_lluvTropicalInv.endcategory = "October";
     range_lluvTropicalInv.axisFill.fill = am4core.color("#AF8BBA");
     range_lluvTropicalInv.axisFill.fillOpacity = 0.5;
     range_lluvTropicalInv.grid.strokeOpacity = 0;
 
+    var range_lluvTropicalInv_1 = categoryAxis.axisRanges.create();
+    range_lluvTropicalInv_1.category = "October";
+    range_lluvTropicalInv_1.endcategory = "November";
+    range_lluvTropicalInv_1.axisFill.fill = am4core.color("#AF8BBA");
+    range_lluvTropicalInv_1.axisFill.fillOpacity = 0.5;
+    range_lluvTropicalInv_1.grid.strokeOpacity = 0;
+
+    var range_lluvTropicalInv_2 = categoryAxis.axisRanges.create();
+    range_lluvTropicalInv_2.category = "November";
+    range_lluvTropicalInv_2.endcategory = "December";
+    range_lluvTropicalInv_2.axisFill.fill = am4core.color("#AF8BBA");
+    range_lluvTropicalInv_2.axisFill.fillOpacity = 0.5;
+    range_lluvTropicalInv_2.grid.strokeOpacity = 0;
+
     var range_lluvInv = categoryAxis.axisRanges.create();
-    range_lluvInv.date = new Date(2020, 11, 1);
-    range_lluvInv.endDate = new Date(2020, 12, 1);
+    range_lluvInv.category = "December";
+    range_lluvInv.endcategory = "January";;
     range_lluvInv.axisFill.fill = am4core.color("#76B66A");
     range_lluvInv.axisFill.fillOpacity = 0.5;
     range_lluvInv.grid.strokeOpacity = 0;
 
-    var range_lluvInv1 = categoryAxis.axisRanges.create();
-    range_lluvInv1.date = new Date(2020, 0, 1);
-    range_lluvInv1.endDate = new Date(2020, 2, 1);
-    range_lluvInv1.axisFill.fill = am4core.color("#76B66A");
-    range_lluvInv1.axisFill.fillOpacity = 0.5;
-    range_lluvInv1.grid.strokeOpacity = 0;
+    var range_lluvInv_1 = categoryAxis.axisRanges.create();
+    range_lluvInv_1.category = "January";
+    range_lluvInv_1.endcategory = "February";;
+    range_lluvInv_1.axisFill.fill = am4core.color("#76B66A");
+    range_lluvInv_1.axisFill.fillOpacity = 0.5;
+    range_lluvInv_1.grid.strokeOpacity = 0;
+
+    var range_lluvInv_2 = categoryAxis.axisRanges.create();
+    range_lluvInv_2.category = "February";
+    range_lluvInv_2.endcategory = "March";;
+    range_lluvInv_2.axisFill.fill = am4core.color("#76B66A");
+    range_lluvInv_2.axisFill.fillOpacity = 0.5;
+    range_lluvInv_2.grid.strokeOpacity = 0;
+
+
 
     chart.legend = new am4charts.Legend();
     chart.legend.fontSize = 9;
 
-    // let legend2 = []
+    let legend2 = []
     var legenddata2 = [{ name: "Estiaje", fill: am4core.color("#DFA34D") },
         { name: "Lluvia Tropical", fill: am4core.color("#D8736D") },
         { name: "Lluvia Tropical-Invernal", fill: am4core.color("#AF8BBA") },
@@ -1073,7 +1135,7 @@ am4core.ready(function() {
     var chart = am4core.create("dimfrcpo-graph", am4charts.XYChart);
 
     let title = chart.titles.create();
-    title.text = "Conteo de cuerpos por tipo";
+    title.text = "Conteo por tipo de cuerpo";
     title.fontSize = 15;
     title.marginBottom = 30;
     title.fill = am4core.color(mainTextColor);
@@ -1100,18 +1162,20 @@ am4core.ready(function() {
         "year": 2009,
         "income": 24.6,
         "expenses": 25
-    }];
+    }];*/
 
     // Create axes
-     var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
-     categoryAxis.dataFields.category = "year";
-     categoryAxis.numberFormatter.numberFormat = "#";
-     categoryAxis.renderer.inversed = true;
-     categoryAxis.renderer.grid.template.location = 0;
-     categoryAxis.renderer.cellStartLocation = 0.1;
-     categoryAxis.renderer.cellEndLocation = 0.9;*/
-
-    var dateAxis = chart.yAxes.push(new am4charts.DateAxis());
+    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
+    categoryAxis.dataFields.category = "ha_convert";
+    categoryAxis.numberFormatter.numberFormat = "#,###.0";
+    categoryAxis.renderer.inversed = true;
+    categoryAxis.renderer.grid.template.location = 0;
+    categoryAxis.renderer.cellStartLocation = 0.1;
+    categoryAxis.renderer.cellEndLocation = 0.9;
+    categoryAxis.fontSize = 10;
+    categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
+
+    /*var dateAxis = chart.yAxes.push(new am4charts.DateAxis());
     dateAxis.dataFields.date = "date"; //"year";
     //dateAxis.numberFormatter.numberFormat = "#";
     dateAxis.renderer.inversed = true;
@@ -1119,12 +1183,13 @@ am4core.ready(function() {
     dateAxis.renderer.cellStartLocation = 0.1;
     dateAxis.renderer.cellEndLocation = 0.9;
     dateAxis.fontSize = 10;
-    dateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
+    dateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);*/
 
 
 
     var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
     valueAxis.renderer.opposite = true;
+    valueAxis.calculateTotals = true
     valueAxis.fontSize = 10;
     valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
 
@@ -1133,9 +1198,11 @@ am4core.ready(function() {
     // Create series
     function createSeries(field, name) {
         var series = chart.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueX = field;
-        //series.dataFields.categoryY = "year";
-        series.dataFields.dateY = "date"; //"year";
+        series.dataFields.valueX = //field;
+            series.dataFields.categoryY = "ha_convert";
+        series.dataFields.valueYShow = "count";
+
+        //series.dataFields.dateY = "date"; //"year";
         series.name = name;
         series.columns.template.tooltipText = "[bold]{dateX}[/]{name}: [bold]{valueX}[/]";
         series.columns.template.height = am4core.percent(100);

public/js/cuerpos_functions.js

@@ -373,7 +373,8 @@ const populateMap = async(mapData) => {
         let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1`;
         const queryData = await d3.json(query);
         let date = new Date(dateArray[i]);
-        date.setFullYear(2020)
+        // console.log(date);
+        // date.setFullYear(2016)
         queryData[0].date = date;
         data.push(queryData[0]);
     });
@@ -382,8 +383,58 @@ const populateMap = async(mapData) => {
     // and then set chart data
     let data_1 = data;
     data_1.sort((a, b) => (a.date > b.date) ? 1 : -1)
-    radialChart.data = data_1;
-    console.log(data_1);
+
+    var month = new Array();
+    month[0] = "January";
+    month[1] = "February";
+    month[2] = "March";
+    month[3] = "April";
+    month[4] = "May";
+    month[5] = "June";
+    month[6] = "July";
+    month[7] = "August";
+    month[8] = "September";
+    month[9] = "October";
+    month[10] = "November";
+    month[11] = "December";
+
+    var year = new Array();
+    year[116] = "2016";
+    year[117] = "2017";
+    year[118] = "2018";
+
+    let cc;
+    for (cc = 0; cc < data_1.length; cc++) {
+        //data_1[cc].mm = (data_1[cc].date).getMonth();
+        data_1[cc].mm = month[(data_1[cc].date).getMonth()];
+        //data_1[cc].yy = (data_1[cc].date).getYear();
+        data_1[cc].yy = year[(data_1[cc].date).getYear()];
+    }
+
+    /* var element = {},cart = [];
+     element.id = id;
+     element.quantity = quantity;
+     cart.push(element);*/
+
+    var element = {},
+        cart = [],
+        cntr;
+    for (cntr = 0; cntr < 12; cntr++) {
+        //console.log(month[cntr]);
+        element = {};
+        element.month = (month[cntr]).toString();
+        element.value1 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2016 }))[0].value1;
+        element.value2 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2017 }))[0].value1;
+        element.value3 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2018 }))[0].value1;
+        cart.push(element);
+        //console.log(cart);
+    }
+
+    //radialChart.data = data_1;
+
+    //console.log(data_1);
+    console.log(cart);
+    radialChart.data = cart;
 
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINE CHART
     let data_ls = [];
@@ -394,7 +445,7 @@ const populateMap = async(mapData) => {
         let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area, descrip&group=descrip`;
         const queryData = await d3.json(query);
         let date = new Date(dateArray[i]);
-        date.setFullYear(2016)
+        //date.setFullYear(2016)
         for (const wbody in queryData) {
             queryData[wbody].date = date;
         }
@@ -427,7 +478,7 @@ const populateMap = async(mapData) => {
     let grijalva_bodies = aguaPermanente;
     grijalva_bodies.sort((a, b) => (a.date > b.date) ? 1 : -1)
         //let data_ls = aguaPermanente;
-        //console.log(grijalva_bodies);
+        //console.log("grijalva bodies", grijalva_bodies);
     linesChart.data = grijalva_bodies;
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ STACKED AREAS CHART
     let data_sa = [];
@@ -438,7 +489,7 @@ const populateMap = async(mapData) => {
         let query_sa = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area, descrip&group=descrip`;
         const queryData = await d3.json(query_sa);
         let date = new Date(dateArray[i]);
-        date.setFullYear(2016)
+        //date.setFullYear(2016)
         for (const wbody in queryData) {
             queryData[wbody].date = date;
         }
@@ -450,7 +501,7 @@ const populateMap = async(mapData) => {
     // and then set chart data
     //lineStackedChart.data = data_ls;
     var merged_1 = [].concat.apply([], data_sa);
-    console.log(data_sa);
+    //console.log(data_sa);
 
     let aguaPermanente_1 = merged_1.filter(function(d) { return d.descrip == "Agua permanente" });
     let aguaTemporal_1 = merged_1.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" });
@@ -468,7 +519,7 @@ const populateMap = async(mapData) => {
     let grijalva_bodies_1 = aguaPermanente_1;
     grijalva_bodies_1.sort((a, b) => (a.date > b.date) ? 1 : -1)
         //let data_ls = aguaPermanente;
-    console.log("grijalva_bodies_1", grijalva_bodies_1);
+        // console.log("grijalva_bodies_1", grijalva_bodies_1);
     stackedAreaChart.data = grijalva_bodies_1;
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ POPULATION BARS
     let data_pb = [];
@@ -477,7 +528,8 @@ const populateMap = async(mapData) => {
     // async queries for each date that has been loaded
     const queries_pb = userFiles.map(async(mes, i) => {
         //let query_pb = `${baseUrl}/query/${mes}?columns=areacpo/10000 area, descrip`;
-        let query_pb = `${baseUrl}/query/${mes}?columns=count(descrip)::int cuenta, descrip&group=descrip`;
+        //let query_pb = `${baseUrl}/query/${mes}?columns=count(descrip)::int cuenta, descrip&group=descrip`;
+        let query_pb = `${baseUrl}/query/${mes}?columns=descrip, areacpo`;
         const queryData = await d3.json(query_pb);
         let date = new Date(dateArray[i]);
         date.setFullYear(2016)
@@ -492,52 +544,150 @@ const populateMap = async(mapData) => {
 
     // and then set chart data
     //lineStackedChart.data = data_ls;
-    console.log("data_pb", data_pb);
+    // console.log("data_pb", data_pb);
     var merged_2 = [].concat.apply([], data_pb);
     //console.log("merged_2", merged_2);
 
-    /*  let k;
-      let filtered_count = data_pb;
 
-      for (k = 0; k < data_pb.length; k++) {
-          filtered_count[k].perm = (data_pb[k].filter(function(d) { return d.descrip == "Agua permanente" }).length);
-          filtered_count[k].temp = (data_pb[k].filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" }).length);
-          filtered_count[k].vege = (data_pb[k].filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" }).length);
-          filtered_count[k].date = (data_pb[k][0].date);
-      };
 
-      console.log(filtered_count);
-      popBarsChart.data = filtered_count;*/
+    let startDate = new Date("2015-12-31");
+    let endDate = new Date("2016-02-01");
+
 
+    filter_by_date = merged_2.filter(function(d) { return d.date >= startDate && d.date <= endDate })
 
+    let areclass = filter_by_date;
 
+    let k;
+    for (k = 0; k < areclass.length; k++) {
+        /* filtered_count[k].perm = (data_pb[k].filter(function(d) { return d.descrip == "Agua permanente" }).length);
+         filtered_count[k].temp = (data_pb[k].filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" }).length);
+         filtered_count[k].vege = (data_pb[k].filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" }).length);
+         filtered_count[k].date = (data_pb[k][0].date);*/
+        if (Math.log(areclass[k].areacpo) <= 1) { areclass[k].grupo = 1 } else if (Math.log(areclass[k].areacpo) <= 2) { areclass[k].grupo = 2 } else if (Math.log(areclass[k].areacpo) <= 3) { areclass[k].grupo = 3 } else if (Math.log(areclass[k].areacpo) <= 4) { areclass[k].grupo = 4 } else if (Math.log(areclass[k].areacpo) <= 5) { areclass[k].grupo = 5 } else if (Math.log(areclass[k].areacpo) <= 6) { areclass[k].grupo = 6 } else if (Math.log(areclass[k].areacpo) <= 7) { areclass[k].grupo = 7 } else if (Math.log(areclass[k].areacpo) <= 8) { areclass[k].grupo = 8 } else if (Math.log(areclass[k].areacpo) <= 9) { areclass[k].grupo = 9 } else if (Math.log(areclass[k].areacpo) <= 10) { areclass[k].grupo = 10 } else if (Math.log(areclass[k].areacpo) <= 11) { areclass[k].grupo = 11 } else if (Math.log(areclass[k].areacpo) <= 12) { areclass[k].grupo = 12 } else if (Math.log(areclass[k].areacpo) <= 13) { areclass[k].grupo = 13 } else if (Math.log(areclass[k].areacpo) <= 14) { areclass[k].grupo = 14 } else if (Math.log(areclass[k].areacpo) <= 15) { areclass[k].grupo = 15 } else if (Math.log(areclass[k].areacpo) <= 16) { areclass[k].grupo = 16 } else if (Math.log(areclass[k].areacpo) <= 17) { areclass[k].grupo = 17 } else if (Math.log(areclass[k].areacpo) <= 18) { areclass[k].grupo = 18 } else if (Math.log(areclass[k].areacpo) <= 19) { areclass[k].grupo = 19 } else if (Math.log(areclass[k].areacpo) <= 20) { areclass[k].grupo = 20 } else { areclass[k].grupo = 21 }
 
-    // console.log((data_pb[0].filter(function(d) { return d.descrip == "Agua permanente" })).length);
-    //console.log((data_pb[0].filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" })).length);
-    //console.log((data_pb[0].filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" })).length);
+        if (areclass[k].grupo == 21) { areclass[k].ha_convert = 50000 } else { areclass[k].ha_convert = Math.exp(areclass[k].grupo) / 10000 }
+        delete areclass[k].date;
+        delete areclass[k].areacpo;
 
-    let aguaPermanente_2 = merged_2.filter(function(d) { return d.descrip == "Agua permanente" });
-    let aguaTemporal_2 = merged_2.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" });
-    let aguaVegetacion_2 = merged_2.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" });
+    };
 
-    let k;
-    let cuerpos_conteo = aguaPermanente_2;
-
-    for (k = 0; k < cuerpos_conteo.length; k++) {
-        cuerpos_conteo[k].permanente = aguaPermanente_2[k].cuenta;
-        cuerpos_conteo[k].temporal = aguaTemporal_2[k].cuenta;
-        cuerpos_conteo[k].vegetacion = aguaVegetacion_2[k].cuenta;
-        delete cuerpos_conteo[k].descrip;
-        delete cuerpos_conteo[k].cuenta;
+    // console.log("areclass", areclass);
+
+
+
+    var flags = [],
+        output = [],
+        l = areclass.length;
+    //  i;
+    for (i = 0; i < 4800; i++) {
+        if (flags[areclass[i].grupo]) continue;
+        flags[areclass[i].grupo] = true;
+        output.push(areclass[i].grupo);
     }
 
-    //console.log(cuerpos_conteo);
+    output.sort((a, b) => (a > b ? 1 : -1));
+    //console.log("op", output)
+    let p;
 
-    //  let grijalva_bodyCount = cuerpos_conteo;
-    cuerpos_conteo.sort((a, b) => (a.date > b.date) ? 1 : -1)
-        //let data_ls = aguaPermanente;
-    console.log(cuerpos_conteo);
-    popBarsChart.data = cuerpos_conteo;
+    /*  let filtered_count = [];
+      for (p = 0; p < 22; p++) {
+          filtered_count[p].perm = (areclass.filter(function(d) { return d.descrip == "Agua permanente" && d.grupo == j }).length);
+          filtered_count[p].temp = (areclass.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" && d.grupo == j }).length);
+          filtered_count[p].vege = (areclass.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" && d.grupo == j }).length);
+          //filtered_count[m].date = (areclass.date);
+          filtered_count[p].grupo = (areclass.grupo);
+          //if (Math.log(areclass[k].areacpo) <= 1) { areclass[k].grupo = 1 } else if (Math.log(areclass[k].areacpo) <= 2) { areclass[k].grupo = 2 } else if (Math.log(areclass[k].areacpo) <= 3) { areclass[k].grupo = 3 } else if (Math.log(areclass[k].areacpo) <= 4) { areclass[k].grupo = 4 } else if (Math.log(areclass[k].areacpo) <= 5) { areclass[k].grupo = 5 } else if (Math.log(areclass[k].areacpo) <= 6) { areclass[k].grupo = 6 } else if (Math.log(areclass[k].areacpo) <= 7) { areclass[k].grupo = 7 } else if (Math.log(areclass[k].areacpo) <= 8) { areclass[k].grupo = 8 } else if (Math.log(areclass[k].areacpo) <= 9) { areclass[k].grupo = 9 } else if (Math.log(areclass[k].areacpo) <= 10) { areclass[k].grupo = 10 } else if (Math.log(areclass[k].areacpo) <= 11) { areclass[k].grupo = 11 } else if (Math.log(areclass[k].areacpo) <= 12) { areclass[k].grupo = 12 } else if (Math.log(areclass[k].areacpo) <= 13) { areclass[k].grupo = 13 } else if (Math.log(areclass[k].areacpo) <= 14) { areclass[k].grupo = 14 } else if (Math.log(areclass[k].areacpo) <= 15) { areclass[k].grupo = 15 } else if (Math.log(areclass[k].areacpo) <= 16) { areclass[k].grupo = 16 } else if (Math.log(areclass[k].areacpo) <= 17) { areclass[k].grupo = 17 } else if (Math.log(areclass[k].areacpo) <= 18) { areclass[k].grupo = 18 } else if (Math.log(areclass[k].areacpo) <= 19) { areclass[k].grupo = 19 } else if (Math.log(areclass[k].areacpo) <= 20) { areclass[k].grupo = 20 } else { areclass[k].grupo = 21 }
+
+          //if (areclass[k].grupo == 21) { areclass[k].ha_convert = 50000 } else { areclass[k].ha_convert = Math.exp(areclass[k].grupo) / 10000 }
+          //delete areclass[k].date;
+          //delete areclass[k].areacpo;
+
+      };*/
+
+    //console.log("filtered_count", filtered_count);
+
+
+
+
+
+
+
+
+    /*let Permanente_1 = areclass.filter(function(d) { return d.descrip == "Agua permanente" });
+    let Temporal_1 = areclass.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" });
+    let Vegetacion_1 = areclass.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" });
+
+    //let j;
+    /*for (j = 0; j < Permanente_1.length; j++) {
+        Permanente_1[j].permanente = Permanente_1[j].grupo;
+        Permanente_1[j].temporal = Temporal_1[j].grupo;
+        Permanente_1[j].vegetacion = Vegetacion_1[j].grupo;
+        delete Permanente_1[j].descrip;
+        delete Permanente_1[j].grupo;
+    }*/
+
+    //console.log("Permanente_1", Permanente_1.length, Temporal_1.length, Vegetacion_1.length);
+
+
+
+
+
+    /* let areclass_1 = areclass;
+     areclass_1.sort((a, b) => (a.ha_convert < b.ha_convert) ? 1 : -1)
+     popBarsChart.data = areclass_1;*/
+
+
+
+    //let bodytypes = ["Agua permanente", "Áreas temporalmente inundadas", "Suelos húmedos-vegetación acuática"];
+    // console.log((areclass.filter(function(d) { return d.descrip == "Agua permanente" })).length);
+    //console.log((areclass.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" })).length);
+    //console.log((areclass.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" })).length);
+
+    //console.log(bodytypes[0], bodytypes[1], bodytypes[2])
+
+    /* let c1;
+     let c2;
+     let m = 0;
+     let body_counter = [];
+
+     for (c1 = 0; c1 < bodytypes.length; c1++) {
+         for (c2 = 1; c2 < 22; c2++) {
+             body_counter[m] = (areclass.filter(d => { return d.descrip === bodytypes[c1] && d.grupo === c2 })).length;
+             //body_counter[m].cuenta = cuenta;
+             //body_counter[m].descrip = bodytypes[c1];
+             //body_counter[m].ln = c2;
+
+             console.log(body_counter[m], m, bodytypes[c1], c2);
+             m = m + 1;
+
+         }
+     }
+
+     //console.log("bc", body_counter)
+
+     /* let aguaPermanente_2 = merged_2.filter(function(d) { return d.descrip == "Agua permanente" });
+      let aguaTemporal_2 = merged_2.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" });
+      let aguaVegetacion_2 = merged_2.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" });
+
+      let k;
+      let cuerpos_conteo = aguaPermanente_2;
+
+      for (k = 0; k < cuerpos_conteo.length; k++) {
+          cuerpos_conteo[k].permanente = aguaPermanente_2[k].cuenta;
+          cuerpos_conteo[k].temporal = aguaTemporal_2[k].cuenta;
+          cuerpos_conteo[k].vegetacion = aguaVegetacion_2[k].cuenta;
+          delete cuerpos_conteo[k].descrip;
+          delete cuerpos_conteo[k].cuenta;
+      }
+
+      //console.log(cuerpos_conteo);
+
+      //  let grijalva_bodyCount = cuerpos_conteo;
+      cuerpos_conteo.sort((a, b) => (a.date > b.date) ? 1 : -1)
+          //let data_ls = aguaPermanente;
+      console.log("cuerpos conteo", cuerpos_conteo);
+      popBarsChart.data = cuerpos_conteo;*/
 
     //------------------------------------------------------------------------------------------------------------------------------------