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