Skip to content

F
fordecyt_2019
Commit 75c892cf authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Refactor charts names and variables

parent eeb995f6
Show whitespace changes
Inline Side-by-side
Showing with 456 additions and 508 deletions
public/js/cuerpos_charts.js
View file @ 75c892cf
......@@ -5,7 +5,7 @@
* January 2021
*/
/* globals map, userFiles, userDates, indicators, indicatorVars, indicatorsNames, updateBarChart, barChartData */
/* globals map, userFiles, userDates, indicators, indicatorVars, indicatorsNames, updateBarChart, barChartData, am4charts, am4core */
/* exported makeIndicatorGraph, getData, updateData, getDataInSelection */
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
......@@ -657,8 +657,6 @@ function customizeGrip(grip) {
// Disable background
grip.background.disabled = true;
// Add rotated rectangle as bi-di arrow
var img = grip.createChild(am4core.Rectangle);
img.width = 7;
......@@ -667,117 +665,103 @@ function customizeGrip(grip) {
img.rotation = 45;
img.align = "center";
img.valign = "middle";
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ RADAR- LINES
am4core.ready(function() {
// Themes begin
// am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_animated);
am4core.useTheme(grijalva_theme);
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// Themes end
/* Create chart instance */
var chart = am4core.create("radial_chart", am4charts.RadarChart);
// radial chart
var radialChart = am4core.create("radial_chart", am4charts.RadarChart);
let title = chart.titles.create();
title.text = "Superficie total por año";
title.fontSize = 10;
title.marginBottom = 10;
title.fill = am4core.color(mainTextColor);
let radialTitle = radialChart.titles.create();
radialTitle.text = "Superficie total por año";
radialTitle.fontSize = 10;
radialTitle.marginBottom = 10;
radialTitle.fill = am4core.color(mainTextColor);
var data = [];
chart.data = data;
var radialData = [];
radialChart.data = radialData;
//console.log(data);
/* Create axes */
//var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "month";
categoryAxis.fontSize = 9;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
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;
var radialCategoryAxis = radialChart.xAxes.push(new am4charts.CategoryAxis());
radialCategoryAxis.dataFields.category = "month";
radialCategoryAxis.fontSize = 9;
radialCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
radialCategoryAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
var radialValueAxis = radialChart.yAxes.push(new am4charts.ValueAxis());
radialValueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
radialValueAxis.extraMin = 0.2;
radialValueAxis.extraMax = 0.2;
radialValueAxis.tooltip.disabled = true;
radialValueAxis.fontSize = 9;
radialValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
radialValueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
//radialValueAxis.renderer.labels.template.fontSize = 15;
/* Create and configure series */
var series1 = chart.series.push(new am4charts.RadarSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "month" //"date";
series1.strokeWidth = 1.5;
series1.tooltipText = "{valueY}";
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;
var series2 = chart.series.push(new am4charts.RadarSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "month"; //"date";
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 = 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);
chart.cursor = new am4charts.RadarCursor();
chart.legend = new am4charts.Legend();
// chart.legend.fontSize = 10;
chart.legend.fontSize = 9;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
var range_estiaje = categoryAxis.axisRanges.create();
//TODO: make these series in a more efficient way
var radialSeries1 = radialChart.series.push(new am4charts.RadarSeries());
radialSeries1.dataFields.valueY = "value1";
radialSeries1.dataFields.categoryX = "month" //"date";
radialSeries1.strokeWidth = 1.5;
radialSeries1.tooltipText = "{valueY}";
radialSeries1.name = "2016"
radialSeries1.stroke = am4core.color("#F98293"); // red
radialSeries1.tooltip.getFillFromObject = false;
radialSeries1.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
radialSeries1.tooltip.background.fill = am4core.color("#F98293");
//radialSeries1.bullets.create(am4charts.CircleBullet);
//radialSeries1.dataItems.template.locations.dateX = 0.5;
var radialSeries2 = radialChart.series.push(new am4charts.RadarSeries());
radialSeries2.dataFields.valueY = "value2";
radialSeries2.dataFields.categoryX = "month"; //"date";
radialSeries2.strokeWidth = 1.5;
radialSeries2.tooltipText = "{valueY}";
radialSeries2.name = "2017";
radialSeries2.stroke = am4core.color("#2AC2BB"); // red
radialSeries2.tooltip.getFillFromObject = false;
//radialSeries2.tooltip.background.fill = am4core.color("#");
radialSeries2.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
radialSeries2.tooltip.background.fill = am4core.color("#2AC2BB"); // red
//radialSeries2.tooltip.background.fill = am4core.
//radialSeries2.bullets.create(am4charts.CircleBullet);
//radialSeries2.dataItems.template.locations.dateX = 0.5;
var radialSeries3 = radialChart.series.push(new am4charts.RadarSeries());
radialSeries3.dataFields.valueY = "value3";
radialSeries3.dataFields.categoryX = "month"; //"date";
radialSeries3.strokeWidth = 1.5;
radialSeries3.tooltipText = "{valueY}";
radialSeries3.name = "2018";
radialSeries3.stroke = am4core.color("#FDA259"); // red
radialSeries3.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
radialSeries3.tooltip.getFillFromObject = false;
radialSeries3.tooltip.background.fill = am4core.color("#FDA259");
//radialSeries2.bullets.create(am4charts.CircleBullet);
//radialSeries3.dataItems.template.locations.X = 0.5;
radialChart.scrollbarX = new am4core.Scrollbar();
radialChart.scrollbarX.minHeight = 1;
radialChart.scrollbarX.parent = radialChart.bottomAxesContainer;
radialChart.scrollbarY = new am4core.Scrollbar();
radialChart.scrollbarY.minWidth = 1;
customizeGrip(radialChart.scrollbarX.startGrip);
customizeGrip(radialChart.scrollbarX.endGrip);
customizeGrip(radialChart.scrollbarY.startGrip);
customizeGrip(radialChart.scrollbarY.endGrip);
//TODO: make these ranges in a more efficient way
var range_estiaje = radialCategoryAxis.axisRanges.create();
range_estiaje.category = "March";
range_estiaje.endcategory = "April";
range_estiaje.axisFill.fill = am4core.color("#595952");
......@@ -785,7 +769,7 @@ am4core.ready(function() {
range_estiaje.axisFill.fillOpacity = 0.4;
range_estiaje.grid.strokeOpacity = 0;
var range_estiaje_1 = categoryAxis.axisRanges.create();
var range_estiaje_1 = radialCategoryAxis.axisRanges.create();
range_estiaje_1.category = "April";
range_estiaje_1.endcategory = "May";
range_estiaje_1.axisFill.fill = am4core.color("#595952");
......@@ -793,7 +777,7 @@ am4core.ready(function() {
range_estiaje_1.axisFill.fillOpacity = 0.4;
range_estiaje_1.grid.strokeOpacity = 0;
var range_lluvTropical = categoryAxis.axisRanges.create();
var range_lluvTropical = radialCategoryAxis.axisRanges.create();
range_lluvTropical.category = "May";
range_lluvTropical.endcategory = "June";
//range_lluvTropical.date = new Date(2020, 4, 1);
......@@ -802,73 +786,75 @@ am4core.ready(function() {
range_lluvTropical.axisFill.fillOpacity = 0.4;
range_lluvTropical.grid.strokeOpacity = 0;
var range_lluvTropical_1 = categoryAxis.axisRanges.create();
var range_lluvTropical_1 = radialCategoryAxis.axisRanges.create();
range_lluvTropical_1.category = "June";
range_lluvTropical_1.endcategory = "July";
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();
var range_lluvTropical_2 = radialCategoryAxis.axisRanges.create();
range_lluvTropical_2.category = "July";
range_lluvTropical_2.endcategory = "August";
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();
var range_lluvTropical_3 = radialCategoryAxis.axisRanges.create();
range_lluvTropical_3.category = "August";
range_lluvTropical_3.endcategory = "September";
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();
var range_lluvTropicalInv = radialCategoryAxis.axisRanges.create();
range_lluvTropicalInv.category = "September";
range_lluvTropicalInv.endcategory = "October";
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();
var range_lluvTropicalInv_1 = radialCategoryAxis.axisRanges.create();
range_lluvTropicalInv_1.category = "October";
range_lluvTropicalInv_1.endcategory = "November";
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();
var range_lluvTropicalInv_2 = radialCategoryAxis.axisRanges.create();
range_lluvTropicalInv_2.category = "November";
range_lluvTropicalInv_2.endcategory = "December";
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();
var range_lluvInv = radialCategoryAxis.axisRanges.create();
range_lluvInv.category = "December";
range_lluvInv.endcategory = "January";
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();
var range_lluvInv_1 = radialCategoryAxis.axisRanges.create();
range_lluvInv_1.category = "January";
range_lluvInv_1.endcategory = "February";
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();
var range_lluvInv_2 = radialCategoryAxis.axisRanges.create();
range_lluvInv_2.category = "February";
range_lluvInv_2.endcategory = "March";
range_lluvInv_2.axisFill.fill = am4core.color("#E1DBC8");
range_lluvInv_2.axisFill.fillOpacity = 0.4;
range_lluvInv_2.grid.strokeOpacity = 0;
radialChart.cursor = new am4charts.RadarCursor();
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 9;
radialChart.legend = new am4charts.Legend();
//radialChart.legend.fontSize = 10;
radialChart.legend.fontSize = 9;
radialChart.legend.labels.template.fill = am4core.color(mainTextColor);
let legend2 = []
var legenddata2 = [{ name: "Estiaje", fill: am4core.color("#595952") },
......@@ -879,67 +865,56 @@ am4core.ready(function() {
];
//chart.legend.data = legenddata;
chart.legend.data = legenddata2;
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
var markerTemplate = chart.legend.markers.template;
radialChart.legend.data = legenddata2;
radialChart.legend.fontSize = 10;
radialChart.legend.labels.template.fill = am4core.color(mainTextColor);
var markerTemplate = radialChart.legend.markers.template;
markerTemplate.width = 20;
markerTemplate.height = 20;
}); // end am4core.ready()
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINES CHARTS
am4core.ready(function() {
// Themes begin
am4core.useTheme(grijalva_theme);
// Themes end
// Create chart instance
let chart = am4core.create("linesChart", am4charts.XYChart);
// linea chart
let lineChart = am4core.create("linesChart", am4charts.XYChart);
let title = chart.titles.create();
title.text = "Superficie por tipo de cuerpo";
title.fontSize = 10;
title.marginBottom = 15;
title.fill = am4core.color(mainTextColor);
let lineTitle = lineChart.titles.create();
lineTitle.text = "Superficie por tipo de cuerpo";
lineTitle.fontSize = 10;
lineTitle.marginBottom = 15;
lineTitle.fill = am4core.color(mainTextColor);
// Increase contrast by taking evey second color
//chart.colors.step = 2;
// Add data
chart.data = generateChartData();
lineChart.data = generateChartData();
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.fontSize = 8;
dateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
var lineDateAxis = lineChart.xAxes.push(new am4charts.DateAxis());
lineDateAxis.renderer.minGridDistance = 50;
lineDateAxis.fontSize = 8;
lineDateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
// Create series
function createAxisAndSeries(field, name, opposite, bullet) {
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.fontSize = 8;
var lineValueAxis = lineChart.yAxes.push(new am4charts.ValueAxis());
lineValueAxis.fontSize = 8;
if (chart.yAxes.indexOf(valueAxis) != 0) {
valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
if (lineChart.yAxes.indexOf(lineValueAxis) != 0) {
lineValueAxis.syncWithAxis = lineChart.yAxes.getIndex(0);
}
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.yAxis = valueAxis;
series.name = name;
var lineSeries = lineChart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = field;
lineSeries.dataFields.dateX = "date";
lineSeries.strokeWidth = 2;
lineSeries.yAxis = lineValueAxis;
lineSeries.name = name;
//series.tooltipText = "{name}: [bold]{valueY.formatNumber('#,###.0')} Ha[/]";
series.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
series.tooltipText.fontSize = 8;
series.tensionX = 0.8;
series.showOnInit = true;
lineSeries.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
lineSeries.tooltipText.fontSize = 8;
lineSeries.tensionX = 0.8;
lineSeries.showOnInit = true;
var interfaceColors = new am4core.InterfaceColorSet();
//var interfaceColors = new am4core.InterfaceColorSet();
/* switch (bullet) {
case "triangle":
......@@ -976,11 +951,11 @@ am4core.ready(function() {
break;
}*/
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;
valueAxis.renderer.line.stroke = series.stroke;
valueAxis.renderer.labels.template.fill = series.stroke;
valueAxis.renderer.opposite = opposite;
lineValueAxis.renderer.line.strokeOpacity = 1;
lineValueAxis.renderer.line.strokeWidth = 2;
lineValueAxis.renderer.line.stroke = lineSeries.stroke;
lineValueAxis.renderer.labels.template.fill = lineSeries.stroke;
lineValueAxis.renderer.opposite = opposite;
}
createAxisAndSeries("permanente", "Agua permanente", false, "circle");
......@@ -997,18 +972,14 @@ am4core.ready(function() {
*/
// 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);
lineChart.cursor = new am4charts.XYCursor();
lineChart.scrollbarX = new am4core.Scrollbar();
lineChart.scrollbarX.minHeight = 1;
lineChart.scrollbarX.parent = lineChart.bottomAxesContainer;
customizeGrip(lineChart.scrollbarX.startGrip);
customizeGrip(lineChart.scrollbarX.endGrip);
// Style scrollbar
// generate some random data, quite different range
function generateChartData() {
var chartData = [];
......@@ -1042,260 +1013,254 @@ am4core.ready(function() {
}
// 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
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
let chart = am4core.create("stackedAreaChart", am4charts.XYChart);
let title = chart.titles.create();
title.text = "Superficie acumulada";
title.fontSize = 10;
title.marginBottom = 15;
title.fill = am4core.color(mainTextColor);
//TODO: make these ranges in a more efficient way
var lineRange = lineDateAxis.axisRanges.create();
lineRange.date = new Date(2016, 0, 1);
lineRange.endDate = new Date(2016, 2, 1);
lineRange.axisFill.fill = am4core.color("#E1DBC8");
lineRange.axisFill.fillOpacity = 0.4;
var lineRange1 = lineDateAxis.axisRanges.create();
lineRange1.date = new Date(2016, 2, 1);
lineRange1.endDate = new Date(2016, 4, 1);
lineRange1.axisFill.fill = am4core.color("#595952");
lineRange1.axisFill.fillOpacity = 0.4;
var lineRange2 = lineDateAxis.axisRanges.create();
lineRange2.date = new Date(2016, 4, 1);
lineRange2.endDate = new Date(2016, 8, 1);
lineRange2.axisFill.fill = am4core.color("#838278");
lineRange2.axisFill.fillOpacity = 0.4;
var lineRange3 = lineDateAxis.axisRanges.create();
lineRange3.date = new Date(2016, 8, 1);
lineRange3.endDate = new Date(2016, 11, 1);
lineRange3.axisFill.fill = am4core.color("#B1AE9F");
lineRange3.axisFill.fillOpacity = 0.4;
var lineRange4 = lineDateAxis.axisRanges.create();
lineRange4.date = new Date(2016, 11, 1);
lineRange4.endDate = new Date(2017, 2, 1);
lineRange4.axisFill.fill = am4core.color("#E1DBC8");
lineRange4.axisFill.fillOpacity = 0.4;
var lineRange5 = lineDateAxis.axisRanges.create();
lineRange5.date = new Date(2017, 2, 1);
lineRange5.endDate = new Date(2017, 4, 1);
lineRange5.axisFill.fill = am4core.color("#595952");
lineRange5.axisFill.fillOpacity = 0.4;
var lineRange6 = lineDateAxis.axisRanges.create();
lineRange6.date = new Date(2017, 4, 1);
lineRange6.endDate = new Date(2017, 8, 1);
lineRange6.axisFill.fill = am4core.color("#838278");
lineRange6.axisFill.fillOpacity = 0.4;
var lineRange7 = lineDateAxis.axisRanges.create();
lineRange7.date = new Date(2017, 8, 1);
lineRange7.endDate = new Date(2017, 11, 1);
lineRange7.axisFill.fill = am4core.color("#B1AE9F");
lineRange7.axisFill.fillOpacity = 0.4;
var lineRange8 = lineDateAxis.axisRanges.create();
lineRange8.date = new Date(2017, 11, 1);
lineRange8.endDate = new Date(2018, 2, 1);
lineRange8.axisFill.fill = am4core.color("#E1DBC8");
lineRange8.axisFill.fillOpacity = 0.4;
var lineRange9 = lineDateAxis.axisRanges.create();
lineRange9.date = new Date(2018, 2, 1);
lineRange9.endDate = new Date(2018, 4, 1);
lineRange9.axisFill.fill = am4core.color("#595952");
lineRange9.axisFill.fillOpacity = 0.4;
var lineRange10 = lineDateAxis.axisRanges.create();
lineRange10.date = new Date(2018, 4, 1);
lineRange10.endDate = new Date(2018, 8, 1);
lineRange10.axisFill.fill = am4core.color("#838278");
lineRange10.axisFill.fillOpacity = 0.4;
var lineRange11 = lineDateAxis.axisRanges.create();
lineRange11.date = new Date(2018, 8, 1);
lineRange11.endDate = new Date(2018, 11, 1);
lineRange11.axisFill.fill = am4core.color("#B1AE9F");
lineRange11.axisFill.fillOpacity = 0.4;
var lineRange12 = lineDateAxis.axisRanges.create();
lineRange12.date = new Date(2018, 11, 1);
lineRange12.endDate = new Date(2019, 0, 1);
lineRange12.axisFill.fill = am4core.color("#E1DBC8");
lineRange12.axisFill.fillOpacity = 0.4;
// area chart
let areaChart = am4core.create("stackedAreaChart", am4charts.XYChart);
let areaTitle = areaChart.titles.create();
areaTitle.text = "Superficie acumulada";
areaTitle.fontSize = 10;
areaTitle.marginBottom = 15;
areaTitle.fill = am4core.color(mainTextColor);
// chart.dateFormatter.inputDateFormat = "dd-mm-yyyy";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;
dateAxis.fontSize = 8;
dateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
dateAxis.baseInterval = {
var areaDateAxis = areaChart.xAxes.push(new am4charts.DateAxis());
areaDateAxis.renderer.minGridDistance = 60;
areaDateAxis.fontSize = 8;
areaDateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
areaDateAxis.startLocation = 0.5;
areaDateAxis.endLocation = 0.5;
areaDateAxis.baseInterval = {
timeUnit: "month",
count: 1
}
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.fontSize = 8;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.name = "Agua permanente";
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 = "[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.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "Áreas temporalmente inundadas";
series2.dataFields.dateX = "date";
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 = "[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;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;
var series3 = chart.series.push(new am4charts.LineSeries());
series3.name = "Suelos húmedos-vegetación acuática";
series3.dataFields.dateX = "date";
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 = "[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;
series3.fillOpacity = 0.6;
series3.defaultState.transitionDuration = 1000;
series3.stacked = true;
series3.strokeWidth = 2;
chart.cursor = new am4charts.XYCursor();
chart.snapToSeries = series2;
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";
var areaValueAxis = areaChart.yAxes.push(new am4charts.ValueAxis());
areaValueAxis.tooltip.disabled = true;
areaValueAxis.fontSize = 8;
areaValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
//TODO: make these series in a more efficient way
var areasSeries = areaChart.series.push(new am4charts.LineSeries());
areasSeries.dataFields.dateX = "date";
areasSeries.name = "Agua permanente";
areasSeries.dataFields.valueY = "permanente";
//areasSeries.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>";
//areasSeries.tooltipText = "[#000]{valueY.value}[/]";
areasSeries.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.#')} Ha";
//areasSeries.tooltip.background.fill = am4core.color("#FFF");
areasSeries.tooltip.getStrokeFromObject = true;
areasSeries.tooltip.background.strokeWidth = 3;
//areasSeries.tooltip.getFillFromObject = false;
areasSeries.fillOpacity = 0.6;
areasSeries.strokeWidth = 2;
areasSeries.stacked = true;
var areasSeries2 = areaChart.series.push(new am4charts.LineSeries());
areasSeries2.name = "Áreas temporalmente inundadas";
areasSeries2.dataFields.dateX = "date";
areasSeries2.dataFields.valueY = "temporal";
//areasSeries2.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>";
//areasSeries2.tooltipText = "[#000]{valueY.value}[/]";
areasSeries2.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.#')} Ha";
//areasSeries2.tooltip.background.fill = am4core.color("#FFF");
//areasSeries2.tooltip.getFillFromObject = false;
areasSeries2.tooltip.getStrokeFromObject = true;
areasSeries2.tooltip.background.strokeWidth = 3;
areasSeries2.sequencedInterpolation = true;
areasSeries2.fillOpacity = 0.6;
areasSeries2.stacked = true;
areasSeries2.strokeWidth = 2;
var areasSeries3 = areaChart.series.push(new am4charts.LineSeries());
areasSeries3.name = "Suelos húmedos-vegetación acuática";
areasSeries3.dataFields.dateX = "date";
areasSeries3.dataFields.valueY = "vegetacion";
//areasSeries3.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>";
//areasSeries3.tooltipText = "[#000]{valueY.value}[/]";
areasSeries3.tooltipText = "[bold]{name}: [/]{valueY.formatNumber('#,###.#')} Ha";
//areasSeries3.tooltip.background.fill = am4core.color("#FFF");
//areasSeries3.tooltip.getFillFromObject = false;
areasSeries3.tooltip.getStrokeFromObject = true;
areasSeries3.tooltip.background.strokeWidth = 3;
areasSeries3.sequencedInterpolation = true;
areasSeries3.fillOpacity = 0.6;
areasSeries3.defaultState.transitionDuration = 1000;
areasSeries3.stacked = true;
areasSeries3.strokeWidth = 2;
areaChart.cursor = new am4charts.XYCursor();
areaChart.snapToSeries = areasSeries2;
areaChart.cursor.xAxis = areaDateAxis;
areaChart.scrollbarX = new am4core.Scrollbar();
areaChart.scrollbarX.minHeight = 1;
areaChart.scrollbarX.parent = areaChart.bottomAxesContainer;
customizeGrip(areaChart.scrollbarX.startGrip);
customizeGrip(areaChart.scrollbarX.endGrip);
//areaChart.scrollbarX.position = "bottom";
// Add a legend
// 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;
//TODO: make these ranges in a more efficient way
var areaRange = areaDateAxis.axisRanges.create();
areaRange.date = new Date(2016, 0, 1);
areaRange.endDate = new Date(2016, 2, 1);
areaRange.axisFill.fill = am4core.color("#E1DBC8");
areaRange.axisFill.fillOpacity = 0.4;
var areaRange1 = areaDateAxis.axisRanges.create();
areaRange1.date = new Date(2016, 2, 1);
areaRange1.endDate = new Date(2016, 4, 1);
areaRange1.axisFill.fill = am4core.color("#595952");
areaRange1.axisFill.fillOpacity = 0.4;
var areaRange2 = areaDateAxis.axisRanges.create();
areaRange2.date = new Date(2016, 4, 1);
areaRange2.endDate = new Date(2016, 8, 1);
areaRange2.axisFill.fill = am4core.color("#838278");
areaRange2.axisFill.fillOpacity = 0.4;
var areaRange3 = areaDateAxis.axisRanges.create();
areaRange3.date = new Date(2016, 8, 1);
areaRange3.endDate = new Date(2016, 11, 1);
areaRange3.axisFill.fill = am4core.color("#B1AE9F");
areaRange3.axisFill.fillOpacity = 0.4;
var areaRange4 = areaDateAxis.axisRanges.create();
areaRange4.date = new Date(2016, 11, 1);
areaRange4.endDate = new Date(2017, 2, 1);
areaRange4.axisFill.fill = am4core.color("#E1DBC8");
areaRange4.axisFill.fillOpacity = 0.4;
var areaRange5 = areaDateAxis.axisRanges.create();
areaRange5.date = new Date(2017, 2, 1);
areaRange5.endDate = new Date(2017, 4, 1);
areaRange5.axisFill.fill = am4core.color("#595952");
areaRange5.axisFill.fillOpacity = 0.4;
var areaRange6 = areaDateAxis.axisRanges.create();
areaRange6.date = new Date(2017, 4, 1);
areaRange6.endDate = new Date(2017, 8, 1);
areaRange6.axisFill.fill = am4core.color("#838278");
areaRange6.axisFill.fillOpacity = 0.4;
var areaRange7 = areaDateAxis.axisRanges.create();
areaRange7.date = new Date(2017, 8, 1);
areaRange7.endDate = new Date(2017, 11, 1);
areaRange7.axisFill.fill = am4core.color("#B1AE9F");
areaRange7.axisFill.fillOpacity = 0.4;
var areaRange8 = areaDateAxis.axisRanges.create();
areaRange8.date = new Date(2017, 11, 1);
areaRange8.endDate = new Date(2018, 2, 1);
areaRange8.axisFill.fill = am4core.color("#E1DBC8");
areaRange8.axisFill.fillOpacity = 0.4;
var areaRange9 = areaDateAxis.axisRanges.create();
areaRange9.date = new Date(2018, 2, 1);
areaRange9.endDate = new Date(2018, 4, 1);
areaRange9.axisFill.fill = am4core.color("#595952");
areaRange9.axisFill.fillOpacity = 0.4;
var areaRange10 = areaDateAxis.axisRanges.create();
areaRange10.date = new Date(2018, 4, 1);
areaRange10.endDate = new Date(2018, 8, 1);
areaRange10.axisFill.fill = am4core.color("#838278");
areaRange10.axisFill.fillOpacity = 0.4;
var areaRange11 = areaDateAxis.axisRanges.create();
areaRange11.date = new Date(2018, 8, 1);
areaRange11.endDate = new Date(2018, 11, 1);
areaRange11.axisFill.fill = am4core.color("#B1AE9F");
areaRange11.axisFill.fillOpacity = 0.4;
var areaRange12 = areaDateAxis.axisRanges.create();
areaRange12.date = new Date(2018, 11, 1);
areaRange12.endDate = new Date(2019, 0, 1);
areaRange12.axisFill.fill = am4core.color("#E1DBC8");
areaRange12.axisFill.fillOpacity = 0.4;
/* Set up cursor behavior */
let previousDate = "";
chart.cursor.events.on("cursorpositionchanged", function(ev) {
areaChart.cursor.events.on("cursorpositionchanged", function(ev) {
let xAxis = ev.target.chart.xAxes.getIndex(0);
/*let axis = dateAxis.positionToDate(dateAxis.toAxisPosition(ev.target.xPosition)),
currentYear = axis.getFullYear().toString(),
......@@ -1331,109 +1296,92 @@ popChart.cursor.events.on("cursorpositionchanged", function(ev) {
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()
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ POPULATION BARS
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("dimfrcpo-graph", am4charts.XYChart);
let title = chart.titles.create();
title.text = "Conteo por tipo de cuerpo";
title.fontSize = 10;
title.marginBottom = 5;
title.fill = am4core.color(mainTextColor);
// bar chart
var barChart = am4core.create("dimfrcpo-graph", am4charts.XYChart);
let barTitle = barChart.titles.create();
barTitle.text = "Conteo por tipo de cuerpo";
barTitle.fontSize = 10;
barTitle.marginBottom = 5;
barTitle.fill = am4core.color(mainTextColor);
// Create axes
//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";
//dateAxis.numberFormatter.numberFormat = "#";
dateAxis.renderer.inversed = true;
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.cellStartLocation = 0.1;
dateAxis.renderer.cellEndLocation = 0.9;
dateAxis.fontSize = 10;
dateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);*/
//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);
//var barCategoryAxis = barChart.yAxes.push(new am4charts.CategoryAxis());
var barCategoryAxis = barChart.xAxes.push(new am4charts.CategoryAxis());
barCategoryAxis.dataFields.category = "grupo";
barCategoryAxis.numberFormatter.numberFormat = "#,###.#";
barCategoryAxis.renderer.inversed = true;
barCategoryAxis.renderer.grid.template.location = 0;
barCategoryAxis.renderer.cellStartLocation = 0.1;
barCategoryAxis.renderer.cellEndLocation = 0.9;
barCategoryAxis.fontSize = 10;
barCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barCategoryAxis.title.text = "Superficie (Ha)";
barCategoryAxis.title.fill = am4core.color(mainTextColor);
/*var barDateAxis = barChart.yAxes.push(new am4charts.DateAxis());
barDateAxis.dataFields.date = "date"; //"year";
//barDateAxis.numberFormatter.numberFormat = "#";
barDateAxis.renderer.inversed = true;
barDateAxis.renderer.grid.template.location = 0;
barDateAxis.renderer.cellStartLocation = 0.1;
barDateAxis.renderer.cellEndLocation = 0.9;
barDateAxis.fontSize = 10;
barDateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);*/
//var barValueAxis = barChart.xAxes.push(new am4charts.ValueAxis());
var barValueAxis = barChart.yAxes.push(new am4charts.ValueAxis());
//barValueAxis.renderer.opposite = true;
//barValueAxis.calculateTotals = true
barValueAxis.fontSize = 10;
barValueAxis.extraMax = 0.05;
barValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barValueAxis.max = 1250; // TODO: compute max value from data
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
// series.dataFields.valueX = field;
//series.dataFields.categoryY = "grupo";
series.dataFields.valueY = field;
series.dataFields.categoryX = "grupo";
// series.dataFields.valueYShow = "count";
// series.dataFields.categoryY = "grupo"; //"year";
series.dataFields.categoryX = "grupo"; //"year";
series.name = name;
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.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("#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;*/
var barSeries = barChart.series.push(new am4charts.ColumnSeries());
//barSeries.dataFields.valueX = field;
//barSeries.dataFields.categoryY = "grupo";
barSeries.dataFields.valueY = field;
barSeries.dataFields.categoryX = "grupo";
//barSeries.dataFields.valueYShow = "count";
//barSeries.dataFields.categoryY = "grupo"; //"year";
barSeries.dataFields.categoryX = "grupo"; //"year";
barSeries.name = name;
barSeries.columns.template.tooltipText = "[underline][bold]Menor a [bold]{categoryX.formatNumber('#,###.#')} Ha[/]: {valueY.formatNumber('#,###.#')} cuerpos[/]";
barSeries.columns.template.height = am4core.percent(100);
barSeries.sequencedInterpolation = true;
var barValueLabel = barSeries.bullets.push(new am4charts.LabelBullet());
//barValueLabel.label.text = "{valueX}";
barValueLabel.label.text = "{valueY}";
barValueLabel.label.horizontalCenter = "middle";
//barValueLabel.label.verticalCenter = "top";
//barValueLabel.label.align = "center";
barValueLabel.label.dx = 3;
barValueLabel.label.dy = -5;
barValueLabel.label.hideOversized = false;
barValueLabel.label.truncate = false;
barValueLabel.fontSize = 10;
//barValueLabel.label.fill = am4core.color(mainTextColor);
barValueLabel.label.fill = am4core.color("#fff");
/* var barCategoryLabel = barSeries.bullets.push(new am4charts.LabelBullet());
barCategoryLabel.label.text = "{name}";
barCategoryLabel.label.horizontalCenter = "right";
barCategoryLabel.label.dx = -10;
//barCategoryLabel.label.fill = am4core.color("#fff");
barCategoryLabel.label.hideOversized = false;
barCategoryLabel.label.truncate = false;
barCategoryLabel.fontSize = 12;*/
}
createSeries("ap", "Agua permanente");
......@@ -1442,10 +1390,10 @@ am4core.ready(function() {
// Add a legend
/*
chart.legend = new am4charts.Legend();
// chart.legend.position = "top";
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);*/
barChart.legend = new am4charts.Legend();
// barChart.legend.position = "top";
barChart.legend.fontSize = 10;
barChart.legend.labels.template.fill = am4core.color(mainTextColor);*/
}); // end am4core.ready()
......
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