sync barchart and stacked areas

public/js/cuerpos_charts.js

 /*
- * Copyright 2019 - All rights reserved.
+ * Copyright 2021 - All rights reserved.
  * Rodrigo Tapia-McClung
  *
- * August-September 2019
+ * January 2021
  */
 
 /* globals map, userFiles, userDates, indicators, indicatorVars, indicatorsNames */
@@ -646,21 +646,36 @@ function grijalva_theme(target) {
             am4core.color("#00c5ff"),
             am4core.color("#ff5500"),
             am4core.color("#98e600"),
-
-
-            //am4core.color("#ff5500"), //,
-            //am4core.color("#343d56")
-            //am4core.color("#232555"),
-            //am4core.color("#64297B"),
         ];
     }
 }
 
+function customizeGrip(grip) {
+    // Remove default grip image
+    grip.icon.disabled = true;
+
+    // Disable background
+    grip.background.disabled = true;
+
+
+
+    // Add rotated rectangle as bi-di arrow
+    var img = grip.createChild(am4core.Rectangle);
+    img.width = 7;
+    img.height = 7;
+    img.fill = am4core.color("#999");
+    img.rotation = 45;
+    img.align = "center";
+    img.valign = "middle";
+
+
+
+}
 //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ RADAR- LINES
 am4core.ready(function() {
 
     // Themes begin
-    am4core.useTheme(am4themes_animated);
+    // am4core.useTheme(am4themes_animated);
     let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
     // Themes end
 
@@ -669,24 +684,11 @@ am4core.ready(function() {
 
     let title = chart.titles.create();
     title.text = "Superficie total por año";
-    title.fontSize = 15;
+    title.fontSize = 10;
     title.marginBottom = 10;
     title.fill = am4core.color(mainTextColor);
 
     var data = [];
-    /* var value1 = 500;
-     var value2 = 600;
-     var value3 = 300;
-
-     for (var i = 0; i < 12; i++) {
-         let date = new Date();
-         date.setMonth(i, 1);
-         value1 -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 70);
-         value2 -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 50);
-         value3 -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 20);
-         data.push({ date: date, value1: value1, value2: value2, value3: value3 })
-     }*/
-
     chart.data = data;
     //console.log(data);
 
@@ -696,14 +698,17 @@ am4core.ready(function() {
     categoryAxis.dataFields.category = "month";
     categoryAxis.fontSize = 9;
     categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
+    categoryAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
 
 
     var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+    valueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
     valueAxis.extraMin = 0.2;
     valueAxis.extraMax = 0.2;
     valueAxis.tooltip.disabled = true;
     valueAxis.fontSize = 9;
     valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
+    valueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
     //   valueAxis.renderer.labels.template.fontSize = 15;
 
 
@@ -711,9 +716,14 @@ am4core.ready(function() {
     var series1 = chart.series.push(new am4charts.RadarSeries());
     series1.dataFields.valueY = "value1";
     series1.dataFields.categoryX = "month" //"date";
-    series1.strokeWidth = 2;
+    series1.strokeWidth = 1.5;
     series1.tooltipText = "{valueY}";
-    series1.name = "2016";
+    series1.name = "2016"
+    series1.stroke = am4core.color("#F98293"); // red
+    series1.tooltip.getFillFromObject = false;
+    series1.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
+    series1.tooltip.background.fill = am4core.color("#F98293");
+
     //series1.bullets.create(am4charts.CircleBullet);
     // series1.dataItems.template.locations.dateX = 0.5;
 
@@ -721,28 +731,41 @@ am4core.ready(function() {
     var series2 = chart.series.push(new am4charts.RadarSeries());
     series2.dataFields.valueY = "value2";
     series2.dataFields.categoryX = "month"; //"date";
-    series2.strokeWidth = 2;
+    series2.strokeWidth = 1.5;
     series2.tooltipText = "{valueY}";
     series2.name = "2017";
+    series2.stroke = am4core.color("#2AC2BB"); // red
+    series2.tooltip.getFillFromObject = false;
+    //series2.tooltip.background.fill = am4core.color("#");
+    series2.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
+    series2.tooltip.background.fill = am4core.color("#2AC2BB"); // red
+    //series2.tooltip.background.fill = am4core.
     //series2.bullets.create(am4charts.CircleBullet);
     // series2.dataItems.template.locations.dateX = 0.5;
 
     var series3 = chart.series.push(new am4charts.RadarSeries());
     series3.dataFields.valueY = "value3";
     series3.dataFields.categoryX = "month"; //"date";
-    series3.strokeWidth = 2;
+    series3.strokeWidth = 1.5;
     series3.tooltipText = "{valueY}";
     series3.name = "2018";
+    series3.stroke = am4core.color("#FDA259"); // red
+    series3.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
+    series3.tooltip.getFillFromObject = false;
+    series3.tooltip.background.fill = am4core.color("#FDA259");
     //series2.bullets.create(am4charts.CircleBullet);
     // series3.dataItems.template.locations.X = 0.5;
 
-
-
-
     chart.scrollbarX = new am4core.Scrollbar();
     chart.scrollbarX.minHeight = 1;
+    chart.scrollbarX.parent = chart.bottomAxesContainer;
     chart.scrollbarY = new am4core.Scrollbar();
     chart.scrollbarY.minWidth = 1;
+    customizeGrip(chart.scrollbarX.startGrip);
+    customizeGrip(chart.scrollbarX.endGrip);
+    customizeGrip(chart.scrollbarY.startGrip);
+    customizeGrip(chart.scrollbarY.endGrip);
+
 
 
 
@@ -754,19 +777,20 @@ am4core.ready(function() {
     chart.legend.labels.template.fill = am4core.color(mainTextColor);
 
 
-
     var range_estiaje = categoryAxis.axisRanges.create();
     range_estiaje.category = "March";
     range_estiaje.endcategory = "April";
-    range_estiaje.axisFill.fill = am4core.color("#DFA34D");
-    range_estiaje.axisFill.fillOpacity = 0.5;
+    range_estiaje.axisFill.fill = am4core.color("#595952");
+    //range_estiaje.axisFill.fill = am4core.color("#DFA34D");
+    range_estiaje.axisFill.fillOpacity = 0.4;
     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.axisFill.fill = am4core.color("#595952");
+    //range_estiaje_1.axisFill.fill = am4core.color("#DFA34D");
+    range_estiaje_1.axisFill.fillOpacity = 0.4;
     range_estiaje_1.grid.strokeOpacity = 0;
 
     var range_lluvTropical = categoryAxis.axisRanges.create();
@@ -774,71 +798,71 @@ am4core.ready(function() {
     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.axisFill.fill = am4core.color("#838278");
+    range_lluvTropical.axisFill.fillOpacity = 0.4;
     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.axisFill.fill = am4core.color("#838278");
+    range_lluvTropical_1.axisFill.fillOpacity = 0.4;
     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.axisFill.fill = am4core.color("#838278");
+    range_lluvTropical_2.axisFill.fillOpacity = 0.4;
     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.axisFill.fill = am4core.color("#838278");
+    range_lluvTropical_3.axisFill.fillOpacity = 0.4;
     range_lluvTropical_3.grid.strokeOpacity = 0;
 
     var range_lluvTropicalInv = categoryAxis.axisRanges.create();
     range_lluvTropicalInv.category = "September";
     range_lluvTropicalInv.endcategory = "October";
-    range_lluvTropicalInv.axisFill.fill = am4core.color("#AF8BBA");
-    range_lluvTropicalInv.axisFill.fillOpacity = 0.5;
+    range_lluvTropicalInv.axisFill.fill = am4core.color("#B1AE9F");
+    range_lluvTropicalInv.axisFill.fillOpacity = 0.4;
     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.axisFill.fill = am4core.color("#B1AE9F");
+    range_lluvTropicalInv_1.axisFill.fillOpacity = 0.4;
     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.axisFill.fill = am4core.color("#B1AE9F");
+    range_lluvTropicalInv_2.axisFill.fillOpacity = 0.4;
     range_lluvTropicalInv_2.grid.strokeOpacity = 0;
 
     var range_lluvInv = categoryAxis.axisRanges.create();
     range_lluvInv.category = "December";
     range_lluvInv.endcategory = "January";;
-    range_lluvInv.axisFill.fill = am4core.color("#76B66A");
-    range_lluvInv.axisFill.fillOpacity = 0.5;
+    range_lluvInv.axisFill.fill = am4core.color("#E1DBC8");
+    range_lluvInv.axisFill.fillOpacity = 0.4;
     range_lluvInv.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.axisFill.fill = am4core.color("#E1DBC8");
+    range_lluvInv_1.axisFill.fillOpacity = 0.4;
     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.axisFill.fill = am4core.color("#E1DBC8");
+    range_lluvInv_2.axisFill.fillOpacity = 0.4;
     range_lluvInv_2.grid.strokeOpacity = 0;
 
 
@@ -847,10 +871,10 @@ am4core.ready(function() {
     chart.legend.fontSize = 9;
 
     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") },
-        { name: "Lluvia Invernal", fill: am4core.color("#76B66A") }
+    var legenddata2 = [{ name: "Estiaje", fill: am4core.color("#595952") },
+        { name: "Tropical", fill: am4core.color("#838278") },
+        { name: "Tropical-Invernal", fill: am4core.color("#B1AE9F") },
+        { name: "Invernal", fill: am4core.color("#E1DBC8") }
 
     ];
 
@@ -858,6 +882,9 @@ am4core.ready(function() {
     chart.legend.data = legenddata2;
     chart.legend.fontSize = 10;
     chart.legend.labels.template.fill = am4core.color(mainTextColor);
+    var markerTemplate = chart.legend.markers.template;
+    markerTemplate.width = 20;
+    markerTemplate.height = 20;
 
 }); // end am4core.ready()
 
@@ -873,8 +900,8 @@ am4core.ready(function() {
 
     let title = chart.titles.create();
     title.text = "Superficie por tipo de cuerpo";
-    title.fontSize = 15;
-    title.marginBottom = 30;
+    title.fontSize = 10;
+    title.marginBottom = 15;
     title.fill = am4core.color(mainTextColor);
 
     // Increase contrast by taking evey second color
@@ -907,7 +934,8 @@ am4core.ready(function() {
         series.yAxis = valueAxis;
         series.name = name;
         //series.tooltipText = "{name}: [bold]{valueY.formatNumber('#,###.0')} Ha[/]";
-        series.tooltipText = "{valueY.formatNumber('#,###.0')} Ha[/]";
+        series.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
+        series.tooltipText.fontSize = 8;
         series.tensionX = 0.8;
         series.showOnInit = true;
 
@@ -960,15 +988,26 @@ am4core.ready(function() {
     createAxisAndSeries("vegetacion", "Suelos húmedos-vegetación acuática", true, "rectangle");
 
     // Add legend
+    /*
     chart.legend = new am4charts.Legend();
     //chart.legend.labels.template.fill = am4core.color("#ffff");
     chart.legend.fontSize = 8;
     chart.legend.labels.template.fill = am4core.color(mainTextColor);
     chart.legend.maxHeight = 100;
-
+*/
 
     // Add cursor
     chart.cursor = new am4charts.XYCursor();
+    chart.scrollbarX = new am4core.Scrollbar();
+    chart.scrollbarX.minHeight = 1;
+    chart.scrollbarX.parent = chart.bottomAxesContainer;
+    customizeGrip(chart.scrollbarX.startGrip);
+    customizeGrip(chart.scrollbarX.endGrip);
+    // Style scrollbar
+
+
+
+
 
     // generate some random data, quite different range
     function generateChartData() {
@@ -981,7 +1020,7 @@ am4core.ready(function() {
         var temporal = 2900;
         var vegetacion = 8700;
 
-        for (var i = 0; i < 15; i++) {
+        /* for (var i = 0; i < 15; i++) {
              // we create date objects here. In your data, you can have date strings
              // and then set format of your dates using chart.dataDateFormat property,
              // however when possible, use date objects, as this will speed up chart rendering.
@@ -998,10 +1037,89 @@ am4core.ready(function() {
                  temporal: temporal,
                  vegetacion: vegetacion
              });
-        }
+         }*/
         return chartData;
     }
 
+    // axis ranges
+    var range = dateAxis.axisRanges.create();
+    range.date = new Date(2016, 0, 1);
+    range.endDate = new Date(2016, 2, 1);
+    range.axisFill.fill = am4core.color("#E1DBC8");
+    range.axisFill.fillOpacity = 0.4;
+
+    var range1 = dateAxis.axisRanges.create();
+    range1.date = new Date(2016, 2, 1);
+    range1.endDate = new Date(2016, 4, 1);
+    range1.axisFill.fill = am4core.color("#595952");
+    range1.axisFill.fillOpacity = 0.4;
+
+    var range2 = dateAxis.axisRanges.create();
+    range2.date = new Date(2016, 4, 1);
+    range2.endDate = new Date(2016, 8, 1);
+    range2.axisFill.fill = am4core.color("#838278");
+    range2.axisFill.fillOpacity = 0.4;
+
+    var range2 = dateAxis.axisRanges.create();
+    range2.date = new Date(2016, 8, 1);
+    range2.endDate = new Date(2016, 11, 1);
+    range2.axisFill.fill = am4core.color("#B1AE9F");
+    range2.axisFill.fillOpacity = 0.4;
+
+    var range3 = dateAxis.axisRanges.create();
+    range3.date = new Date(2016, 11, 1);
+    range3.endDate = new Date(2017, 2, 1);
+    range3.axisFill.fill = am4core.color("#E1DBC8");
+    range3.axisFill.fillOpacity = 0.4;
+
+    var range4 = dateAxis.axisRanges.create();
+    range4.date = new Date(2017, 2, 1);
+    range4.endDate = new Date(2017, 4, 1);
+    range4.axisFill.fill = am4core.color("#595952");
+    range4.axisFill.fillOpacity = 0.4;
+
+    var range5 = dateAxis.axisRanges.create();
+    range5.date = new Date(2017, 4, 1);
+    range5.endDate = new Date(2017, 8, 1);
+    range5.axisFill.fill = am4core.color("#838278");
+    range5.axisFill.fillOpacity = 0.4;
+
+    var range6 = dateAxis.axisRanges.create();
+    range6.date = new Date(2017, 8, 1);
+    range6.endDate = new Date(2017, 11, 1);
+    range6.axisFill.fill = am4core.color("#B1AE9F");
+    range6.axisFill.fillOpacity = 0.4;
+
+    var range7 = dateAxis.axisRanges.create();
+    range7.date = new Date(2017, 11, 1);
+    range7.endDate = new Date(2018, 2, 1);
+    range7.axisFill.fill = am4core.color("#E1DBC8");
+    range7.axisFill.fillOpacity = 0.4;
+
+    var range8 = dateAxis.axisRanges.create();
+    range8.date = new Date(2018, 2, 1);
+    range8.endDate = new Date(2018, 4, 1);
+    range8.axisFill.fill = am4core.color("#595952");
+    range8.axisFill.fillOpacity = 0.4;
+
+    var range9 = dateAxis.axisRanges.create();
+    range9.date = new Date(2018, 4, 1);
+    range9.endDate = new Date(2018, 8, 1);
+    range9.axisFill.fill = am4core.color("#838278");
+    range9.axisFill.fillOpacity = 0.4;
+
+    var range10 = dateAxis.axisRanges.create();
+    range10.date = new Date(2018, 8, 1);
+    range10.endDate = new Date(2018, 11, 1);
+    range10.axisFill.fill = am4core.color("#B1AE9F");
+    range10.axisFill.fillOpacity = 0.4;
+
+    var range11 = dateAxis.axisRanges.create();
+    range11.date = new Date(2018, 11, 1);
+    range11.endDate = new Date(2019, 0, 1);
+    range11.axisFill.fill = am4core.color("#E1DBC8");
+    range11.axisFill.fillOpacity = 0.4;
+
 }); // end am4core.ready()
 
 //------------------------------------------------------------------------------------------------------------------------------------ STACKED AREAS
@@ -1015,8 +1133,8 @@ am4core.ready(function() {
 
     let title = chart.titles.create();
     title.text = "Superficie acumulada";
-    title.fontSize = 15;
-    title.marginBottom = 30;
+    title.fontSize = 10;
+    title.marginBottom = 15;
     title.fill = am4core.color(mainTextColor);
 
     // chart.dateFormatter.inputDateFormat = "dd-mm-yyyy";
@@ -1033,7 +1151,7 @@ am4core.ready(function() {
 
     var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
     valueAxis.tooltip.disabled = true;
-    valueAxis.fontSize = 10;
+    valueAxis.fontSize = 8;
     valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
 
     var series = chart.series.push(new am4charts.LineSeries());
@@ -1042,11 +1160,11 @@ am4core.ready(function() {
     series.dataFields.valueY = "permanente";
     //series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
     //series.tooltipText = "[#000]{valueY.value}[/]";
-    series.tooltipText = "[#000]{valueY.formatNumber('#,###.#')} Ha";
-    series.tooltip.background.fill = am4core.color("#FFF");
+    series.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.#')} Ha";
+    //series.tooltip.background.fill = am4core.color("#FFF");
     series.tooltip.getStrokeFromObject = true;
     series.tooltip.background.strokeWidth = 3;
-    series.tooltip.getFillFromObject = false;
+    //series.tooltip.getFillFromObject = false;
     series.fillOpacity = 0.6;
     series.strokeWidth = 2;
     series.stacked = true;
@@ -1057,9 +1175,9 @@ am4core.ready(function() {
     series2.dataFields.valueY = "temporal";
     //series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
     //series2.tooltipText = "[#000]{valueY.value}[/]";
-    series2.tooltipText = "[#000]{valueY.formatNumber('#,###.#')} Ha";
-    series2.tooltip.background.fill = am4core.color("#FFF");
-    series2.tooltip.getFillFromObject = false;
+    series2.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.#')} Ha";
+    //series2.tooltip.background.fill = am4core.color("#FFF");
+    //series2.tooltip.getFillFromObject = false;
     series2.tooltip.getStrokeFromObject = true;
     series2.tooltip.background.strokeWidth = 3;
     series2.sequencedInterpolation = true;
@@ -1073,9 +1191,9 @@ am4core.ready(function() {
     series3.dataFields.valueY = "vegetacion";
     //series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
     // series3.tooltipText = "[#000]{valueY.value}[/]";
-    series3.tooltipText = "[#000]{valueY.formatNumber('#,###.#')} Ha";
-    series3.tooltip.background.fill = am4core.color("#FFF");
-    series3.tooltip.getFillFromObject = false;
+    series3.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.#')} Ha";
+    //series3.tooltip.background.fill = am4core.color("#FFF");
+    //series3.tooltip.getFillFromObject = false;
     series3.tooltip.getStrokeFromObject = true;
     series3.tooltip.background.strokeWidth = 3;
     series3.sequencedInterpolation = true;
@@ -1088,39 +1206,130 @@ am4core.ready(function() {
     chart.cursor.xAxis = dateAxis;
     chart.scrollbarX = new am4core.Scrollbar();
     chart.scrollbarX.minHeight = 1;
+    chart.scrollbarX.parent = chart.bottomAxesContainer;
+    customizeGrip(chart.scrollbarX.startGrip);
+    customizeGrip(chart.scrollbarX.endGrip);
     //chart.scrollbarX.position = "bottom";
 
     // Add a legend 
-    chart.legend = new am4charts.Legend();
-    // chart.legend.position = "top";
-    chart.legend.fontSize = 10;
-    chart.legend.labels.template.fill = am4core.color(mainTextColor);
-
     // axis ranges
     var range = dateAxis.axisRanges.create();
-    range.date = new Date(2001, 0, 1);
-    range.endDate = new Date(2003, 0, 1);
-    range.axisFill.fill = chart.colors.getIndex(7);
-    range.axisFill.fillOpacity = 0.2;
+    range.date = new Date(2016, 0, 1);
+    range.endDate = new Date(2016, 2, 1);
+    range.axisFill.fill = am4core.color("#E1DBC8");
+    range.axisFill.fillOpacity = 0.4;
 
-    range.label.text = "Fines for speeding increased";
+    var range1 = dateAxis.axisRanges.create();
+    range1.date = new Date(2016, 2, 1);
+    range1.endDate = new Date(2016, 4, 1);
+    range1.axisFill.fill = am4core.color("#595952");
+    range1.axisFill.fillOpacity = 0.4;
+
+    var range2 = dateAxis.axisRanges.create();
+    range2.date = new Date(2016, 4, 1);
+    range2.endDate = new Date(2016, 8, 1);
+    range2.axisFill.fill = am4core.color("#838278");
+    range2.axisFill.fillOpacity = 0.4;
+
+    var range2 = dateAxis.axisRanges.create();
+    range2.date = new Date(2016, 8, 1);
+    range2.endDate = new Date(2016, 11, 1);
+    range2.axisFill.fill = am4core.color("#B1AE9F");
+    range2.axisFill.fillOpacity = 0.4;
+
+    var range3 = dateAxis.axisRanges.create();
+    range3.date = new Date(2016, 11, 1);
+    range3.endDate = new Date(2017, 2, 1);
+    range3.axisFill.fill = am4core.color("#E1DBC8");
+    range3.axisFill.fillOpacity = 0.4;
+
+    var range4 = dateAxis.axisRanges.create();
+    range4.date = new Date(2017, 2, 1);
+    range4.endDate = new Date(2017, 4, 1);
+    range4.axisFill.fill = am4core.color("#595952");
+    range4.axisFill.fillOpacity = 0.4;
+
+    var range5 = dateAxis.axisRanges.create();
+    range5.date = new Date(2017, 4, 1);
+    range5.endDate = new Date(2017, 8, 1);
+    range5.axisFill.fill = am4core.color("#838278");
+    range5.axisFill.fillOpacity = 0.4;
+
+    var range6 = dateAxis.axisRanges.create();
+    range6.date = new Date(2017, 8, 1);
+    range6.endDate = new Date(2017, 11, 1);
+    range6.axisFill.fill = am4core.color("#B1AE9F");
+    range6.axisFill.fillOpacity = 0.4;
+
+    var range7 = dateAxis.axisRanges.create();
+    range7.date = new Date(2017, 11, 1);
+    range7.endDate = new Date(2018, 2, 1);
+    range7.axisFill.fill = am4core.color("#E1DBC8");
+    range7.axisFill.fillOpacity = 0.4;
+
+    var range8 = dateAxis.axisRanges.create();
+    range8.date = new Date(2018, 2, 1);
+    range8.endDate = new Date(2018, 4, 1);
+    range8.axisFill.fill = am4core.color("#595952");
+    range8.axisFill.fillOpacity = 0.4;
+
+    var range9 = dateAxis.axisRanges.create();
+    range9.date = new Date(2018, 4, 1);
+    range9.endDate = new Date(2018, 8, 1);
+    range9.axisFill.fill = am4core.color("#838278");
+    range9.axisFill.fillOpacity = 0.4;
+
+    var range10 = dateAxis.axisRanges.create();
+    range10.date = new Date(2018, 8, 1);
+    range10.endDate = new Date(2018, 11, 1);
+    range10.axisFill.fill = am4core.color("#B1AE9F");
+    range10.axisFill.fillOpacity = 0.4;
+
+    var range11 = dateAxis.axisRanges.create();
+    range11.date = new Date(2018, 11, 1);
+    range11.endDate = new Date(2019, 0, 1);
+    range11.axisFill.fill = am4core.color("#E1DBC8");
+    range11.axisFill.fillOpacity = 0.4;
+
+
+    /* Set up cursor behavior */
+    chart.cursor.events.on("cursorpositionchanged", function(ev) {
+        let xAxis = ev.target.chart.xAxes.getIndex(0);
+        let yy = xAxis.positionToDate(xAxis.toAxisPosition(ev.target.xPosition)).getFullYear().toString();
+        let mm = xAxis.positionToDate(xAxis.toAxisPosition(ev.target.xPosition)).getMonth().toString();
+        let month = 0,
+            startDate = 0,
+            endDate = 0;
+        if (mm < 9) { month = "0" + (parseInt(mm) + 1).toString(); } else {
+            month = parseInt(mm) + 1;
+            month.toString();
+        }
+        filterDate = new Date(`${yy}-${month}-01T00:00:00`);
+        updateBarChart(filterDate, barChartData);
+
+    })
+
+    /* popChart.cursor = new am4charts.XYCursor();
+popChart.snapToSeries = popSeriesFemale;
+popChart.cursor.events.on("cursorpositionchanged", function(ev) {
+  currentYear = popXAxis.positionToDate(popXAxis.toAxisPosition(ev.target.xPosition)).getFullYear().toString();
+  updateData();
+});*/
+
+    /* range.label.text = "Fines for speeding increased";
      range.label.inside = true;
      range.label.rotation = 90;
      range.label.horizontalCenter = "right";
-    range.label.verticalCenter = "bottom";
+     range.label.verticalCenter = "bottom";*/
+
 
-    var range2 = dateAxis.axisRanges.create();
-    range2.date = new Date(2007, 0, 1);
-    range2.grid.stroke = chart.colors.getIndex(7);
-    range2.grid.strokeOpacity = 0.6;
-    range2.grid.strokeDasharray = "5,2";
 
 
-    range2.label.text = "Motorcycle fee introduced";
+    /*  range2.label.text = "Motorcycle fee introduced";
       range2.label.inside = true;
       range2.label.rotation = 90;
       range2.label.horizontalCenter = "right";
-    range2.label.verticalCenter = "bottom";
+      range2.label.verticalCenter = "bottom";*/
 
 }); // end am4core.ready()
 
@@ -1136,44 +1345,24 @@ am4core.ready(function() {
 
     let title = chart.titles.create();
     title.text = "Conteo por tipo de cuerpo";
-    title.fontSize = 15;
-    title.marginBottom = 30;
+    title.fontSize = 10;
+    title.marginBottom = 5;
     title.fill = am4core.color(mainTextColor);
 
 
-    /*// Add data
-    chart.data = [{
-        "year": 2005,
-        "income": 23.5,
-        "expenses": 18.1
-    }, {
-        "year": 2006,
-        "income": 26.2,
-        "expenses": 22.8
-    }, {
-        "year": 2007,
-        "income": 30.1,
-        "expenses": 23.9
-    }, {
-        "year": 2008,
-        "income": 29.5,
-        "expenses": 25.1
-    }, {
-        "year": 2009,
-        "income": 24.6,
-        "expenses": 25
-    }];*/
-
     // Create axes
-    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
-    categoryAxis.dataFields.category = "ha_convert";
-    categoryAxis.numberFormatter.numberFormat = "#,###.0";
+    //var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
+    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+    categoryAxis.dataFields.category = "grupo";
+    categoryAxis.numberFormatter.numberFormat = "#,###.#";
     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);
+    categoryAxis.title.text = "Superficie (Ha)";
+    categoryAxis.title.fill = am4core.color(mainTextColor);
 
     /*var dateAxis = chart.yAxes.push(new am4charts.DateAxis());
     dateAxis.dataFields.date = "date"; //"year";
@@ -1187,10 +1376,12 @@ am4core.ready(function() {
 
 
 
-    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
-    valueAxis.renderer.opposite = true;
-    valueAxis.calculateTotals = true
+    //var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
+    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+    //valueAxis.renderer.opposite = true;
+    //valueAxis.calculateTotals = true
     valueAxis.fontSize = 10;
+    valueAxis.extraMax = 0.05;
     valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
 
 
@@ -1198,38 +1389,55 @@ am4core.ready(function() {
     // Create series
     function createSeries(field, name) {
         var series = chart.series.push(new am4charts.ColumnSeries());
-        series.dataFields.valueX = //field;
-            series.dataFields.categoryY = "ha_convert";
-        series.dataFields.valueYShow = "count";
+        // series.dataFields.valueX = field;
+        //series.dataFields.categoryY = "grupo";
+        series.dataFields.valueY = field;
+        series.dataFields.categoryX = "grupo";
+        // series.dataFields.valueYShow = "count";
 
-        //series.dataFields.dateY = "date"; //"year";
+        // series.dataFields.categoryY = "grupo"; //"year";
+        series.dataFields.categoryX = "grupo"; //"year";
         series.name = name;
-        series.columns.template.tooltipText = "[bold]{dateX}[/]{name}: [bold]{valueX}[/]";
+        series.columns.template.tooltipText = "[underline][bold]Menor a [bold]{categoryX.formatNumber('#,###.#')} Ha[/]: {valueY.formatNumber('#,###.#')} cuerpos[/]";
         series.columns.template.height = am4core.percent(100);
         series.sequencedInterpolation = true;
 
 
         var valueLabel = series.bullets.push(new am4charts.LabelBullet());
-        valueLabel.label.text = "{valueX}";
-        valueLabel.label.horizontalCenter = "left";
-        valueLabel.label.dx = 10;
+        //valueLabel.label.text = "{valueX}";
+        valueLabel.label.text = "{valueY}";
+        valueLabel.label.horizontalCenter = "middle";
+        //valueLabel.label.verticalCenter = "top";
+        //valueLabel.label.align = "center";
+        valueLabel.label.dx = 3;
+        valueLabel.label.dy = -5;
         valueLabel.label.hideOversized = false;
         valueLabel.label.truncate = false;
         valueLabel.fontSize = 10;
-        valueLabel.label.fill = am4core.color(mainTextColor);
+        //valueLabel.label.fill = am4core.color(mainTextColor);
+        valueLabel.label.fill = am4core.color("#fff");
 
-        var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
+        /* var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
          categoryLabel.label.text = "{name}";
          categoryLabel.label.horizontalCenter = "right";
          categoryLabel.label.dx = -10;
          //categoryLabel.label.fill = am4core.color("#fff");
          categoryLabel.label.hideOversized = false;
          categoryLabel.label.truncate = false;
-        categoryLabel.fontSize = 12;
+         categoryLabel.fontSize = 12;*/
     }
 
-    createSeries("permanente", "Agua permanente");
-    createSeries("temporal", "Áreas temporalmente inundadas");
-    createSeries("vegetacion", "Suelos húmedos-vegetación acuática");
+    createSeries("ap", "Agua permanente");
+    createSeries("at", "Áreas temporalmente inundadas");
+    createSeries("av", "Suelos húmedos-vegetación acuática");
+
+    // Add a legend
+    /*
+    chart.legend = new am4charts.Legend();
+    // chart.legend.position = "top";
+    chart.legend.fontSize = 10;
+    chart.legend.labels.template.fill = am4core.color(mainTextColor);*/
 
 }); // end am4core.ready()
+
+//--------------------------------------------------------------------------------------------------------------------
\ No newline at end of file

public/js/cuerpos_functions.js

@@ -359,6 +359,8 @@ const getMinMax = table => {
     });
 }
 
+let barChartData = [];
+
 const populateMap = async(mapData) => {
 
     let baseUrl = new URL(`/data`, window.location.href).href;
@@ -416,6 +418,8 @@ const populateMap = async(mapData) => {
      element.quantity = quantity;
      cart.push(element);*/
 
+    // TODO: check this for loop to use selected months and years
+
     var element = {},
         cart = [],
         cntr;
@@ -433,7 +437,7 @@ const populateMap = async(mapData) => {
     //radialChart.data = data_1;
 
     //console.log(data_1);
-    console.log(cart);
+    //console.log(cart);
     radialChart.data = cart;
 
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINE CHART
@@ -522,172 +526,76 @@ const populateMap = async(mapData) => {
         // console.log("grijalva_bodies_1", grijalva_bodies_1);
     stackedAreaChart.data = grijalva_bodies_1;
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ POPULATION BARS
-    let data_pb = [];
-    let popBarsChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph");
+    //let data_pb = [];
 
     // async queries for each date that has been loaded
     const queries_pb = userFiles.map(async(mes, i) => {
+        let query_pb = `${baseUrl}/query/${mes}?columns=descrip, areacpo`;
         //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=descrip, areacpo`;
         const queryData = await d3.json(query_pb);
         let date = new Date(dateArray[i]);
-        date.setFullYear(2016)
-        for (const wbody in queryData) {
-            queryData[wbody].date = date;
+        for (let k = 0; k < queryData.length; k++) {
+            queryData[k].date = date; // assign date to each element
+            // assign bar groups to each element
+            // TODO: better way to write these conditions?
+            if (Math.log(queryData[k].areacpo) <= 1) { queryData[k].grupo = 1 } else if (Math.log(queryData[k].areacpo) <= 2) { queryData[k].grupo = 2 } else if (Math.log(queryData[k].areacpo) <= 3) { queryData[k].grupo = 3 } else if (Math.log(queryData[k].areacpo) <= 4) { queryData[k].grupo = 4 } else if (Math.log(queryData[k].areacpo) <= 5) { queryData[k].grupo = 5 } else if (Math.log(queryData[k].areacpo) <= 6) { queryData[k].grupo = 6 } else if (Math.log(queryData[k].areacpo) <= 7) { queryData[k].grupo = 7 } else if (Math.log(queryData[k].areacpo) <= 8) { queryData[k].grupo = 8 } else if (Math.log(queryData[k].areacpo) <= 9) { queryData[k].grupo = 9 } else if (Math.log(queryData[k].areacpo) <= 10) { queryData[k].grupo = 10 } else if (Math.log(queryData[k].areacpo) <= 11) { queryData[k].grupo = 11 } else if (Math.log(queryData[k].areacpo) <= 12) { queryData[k].grupo = 12 } else if (Math.log(queryData[k].areacpo) <= 13) { queryData[k].grupo = 13 } else if (Math.log(queryData[k].areacpo) <= 14) { queryData[k].grupo = 14 } else if (Math.log(queryData[k].areacpo) <= 15) { queryData[k].grupo = 15 } else if (Math.log(queryData[k].areacpo) <= 16) { queryData[k].grupo = 16 } else if (Math.log(queryData[k].areacpo) <= 17) { queryData[k].grupo = 17 } else if (Math.log(queryData[k].areacpo) <= 18) { queryData[k].grupo = 18 } else if (Math.log(queryData[k].areacpo) <= 19) { queryData[k].grupo = 19 } else if (Math.log(queryData[k].areacpo) <= 20) { queryData[k].grupo = 20 } else { queryData[k].grupo = 20.0301186564 }
+            //if (k <= 20 && Math.log(queryData[k].areacpo) <= k + 1) { queryData[k].grupo = k + 1 } else { queryData[k].grupo = 20.0301186564 }
         }
-        data_pb.push(queryData);
-
+        //data_pb.push(queryData);
+        //console.log(queryData)
+        return new Promise(resolve => {
+            resolve(queryData);
         });
-    // wait for all queries to complete
-    const dataQueries_pb = await Promise.all(queries_pb);
+    });
+    //console.log(data_pb)
+    // wait for all queries to complete and set barChartData to its response
+    Promise.all(queries_pb).then((d) => {
+        //console.log(d)
+        barChartData = d;
 
         // and then set chart data
         //lineStackedChart.data = data_ls;
-    // console.log("data_pb", data_pb);
-    var merged_2 = [].concat.apply([], data_pb);
+        //console.log("data_pb", data_pb);
+        //var merged_2 = [].concat.apply([], data_pb);
+        //var merged_2 = [].concat.apply([], barChartData);
+        barChartData = [].concat.apply([], barChartData);
         //console.log("merged_2", merged_2);
+        //console.log(barChartData)
 
+        // set initial date to january 2016
+        let filterDate = new Date(dateArray[0]);
+        updateBarChart(filterDate, barChartData);
 
+        //let startDate = new Date("2015-12-31");
+        //let endDate = new Date("2016-02-01");
+        //let areclass = merged_2.filter(function(d) { return d.date >= startDate && d.date <= endDate });
 
-    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 }
-
-        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("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);
-    }
-
-    output.sort((a, b) => (a > b ? 1 : -1));
-    //console.log("op", output)
-    let p;
-
-    /*  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 areclass = merged_2.filter(d => d.date.valueOf() == filterDate.valueOf());
         
-
-
-
-    /*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;
-
-         }
+        var elementpb = {},
+            cart_pb = [];
+        //cntr;
+        for (cntr = 0; cntr < 22; cntr++) {
+            //console.log(month[cntr]);
+            elementpb = {};
+            elementpb.grupo = Math.exp(cntr) / 10000;
+            elementpb.ap = (areclass.filter(function(d) { return d.descrip == "Agua permanente" && d.grupo == cntr })).length;
+            elementpb.at = (areclass.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" && d.grupo == cntr })).length;
+            elementpb.av = (areclass.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" && d.grupo == cntr })).length;
+            //elementpb.ha = Math.exp(areclass[k].grupo) / 10000;
+            cart_pb.push(elementpb);
+            //console.log(elementpb);
         }
 
-     //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;
-      }
+        let cart_pb1 = cart_pb.filter(function(d) { return d.ap > 0 || d.at > 0 || d.av > 0 });
 
-      //console.log(cuerpos_conteo);
+        cart_pb1.sort((a, b) => (a < b ? 1 : -1));
+        console.log("cart_pb1", cart_pb1);
+        popBarsChart.data = cart_pb1;*/
+    });
 
-      //  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;*/
 
     //------------------------------------------------------------------------------------------------------------------------------------
 
@@ -1091,3 +999,28 @@ legend.onAdd = () => {
     div.innerHTML = html;
     return div;
 };
+
+const updateBarChart = (filterDate, data) => {
+    let popBarsChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "dimfrcpo-graph");
+    let areclass = data.filter(d => d.date.valueOf() == filterDate.valueOf());
+
+    var elementpb = {},
+        cart_pb = [];
+
+    // TODO: prepare all these group data sets instead of recalculating when calling the function
+    for (cntr = 0; cntr < 22; cntr++) {
+        elementpb = {};
+        elementpb.grupo = Math.exp(cntr) / 10000;
+        elementpb.ap = (areclass.filter(function(d) { return d.descrip == "Agua permanente" && d.grupo == cntr })).length;
+        elementpb.at = (areclass.filter(function(d) { return d.descrip == "Áreas temporalmente inundadas" && d.grupo == cntr })).length;
+        elementpb.av = (areclass.filter(function(d) { return d.descrip == "Suelos húmedos-vegetación acuática" && d.grupo == cntr })).length;
+        cart_pb.push(elementpb);
+    }
+
+    let cart_pb1 = cart_pb.filter(function(d) { return d.ap > 0 || d.at > 0 || d.av > 0 });
+
+    cart_pb1.sort((a, b) => (a < b ? 1 : -1));
+    //console.log("cart_pb1", cart_pb1);
+    popBarsChart.data = cart_pb1;
+    popBarsChart.invalidateRawData();
+}
\ No newline at end of file