first chart in periurbano

public/centropais/index.html

@@ -206,11 +206,14 @@
         });
 
         $("#showPeriurban").on("click", () => {
+            ["../js/centropais_periurbano.js", "../js/centropais_periurbano_charts.js"].forEach( src =>{
                 let script = document.createElement('script');
-            script.src = "../js/centropais_periurbano.js";
+            //let script = document.createElement('script');
+            script.src = src;//"../js/centropais_periurbano.js";
             script.async = false;
             document.body.appendChild(script);
             });
+        });
     </script>
 
 </body>

public/js/centropais_periurbano.js

@@ -51,7 +51,7 @@ const setupDates = () => {
         let layersQuery = `${baseUrl}/list_layers`;
         d3.json(layersQuery).then(layers => {
             layers.forEach(layer => {
-                if (layer.f_table_name.startsWith("periurbano")) {
+                if (layer.f_table_name.startsWith("periurbano_")) {
                     let table = layer.f_table_name.split("periurbano_")[1];
                     dateArray.push(timeParse(table)); // convert table names to dates
                     userFiles.push(layer.f_table_name);

public/js/centropais_periurbano_charts.js

+/*
+ * Copyright 2020 - All rights reserved.
+ * Rodrigo Tapia-McClung
+ *
+ * June 2020
+ */
+
+/* globals am4core, am4charts, am4themes_animated, intervals */
+
+let minValue, maxValue;
+let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
+let cellbgColor = getComputedStyle(document.body).getPropertyValue("--main-bg-color");
+
+am4core.ready(function() {
+
+  let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
+
+    // Themes begin
+    //am4core.useTheme(am4themes_animated);
+    // Themes end
+ 
+        // Create chart instance
+        var chart = am4core.create("bottomRightChart", am4charts.XYChart);
+        
+        let title = chart.titles.create();
+    title.text = "Cobertura del medio construido en los tramos del Corredor del Bajío";
+    title.fontSize = 9;
+    title.fill = am4core.color(mainTextColor);
+
+    let table = "periurbanoBajio";
+    let query = `${baseUrl}/query/${table}?columns=region,total20/1000 as has,(total20-total15)*100/total15 as inc&filter=id>6&id<13&sort=inc desc`;
+    d3.json(query).then(d => chart.data = d);
+
+        /* Create axes */
+        var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+        categoryAxis.dataFields.category = "region";
+        categoryAxis.renderer.minGridDistance = 30;
+        categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
+        categoryAxis.renderer.labels.template.fontSize = 9;
+        
+        /* Create primary value axis */
+        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+        valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
+        valueAxis.renderer.labels.template.fontSize = 9;
+
+         /* Create secondary value axis */
+      let percentAxis = chart.yAxes.push(new am4charts.ValueAxis());
+      percentAxis.renderer.opposite = true;
+      percentAxis.min = 0;
+      percentAxis.max = 110;
+      percentAxis.strictMinMax = true;
+      percentAxis.renderer.grid.template.disabled = true;
+      percentAxis.numberFormatter = new am4core.NumberFormatter();
+      percentAxis.numberFormatter.numberFormat = "#'%'"
+      percentAxis.cursorTooltipEnabled = false;
+      percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
+      percentAxis.renderer.labels.template.fontSize = 9;
+        
+        /* Create series */
+        var columnSeries = chart.series.push(new am4charts.ColumnSeries());
+        columnSeries.name = "Medio construido en 2020";
+        columnSeries.dataFields.valueY = "has";
+        columnSeries.dataFields.categoryX = "region";
+        
+        columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} Ha[/] [#fff]{additional}[/]"
+        columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
+        columnSeries.columns.template.propertyFields.stroke = "stroke";
+        columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
+        columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
+        columnSeries.tooltip.label.textAlign = "middle";
+        columnSeries.fill = am4core.color("#fca311");
+        columnSeries.stroke = am4core.color("#fca311");
+        
+        var lineSeries = chart.series.push(new am4charts.LineSeries());
+        lineSeries.name = "% de crecimiento del medio construido 2015-2020";
+        lineSeries.dataFields.valueY = "inc";
+        lineSeries.dataFields.categoryX = "region";
+        lineSeries.yAxis = percentAxis;
+        
+        lineSeries.stroke = am4core.color("#c41e3a");
+        lineSeries.strokeWidth = 3;
+        lineSeries.propertyFields.strokeDasharray = "lineDash";
+        lineSeries.tooltip.label.textAlign = "middle";
+        
+        var bullet = lineSeries.bullets.push(new am4charts.Bullet());
+        bullet.fill = am4core.color("#c41e3a"); // tooltips grab fill from parent by default
+        bullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} %[/] [#fff]{additional}[/]"
+        var circle = bullet.createChild(am4core.Circle);
+        circle.radius = 4;
+        circle.fill = am4core.color("#fff");
+        circle.strokeWidth = 3;
+        
+        }); // end am4core.ready()
+    
+//------------------------------prueba para barras apiladas        
+am4core.ready(function() {
+
+  // Themes begin
+  am4core.useTheme(am4themes_animated);
+  // Themes end
+  
+  var bchart = am4core.create("topChart", am4charts.XYChart);
+  bchart.hiddenState.properties.opacity = 0; // this creates initial fade-in
+
+  let table = "periurbanoBajio";
+    let query = `${baseUrl}/query/${table}?columns=region,total15,total16,total17,total18,total19,total20&filter=id=6`;
+    d3.json(query).then(d => bchart.data = d);
+  
+/*bchart.data = [
+    {
+      category: "One",
+      value1: 1,
+      value2: 5,
+      value3: 3
+    },
+    {
+      category: "Two",
+      value1: 2,
+      value2: 5,
+      value3: 3
+    },
+    {
+      category: "Three",
+      value1: 3,
+      value2: 5,
+      value3: 4
+    },
+    {
+      category: "Four",
+      value1: 4,
+      value2: 5,
+      value3: 6
+    },
+    {
+      category: "Five",
+      value1: 3,
+      value2: 5,
+      value3: 4
+    },
+    {
+      category: "Six",
+      value1: 2,
+      value2: 13,
+      value3: 1
+    }
+  ];*/
+  
+  var dateAxis = bchart.xAxes.push(new am4charts.DateAxis());
+dateAxis.renderer.minGridDistance = 60;
+
+var valueAxis = bchart.yAxes.push(new am4charts.ValueAxis());
+
+// Create series
+var series = bchart.series.push(new am4charts.LineSeries());
+series.dataFields.valueY = "total15";
+series.dataFields.dateX = "total15";
+series.tooltipText = "{region}"
+
+series.tooltip.pointerOrientation = "vertical";
+
+bchart.cursor = new am4charts.XYCursor();
+bchart.cursor.snapToSeries = series;
+bchart.cursor.xAxis = dateAxis;
+
+//chart.scrollbarY = new am4core.Scrollbar();
+bchart.scrollbarX = new am4core.Scrollbar();
+
+}); // end am4core.ready()
\ No newline at end of file