Skip to content

F
fordecyt_2019
Commit 93da8952 authored by Tania Gómez's avatar Tania Gómez
Browse files
Options

sync barchart and stacked areas

parent 01020aa1
Hide whitespace changes
Inline Side-by-side
Showing with 467 additions and 326 deletions
public/js/cuerpos_charts.js
View file @ 93da8952
/*
* 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,27 +1020,106 @@ am4core.ready(function() {
var temporal = 2900;
var vegetacion = 8700;
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.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
permanente += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
temporal += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
vegetacion += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
chartData.push({
date: newDate,
permanente: permanente,
temporal: temporal,
vegetacion: vegetacion
});
}
/* 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.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
permanente += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
temporal += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
vegetacion += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
chartData.push({
date: newDate,
permanente: permanente,
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);
// Add a legend
// 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;
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;
range.label.text = "Fines for speeding increased";
range.label.inside = true;
range.label.rotation = 90;
range.label.horizontalCenter = "right";
range.label.verticalCenter = "bottom";
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(2007, 0, 1);
range2.grid.stroke = chart.colors.getIndex(7);
range2.grid.strokeOpacity = 0.6;
range2.grid.strokeDasharray = "5,2";
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);
})
range2.label.text = "Motorcycle fee introduced";
range2.label.inside = true;
range2.label.rotation = 90;
range2.label.horizontalCenter = "right";
range2.label.verticalCenter = "bottom";
/* 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";*/
/* range2.label.text = "Motorcycle fee introduced";
range2.label.inside = true;
range2.label.rotation = 90;
range2.label.horizontalCenter = "right";
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);
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;
//valueLabel.label.fill = am4core.color(mainTextColor);
valueLabel.label.fill = am4core.color("#fff");
/* 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;*/
}
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()
}); // end am4core.ready()
\ No newline at end of file
//--------------------------------------------------------------------------------------------------------------------
\ No newline at end of file
public/js/cuerpos_functions.js
View file @ 93da8952
......@@ -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);
// and then set chart data
//lineStackedChart.data = data_ls;
// console.log("data_pb", data_pb);
var merged_2 = [].concat.apply([], data_pb);
//console.log("merged_2", merged_2);
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 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;
//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);
//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 areclass = merged_2.filter(d => d.date.valueOf() == filterDate.valueOf());
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);
}
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;*/
//------------------------------------------------------------------------------------------------------------------------------------
......@@ -1090,4 +998,29 @@ legend.onAdd = () => {
html += "</ul>";
div.innerHTML = html;
return div;
};
\ No newline at end of file
};
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment