Skip to content

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

Refactor variables, charts order and remove some am4core.ready calls

parent 0353d3e5
Hide whitespace changes
Inline Side-by-side
Showing with 430 additions and 441 deletions
public/js/centropais_periurbano_charts.js
View file @ fbd19b59
......@@ -12,107 +12,30 @@ let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-tex
am4core.ready(function() {
let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("bottomRightChart", am4charts.XYChart);
let title = chart.titles.create();
title.text = "Cobertura del medio construido en los tramos del Corredor del Bajío";
title.fontSize = 9;
title.fill = am4core.color(mainTextColor);
let table = "periurbanoBajio";
let query = `${baseUrl}/query/${table}?columns=region,total20/1000 as has,(total20-total15)*100/total15 as inc&filter=id>6&id<13&sort=inc desc`;
d3.json(query).then(d => chart.data = d);
/* Create axes */
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "region";
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 9;
/* Create primary value axis */
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9;
/* Create secondary value axis */
let percentAxis = chart.yAxes.push(new am4charts.ValueAxis());
percentAxis.renderer.opposite = true;
percentAxis.min = 0;
percentAxis.max = 110;
percentAxis.strictMinMax = true;
percentAxis.renderer.grid.template.disabled = true;
percentAxis.numberFormatter = new am4core.NumberFormatter();
percentAxis.numberFormatter.numberFormat = "#'%'"
percentAxis.cursorTooltipEnabled = false;
percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
percentAxis.renderer.labels.template.fontSize = 9;
/* Create series */
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = "Medio construido en 2020";
columnSeries.dataFields.valueY = "has";
columnSeries.dataFields.categoryX = "region";
columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} Ha[/] [#fff]{additional}[/]"
columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle";
columnSeries.fill = am4core.color("#fca311");
columnSeries.stroke = am4core.color("#fca311");
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.name = "% de crecimiento del medio construido 2015-2020";
lineSeries.dataFields.valueY = "inc";
lineSeries.dataFields.categoryX = "region";
lineSeries.yAxis = percentAxis;
lineSeries.stroke = am4core.color("#c41e3a");
lineSeries.strokeWidth = 3;
lineSeries.propertyFields.strokeDasharray = "lineDash";
lineSeries.tooltip.label.textAlign = "middle";
var bullet = lineSeries.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#c41e3a"); // tooltips grab fill from parent by default
bullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} %[/] [#fff]{additional}[/]"
var circle = bullet.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#fff");
circle.strokeWidth = 3;
}); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++++++++++++BARRAS SEMAFORO++
/*
FALTA VER DE QUÉ TABLA VIENEN ESTOS DATOS Y ELEGIR LA VERSION EN PIXELES
Y CONSTRUIR EL QUERY
*/
am4core.ready(function() {
//++++++++++++++++++++++++++++++++++++++++++++++++++++++BARRAS SEMAFORO++
/*
FALTA VER DE QUÉ TABLA VIENEN ESTOS DATOS Y ELEGIR LA VERSION EN PIXELES
Y CONSTRUIR EL QUERY
*/
var chart = am4core.create("topLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
let stackedBarChart = am4core.create("topLeftChart", am4charts.XYChart);
stackedBarChart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/*
let table = "periurbanoBajio";
let query = `${baseUrl}/query/${table}?columns=region,total15/1000 as T15,total16/1000 as T16,total17/1000 as T17,total18/1000 as T18,total19/1000 as T19,total20/1000 as T20,&filter=id=6`;
d3.json(query).then(d => chart.data = d);
*/
let title = chart.titles.create();
title.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
title.fontSize = 9;
title.fill = am4core.color(mainTextColor);
let stackedBarTitle = stackedBarChart.titles.create();
stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
stackedBarTitle.fontSize = 9;
stackedBarTitle.fill = am4core.color(mainTextColor);
chart.data = [
stackedBarChart.data = [
{
category: "2015",
value1: 21750.100923,
......@@ -150,38 +73,38 @@ am4core.ready(function() {
value3: 3789.051441
}
];
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
stackedBarChart.legend = new am4charts.Legend();
stackedBarChart.legend.fontSize = 10;
stackedBarChart.legend.labels.template.fill = am4core.color(mainTextColor);
let stackedBarCategoryAxis = stackedBarChart.xAxes.push(new am4charts.CategoryAxis());
stackedBarCategoryAxis.dataFields.category = "category";
stackedBarCategoryAxis.renderer.grid.template.location = 0;
stackedBarCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarCategoryAxis.renderer.labels.template.fontSize = 11;
let stackedBarValueAxis = stackedBarChart.yAxes.push(new am4charts.ValueAxis());
stackedBarValueAxis.min = 0;
//valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.name = "Bajo";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#2dc937");
series1.stroke = am4core.color("#2dc937");
/*var bullet1 = series1.bullets.push(new am4charts.LabelBullet());
stackedBarValueAxis.strictMinMax = true;
stackedBarValueAxis.calculateTotals = true;
stackedBarValueAxis.renderer.minWidth = 50;
stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarValueAxis.renderer.labels.template.fontSize = 9;
let stackedBarSeries1 = stackedBarChart.series.push(new am4charts.ColumnSeries());
stackedBarSeries1.columns.template.width = am4core.percent(80);
stackedBarSeries1.name = "Bajo";
stackedBarSeries1.dataFields.categoryX = "category";
stackedBarSeries1.dataFields.valueY = "value1";
stackedBarSeries1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarSeries1.dataItems.template.locations.categoryX = 0.5;
stackedBarSeries1.stacked = true;
stackedBarSeries1.tooltip.pointerOrientation = "vertical";
stackedBarSeries1.fill = am4core.color("#2dc937");
stackedBarSeries1.stroke = am4core.color("#2dc937");
/*let bullet1 = stackedBarSeries.bullets.push(new am4charts.LabelBullet());
bullet1.interactionsEnabled = false;
bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet1.label.fill = am4core.color("#ffffff");
......@@ -189,40 +112,40 @@ am4core.ready(function() {
bullet1.locationY = 0.5;*/
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true;
series2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#e7b416");
series2.stroke = am4core.color("#e7b416");
/*var bullet2 = series2.bullets.push(new am4charts.LabelBullet());
let stackedBarSeries2 = stackedBarChart.series.push(new am4charts.ColumnSeries());
stackedBarSeries2.columns.template.width = am4core.percent(80);
stackedBarSeries2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarSeries2.name = "Medio";
stackedBarSeries2.dataFields.categoryX = "category";
stackedBarSeries2.dataFields.valueY = "value2";
//stackedBarSeries2.dataFields.valueYShow = "totalPercent";
stackedBarSeries2.dataItems.template.locations.categoryX = 0.5;
stackedBarSeries2.stacked = true;
stackedBarSeries2.tooltip.pointerOrientation = "vertical";
stackedBarSeries2.fill = am4core.color("#e7b416");
stackedBarSeries2.stroke = am4core.color("#e7b416");
/*let bullet2 = stackedBarSeries2.bullets.push(new am4charts.LabelBullet());
bullet2.interactionsEnabled = false;
bullet2.locationY = 0.5;
bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet2.label.fill = am4core.color("#ffffff");
bullet2.label.fontSize = 9;*/
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true;
series3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#c41e3a");
series3.stroke = am4core.color("#c41e3a");
/*var bullet3 = series3.bullets.push(new am4charts.LabelBullet());
let stackedBarSeries3 = stackedBarChart.series.push(new am4charts.ColumnSeries());
stackedBarSeries3.columns.template.width = am4core.percent(80);
stackedBarSeries3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarSeries3.name = "Alto";
stackedBarSeries3.dataFields.categoryX = "category";
stackedBarSeries3.dataFields.valueY = "value3";
//stackedBarSeries3.dataFields.valueYShow = "totalPercent";
stackedBarSeries3.dataItems.template.locations.categoryX = 0.5;
stackedBarSeries3.stacked = true;
stackedBarSeries3.tooltip.pointerOrientation = "vertical";
stackedBarSeries3.fill = am4core.color("#c41e3a");
stackedBarSeries3.stroke = am4core.color("#c41e3a");
/*let bullet3 = stackedBarSeries3.bullets.push(new am4charts.LabelBullet());
bullet3.interactionsEnabled = false;
bullet3.locationY = 0.5;
bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha";
......@@ -230,30 +153,24 @@ am4core.ready(function() {
bullet3.label.fontSize = 9;*/
}); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY
var chart = am4core.create("topRightChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
let stackedBarLineChart = am4core.create("topRightChart", am4charts.XYChart);
stackedBarLineChart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/*
let table = "periurbanoBajio";
let query = `${baseUrl}/query/${table}?columns=region,grbajo15/1000 as b15,grmedio15/1000 as b16,gralto15/1000 as a15 .... &filter=id=6`;
d3.json(query).then(d => chart.data = d);
*/
let title = chart.titles.create();
title.text = "Evolución del grado de urbanización en el periurbano del \n Corredor del Bajío en extensión y proporción";
title.fontSize = 9;
title.fill = am4core.color(mainTextColor);
let stackedBarLineTitle = stackedBarLineChart.titles.create();
stackedBarLineTitle.text = "Evolución del grado de urbanización en el periurbano del \n Corredor del Bajío en extensión y proporción";
stackedBarLineTitle.fontSize = 9;
stackedBarLineTitle.fill = am4core.color(mainTextColor);
chart.data = [
stackedBarLineChart.data = [
{
category: "2015",
value1: 21750.100923,
......@@ -292,178 +209,176 @@ am4core.ready(function() {
}
];
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
//valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9;
stackedBarLineChart.legend = new am4charts.Legend();
stackedBarLineChart.legend.fontSize = 10;
stackedBarLineChart.legend.labels.template.fill = am4core.color(mainTextColor);
let stackedBarLineCategoryAxis = stackedBarLineChart.xAxes.push(new am4charts.CategoryAxis());
stackedBarLineCategoryAxis.dataFields.category = "category";
stackedBarLineCategoryAxis.renderer.grid.template.location = 0;
stackedBarLineCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLineCategoryAxis.renderer.labels.template.fontSize = 11;
let stackedBarLineValueAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
stackedBarLineValueAxis.min = 0;
//stackedBarLineValueAxis.max = 100;
stackedBarLineValueAxis.strictMinMax = true;
stackedBarLineValueAxis.calculateTotals = true;
stackedBarLineValueAxis.renderer.minWidth = 50;
stackedBarLineValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLineValueAxis.renderer.labels.template.fontSize = 9;
/* Create secondary value axis */
let percentAxis = chart.yAxes.push(new am4charts.ValueAxis());
percentAxis.renderer.opposite = true;
percentAxis.calculateTotals = true;
percentAxis.min = 50;
percentAxis.max = 110;
percentAxis.strictMinMax = true;
percentAxis.renderer.grid.template.disabled = true;
percentAxis.numberFormatter = new am4core.NumberFormatter();
percentAxis.numberFormatter.numberFormat = "#'%'"
percentAxis.cursorTooltipEnabled = false;
percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
percentAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.name = "Bajo";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#f8caa0");
series1.stroke = am4core.color("#f8caa0");
/*var bullet1 = series1.bullets.push(new am4charts.LabelBullet());
let stackedBarLinePercentAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
stackedBarLinePercentAxis.renderer.opposite = true;
stackedBarLinePercentAxis.calculateTotals = true;
stackedBarLinePercentAxis.min = 50;
stackedBarLinePercentAxis.max = 110;
stackedBarLinePercentAxis.strictMinMax = true;
stackedBarLinePercentAxis.renderer.grid.template.disabled = true;
stackedBarLinePercentAxis.numberFormatter = new am4core.NumberFormatter();
stackedBarLinePercentAxis.numberFormatter.numberFormat = "#'%'"
stackedBarLinePercentAxis.cursorTooltipEnabled = false;
stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLinePercentAxis.renderer.labels.template.fontSize = 9;
let stackedBarLineSeries1 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
stackedBarLineSeries1.columns.template.width = am4core.percent(80);
stackedBarLineSeries1.name = "Bajo";
stackedBarLineSeries1.dataFields.categoryX = "category";
stackedBarLineSeries1.dataFields.valueY = "value1";
stackedBarLineSeries1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarLineSeries1.dataItems.template.locations.categoryX = 0.5;
stackedBarLineSeries1.stacked = true;
stackedBarLineSeries1.tooltip.pointerOrientation = "vertical";
stackedBarLineSeries1.fill = am4core.color("#f8caa0");
stackedBarLineSeries1.stroke = am4core.color("#f8caa0");
/*let bullet1 = stackedBarLineSeries1.bullets.push(new am4charts.LabelBullet());
bullet1.interactionsEnabled = false;
bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet1.label.fill = am4core.color("#ffffff");
bullet1.label.fontSize = 9;
bullet1.locationY = 0.5;*/
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true;
series2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#cf8a4f");
series2.stroke = am4core.color("#cf8a4f");
/*var bullet2 = series2.bullets.push(new am4charts.LabelBullet());
let stackedBarLineSeries2 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
stackedBarLineSeries2.columns.template.width = am4core.percent(80);
stackedBarLineSeries2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarLineSeries2.name = "Medio";
stackedBarLineSeries2.dataFields.categoryX = "category";
stackedBarLineSeries2.dataFields.valueY = "value2";
//stackedBarLineSeries2.dataFields.valueYShow = "totalPercent";
stackedBarLineSeries2.dataItems.template.locations.categoryX = 0.5;
stackedBarLineSeries2.stacked = true;
stackedBarLineSeries2.tooltip.pointerOrientation = "vertical";
stackedBarLineSeries2.fill = am4core.color("#cf8a4f");
stackedBarLineSeries2.stroke = am4core.color("#cf8a4f");
/*let bullet2 = stackedBarLineSeries2.bullets.push(new am4charts.LabelBullet());
bullet2.interactionsEnabled = false;
bullet2.locationY = 0.5;
bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet2.label.fill = am4core.color("#ffffff");
bullet2.label.fontSize = 9;*/
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true;
series3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#93592a");
series3.stroke = am4core.color("#93592a");
/*var bullet3 = series3.bullets.push(new am4charts.LabelBullet());
let stackedBarLineSeries3 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
stackedBarLineSeries3.columns.template.width = am4core.percent(80);
stackedBarLineSeries3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarLineSeries3.name = "Alto";
stackedBarLineSeries3.dataFields.categoryX = "category";
stackedBarLineSeries3.dataFields.valueY = "value3";
//stackedBarLineSeries3.dataFields.valueYShow = "totalPercent";
stackedBarLineSeries3.dataItems.template.locations.categoryX = 0.5;
stackedBarLineSeries3.stacked = true;
stackedBarLineSeries3.tooltip.pointerOrientation = "vertical";
stackedBarLineSeries3.fill = am4core.color("#93592a");
stackedBarLineSeries3.stroke = am4core.color("#93592a");
/*let bullet3 = stackedBarLineSeries3.bullets.push(new am4charts.LabelBullet());
bullet3.interactionsEnabled = false;
bullet3.locationY = 0.5;
bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet3.label.fill = am4core.color("#ffffff");
bullet3.label.fontSize = 9;*/
var lineSeries1 = chart.series.push(new am4charts.LineSeries());
lineSeries1.name = "% Bajo";
lineSeries1.dataFields.valueY = "value1";
lineSeries1.dataFields.categoryX = "category";
lineSeries1.dataFields.valueYShow = "totalPercent";
lineSeries1.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries1.stroke = am4core.color("#D197FA");
lineSeries1.strokeWidth = 3;
lineSeries1.propertyFields.strokeDasharray = "lineDash";
lineSeries1.tooltip.label.textAlign = "middle";
lineSeries1.stacked =true;
var bullet = lineSeries1.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#D197FA"); // tooltips grab fill from parent by default
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"
var circle11 = bullet.createChild(am4core.Circle);
circle11.radius = 4;
circle11.fill = am4core.color("#fff");
circle11.strokeWidth = 3;
var lineSeries2 = chart.series.push(new am4charts.LineSeries());
lineSeries2.name = "% Medio";
lineSeries2.dataFields.valueY = "value2";
lineSeries2.dataFields.categoryX = "category";
lineSeries2.dataFields.valueYShow = "totalPercent";
lineSeries2.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries2.stroke = am4core.color("#844DDF");
lineSeries2.strokeWidth = 3;
lineSeries2.propertyFields.strokeDasharray = "lineDash";
lineSeries2.tooltip.label.textAlign = "middle";
lineSeries2.stacked =true;
var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet());
bullet22.fill = am4core.color("#844DDF"); // tooltips grab fill from parent by default
bullet22.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle22 = bullet22.createChild(am4core.Circle);
circle22.radius = 4;
circle22.fill = am4core.color("#fff");
circle22.strokeWidth = 3;
var lineSeries3 = chart.series.push(new am4charts.LineSeries());
lineSeries3.name = "% Alto";
lineSeries3.dataFields.valueY = "value3";
lineSeries3.dataFields.categoryX = "category";
lineSeries3.dataFields.valueYShow = "totalPercent";
lineSeries3.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries3.stroke = am4core.color("#351591");
lineSeries3.strokeWidth = 3;
lineSeries3.propertyFields.strokeDasharray = "lineDash";
lineSeries3.tooltip.label.textAlign = "middle";
lineSeries3.stacked =true;
var bullet33 = lineSeries3.bullets.push(new am4charts.Bullet());
bullet33.fill = am4core.color("#351591"); // tooltips grab fill from parent by default
bullet33.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle33 = bullet33.createChild(am4core.Circle);
circle33.radius = 4;
circle33.fill = am4core.color("#fff");
circle33.strokeWidth = 3;
let stackedBarLineLineSeries1 = stackedBarLineChart.series.push(new am4charts.LineSeries());
stackedBarLineLineSeries1.name = "% Bajo";
stackedBarLineLineSeries1.dataFields.valueY = "value1";
stackedBarLineLineSeries1.dataFields.categoryX = "category";
stackedBarLineLineSeries1.dataFields.valueYShow = "totalPercent";
// FIXME: using totalPercent chanhges values when turning series on or off
stackedBarLineLineSeries1.yAxis = stackedBarLinePercentAxis;
//stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
stackedBarLineLineSeries1.stroke = am4core.color("#D197FA");
stackedBarLineLineSeries1.strokeWidth = 3;
stackedBarLineLineSeries1.propertyFields.strokeDasharray = "lineDash";
stackedBarLineLineSeries1.tooltip.label.textAlign = "middle";
stackedBarLineLineSeries1.stacked =true;
let stackedBarLineBullet = stackedBarLineLineSeries1.bullets.push(new am4charts.Bullet());
stackedBarLineBullet.fill = am4core.color("#D197FA"); // tooltips grab fill from parent by default
stackedBarLineBullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"
let stackedBarLineBulletCirlce1 = stackedBarLineBullet.createChild(am4core.Circle);
stackedBarLineBulletCirlce1.radius = 4;
stackedBarLineBulletCirlce1.fill = am4core.color("#fff");
stackedBarLineBulletCirlce1.strokeWidth = 3;
let stackedBarLineLineSeries2 = stackedBarLineChart.series.push(new am4charts.LineSeries());
stackedBarLineLineSeries2.name = "% Medio";
stackedBarLineLineSeries2.dataFields.valueY = "value2";
stackedBarLineLineSeries2.dataFields.categoryX = "category";
stackedBarLineLineSeries2.dataFields.valueYShow = "totalPercent";
stackedBarLineLineSeries2.yAxis = stackedBarLinePercentAxis;
//stackedBarLineLineSeries2.dataItems.template.locations.categoryX = 0.5;
stackedBarLineLineSeries2.stroke = am4core.color("#844DDF");
stackedBarLineLineSeries2.strokeWidth = 3;
stackedBarLineLineSeries2.propertyFields.strokeDasharray = "lineDash";
stackedBarLineLineSeries2.tooltip.label.textAlign = "middle";
stackedBarLineLineSeries2.stacked =true;
let stackedBarLineBullet2 = stackedBarLineLineSeries2.bullets.push(new am4charts.Bullet());
stackedBarLineBullet2.fill = am4core.color("#844DDF"); // tooltips grab fill from parent by default
stackedBarLineBullet2.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let stackedBarLineBulletCircle2 = stackedBarLineBullet2.createChild(am4core.Circle);
stackedBarLineBulletCircle2.radius = 4;
stackedBarLineBulletCircle2.fill = am4core.color("#fff");
stackedBarLineBulletCircle2.strokeWidth = 3;
let stackedBarLineLineSeries3 = stackedBarLineChart.series.push(new am4charts.LineSeries());
stackedBarLineLineSeries3.name = "% Alto";
stackedBarLineLineSeries3.dataFields.valueY = "value3";
stackedBarLineLineSeries3.dataFields.categoryX = "category";
stackedBarLineLineSeries3.dataFields.valueYShow = "totalPercent";
stackedBarLineLineSeries3.yAxis = stackedBarLinePercentAxis;
//stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
stackedBarLineLineSeries3.stroke = am4core.color("#351591");
stackedBarLineLineSeries3.strokeWidth = 3;
stackedBarLineLineSeries3.propertyFields.strokeDasharray = "lineDash";
stackedBarLineLineSeries3.tooltip.label.textAlign = "middle";
stackedBarLineLineSeries3.stacked =true;
let stackedBarLineBullet3 = stackedBarLineLineSeries3.bullets.push(new am4charts.Bullet());
stackedBarLineBullet3.fill = am4core.color("#351591"); // tooltips grab fill from parent by default
stackedBarLineBullet3.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let stackedBarLineCircle3 = stackedBarLineBullet3.createChild(am4core.Circle);
stackedBarLineCircle3.radius = 4;
stackedBarLineCircle3.fill = am4core.color("#fff");
stackedBarLineCircle3.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
//++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
var chart = am4core.create("bottomLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
let lineChart = am4core.create("bottomLeftChart", am4charts.XYChart);
lineChart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/*
let table = "periurbanoBajio";
......@@ -471,12 +386,12 @@ am4core.ready(function() {
d3.json(query).then(d => chart.data = d);
*/
let title = chart.titles.create();
title.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
title.fontSize = 9;
title.fill = am4core.color(mainTextColor);
let lineTitle = lineChart.titles.create();
lineTitle.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
lineTitle.fontSize = 9;
lineTitle.fill = am4core.color(mainTextColor);
chart.data = [
lineChart.data = [
{
category: "2015",
Tramo7: 3565.151797,
......@@ -534,135 +449,209 @@ am4core.ready(function() {
];
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
lineChart.legend = new am4charts.Legend();
lineChart.legend.fontSize = 10;
lineChart.legend.labels.template.fill = am4core.color(mainTextColor);
let lineChartCategoryAxis = lineChart.xAxes.push(new am4charts.CategoryAxis());
lineChartCategoryAxis.dataFields.category = "category";
lineChartCategoryAxis.renderer.grid.template.location = 0;
lineChartCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
lineChartCategoryAxis.renderer.labels.template.fontSize = 11;
let lineChartValueAxis = lineChart.yAxes.push(new am4charts.ValueAxis());
lineChartValueAxis.min = 0;
//lineChartValueAxis.max = 100;
lineChartValueAxis.strictMinMax = true;
lineChartValueAxis.calculateTotals = true;
lineChartValueAxis.renderer.minWidth = 50;
lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
lineChartValueAxis.renderer.labels.template.fontSize = 9;
let lineLineSeries1 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries1.name = "T7";//"San Juan del río - Querétaro";
lineLineSeries1.dataFields.valueY = "Tramo7";
lineLineSeries1.dataFields.categoryX = "category";
lineLineSeries1.yAxis = lineChartValueAxis;
lineLineSeries1.stroke = am4core.color("#fddfb9");
lineLineSeries1.strokeWidth = 3;
lineLineSeries1.propertyFields.strokeDasharray = "lineDash";
lineLineSeries1.tooltip.label.textAlign = "middle";
let lineLinebullet1 = lineLineSeries1.bullets.push(new am4charts.Bullet());
lineLinebullet1.fill = am4core.color("#fddfb9"); // tooltips grab fill from parent by default
lineLinebullet1.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"
let lineLineCircle1 = lineLinebullet1.createChild(am4core.Circle);
lineLineCircle1.radius = 4;
lineLineCircle1.fill = am4core.color("#fff");
lineLineCircle1.strokeWidth = 3;
let lineLineSeries2 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries2.name = "T8";//"Querétaro - Celaya";
lineLineSeries2.dataFields.valueY = "Tramo8";
lineLineSeries2.dataFields.categoryX = "category";
lineLineSeries2.yAxis = lineChartValueAxis;
lineLineSeries2.stroke = am4core.color("#fb9a99");
lineLineSeries2.strokeWidth = 3;
lineLineSeries2.propertyFields.strokeDasharray = "lineDash";
lineLineSeries2.tooltip.label.textAlign = "middle";
let lineLineBullet2 = lineLineSeries2.bullets.push(new am4charts.Bullet());
lineLineBullet2.fill = am4core.color("#fb9a99"); // tooltips grab fill from parent by default
lineLineBullet2.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle2 = lineLineBullet2.createChild(am4core.Circle);
lineLineCircle2.radius = 4;
lineLineCircle2.fill = am4core.color("#fff");
lineLineCircle2.strokeWidth = 3;
let lineLineSeries3 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries3.name = "T9";//"Celaya - Salamanca";
lineLineSeries3.dataFields.valueY = "Tramo9";
lineLineSeries3.dataFields.categoryX = "category";
lineLineSeries3.yAxis = lineChartValueAxis;
lineLineSeries3.stroke = am4core.color("#33a09b");
lineLineSeries3.strokeWidth = 3;
lineLineSeries3.propertyFields.strokeDasharray = "lineDash";
lineLineSeries3.tooltip.label.textAlign = "middle";
let lineLineBullet3 = lineLineSeries3.bullets.push(new am4charts.Bullet());
lineLineBullet3.fill = am4core.color("#33a09b"); // tooltips grab fill from parent by default
lineLineBullet3.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle3 = lineLineBullet3.createChild(am4core.Circle);
lineLineCircle3.radius = 4;
lineLineCircle3.fill = am4core.color("#fff");
lineLineCircle3.strokeWidth = 3;
let lineLineSeries4 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries4.name = "T10";//"Salamanca - Irapuato";
lineLineSeries4.dataFields.valueY = "Tramo10";
lineLineSeries4.dataFields.categoryX = "category";
lineLineSeries4.yAxis = lineChartValueAxis;
lineLineSeries4.stroke = am4core.color("#de6eb4");
lineLineSeries4.strokeWidth = 3;
lineLineSeries4.propertyFields.strokeDasharray = "lineDash";
lineLineSeries4.tooltip.label.textAlign = "middle";
let lineLineBullet4 = lineLineSeries4.bullets.push(new am4charts.Bullet());
lineLineBullet4.fill = am4core.color("#de6eb4"); // tooltips grab fill from parent by default
lineLineBullet4.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle4 = lineLineBullet4.createChild(am4core.Circle);
lineLineCircle4.fill = am4core.color("#fff");
lineLineCircle4.radius = 4;
lineLineCircle4.strokeWidth = 3;
let lineLineSeries5 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries5.name = "T11";//"Irapuato - León";
lineLineSeries5.dataFields.valueY = "Tramo11";
lineLineSeries5.dataFields.categoryX = "category";
lineLineSeries5.yAxis = lineChartValueAxis;
lineLineSeries5.stroke = am4core.color("#4db0ec");
lineLineSeries5.strokeWidth = 3;
lineLineSeries5.propertyFields.strokeDasharray = "lineDash";
lineLineSeries5.tooltip.label.textAlign = "middle";
let lineLineBullet5 = lineLineSeries5.bullets.push(new am4charts.Bullet());
lineLineBullet5.fill = am4core.color("#4db0ec"); // tooltips grab fill from parent by default
lineLineBullet5.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle5 = lineLineBullet5.createChild(am4core.Circle);
lineLineCircle5.radius = 4;
lineLineCircle5.fill = am4core.color("#fff");
lineLineCircle5.strokeWidth = 3;
let lineLineSeries6 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries6.name = "T12"; //"León - San Francisco del rincón";
lineLineSeries6.dataFields.valueY = "Tramo12";
lineLineSeries6.dataFields.categoryX = "category";
lineLineSeries6.yAxis = lineChartValueAxis;
lineLineSeries6.stroke = am4core.color("#2be829");
lineLineSeries6.strokeWidth = 3;
lineLineSeries6.propertyFields.strokeDasharray = "lineDash";
lineLineSeries6.tooltip.label.textAlign = "middle";
let lineLineBullet6 = lineLineSeries6.bullets.push(new am4charts.Bullet());
lineLineBullet6.fill = am4core.color("#2be829"); // tooltips grab fill from parent by default
lineLineBullet6.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle6 = lineLineBullet6.createChild(am4core.Circle);
lineLineCircle6.radius = 4;
lineLineCircle6.fill = am4core.color("#fff");
lineLineCircle6.strokeWidth = 3;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11;
//chart.scrollbarX = new am4core.Scrollbar();
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
//valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9;
var lineSeries1 = chart.series.push(new am4charts.LineSeries());
lineSeries1.name = "T7";//"San Juan del río - Querétaro";
lineSeries1.dataFields.valueY = "Tramo7";
lineSeries1.dataFields.categoryX = "category";
lineSeries1.yAxis = valueAxis;
lineSeries1.stroke = am4core.color("#fddfb9");
lineSeries1.strokeWidth = 3;
lineSeries1.propertyFields.strokeDasharray = "lineDash";
lineSeries1.tooltip.label.textAlign = "middle";
var bullet = lineSeries1.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#fddfb9"); // tooltips grab fill from parent by default
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"
var circle11 = bullet.createChild(am4core.Circle);
circle11.radius = 4;
circle11.fill = am4core.color("#fff");
circle11.strokeWidth = 3;
var lineSeries2 = chart.series.push(new am4charts.LineSeries());
lineSeries2.name = "T8";//"Querétaro - Celaya";
lineSeries2.dataFields.valueY = "Tramo8";
lineSeries2.dataFields.categoryX = "category";
lineSeries2.yAxis = valueAxis;
lineSeries2.stroke = am4core.color("#fb9a99");
lineSeries2.strokeWidth = 3;
lineSeries2.propertyFields.strokeDasharray = "lineDash";
lineSeries2.tooltip.label.textAlign = "middle";
var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet());
bullet22.fill = am4core.color("#fb9a99"); // tooltips grab fill from parent by default
bullet22.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle22 = bullet22.createChild(am4core.Circle);
circle22.radius = 4;
circle22.fill = am4core.color("#fff");
circle22.strokeWidth = 3;
var lineSeries3 = chart.series.push(new am4charts.LineSeries());
lineSeries3.name = "T9";//"Celaya - Salamanca";
lineSeries3.dataFields.valueY = "Tramo9";
lineSeries3.dataFields.categoryX = "category";
lineSeries3.yAxis = valueAxis;
lineSeries3.stroke = am4core.color("#33a09b");
lineSeries3.strokeWidth = 3;
lineSeries3.propertyFields.strokeDasharray = "lineDash";
lineSeries3.tooltip.label.textAlign = "middle";
var bullet3 = lineSeries3.bullets.push(new am4charts.Bullet());
bullet3.fill = am4core.color("#33a09b"); // tooltips grab fill from parent by default
bullet3.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle3 = bullet3.createChild(am4core.Circle);
circle3.radius = 4;
circle3.fill = am4core.color("#fff");
circle3.strokeWidth = 3;
var lineSeries4 = chart.series.push(new am4charts.LineSeries());
lineSeries4.name = "T10";//"Salamanca - Irapuato";
lineSeries4.dataFields.valueY = "Tramo10";
lineSeries4.dataFields.categoryX = "category";
lineSeries4.yAxis = valueAxis;
lineSeries4.stroke = am4core.color("#de6eb4");
lineSeries4.strokeWidth = 3;
lineSeries4.propertyFields.strokeDasharray = "lineDash";
lineSeries4.tooltip.label.textAlign = "middle";
var bullet4 = lineSeries4.bullets.push(new am4charts.Bullet());
bullet4.fill = am4core.color("#de6eb4"); // tooltips grab fill from parent by default
bullet4.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle4 = bullet4.createChild(am4core.Circle);
circle4.radius = 4;
circle4.fill = am4core.color("#fff");
circle4.strokeWidth = 3;
var lineSeries5 = chart.series.push(new am4charts.LineSeries());
lineSeries5.name = "T11";//"Irapuato - León";
lineSeries5.dataFields.valueY = "Tramo11";
lineSeries5.dataFields.categoryX = "category";
lineSeries5.yAxis = valueAxis;
lineSeries5.stroke = am4core.color("#4db0ec");
lineSeries5.strokeWidth = 3;
lineSeries5.propertyFields.strokeDasharray = "lineDash";
lineSeries5.tooltip.label.textAlign = "middle";
var bullet5 = lineSeries5.bullets.push(new am4charts.Bullet());
bullet5.fill = am4core.color("#4db0ec"); // tooltips grab fill from parent by default
bullet5.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle5 = bullet5.createChild(am4core.Circle);
circle5.radius = 4;
circle5.fill = am4core.color("#fff");
circle5.strokeWidth = 3;
var lineSeries6 = chart.series.push(new am4charts.LineSeries());
lineSeries6.name = "T12"; //"León - San Francisco del rincón";
lineSeries6.dataFields.valueY = "Tramo12";
lineSeries6.dataFields.categoryX = "category";
lineSeries6.yAxis = valueAxis;
lineSeries6.stroke = am4core.color("#2be829");
lineSeries6.strokeWidth = 3;
lineSeries6.propertyFields.strokeDasharray = "lineDash";
lineSeries6.tooltip.label.textAlign = "middle";
var bullet6 = lineSeries6.bullets.push(new am4charts.Bullet());
bullet6.fill = am4core.color("#2be829"); // tooltips grab fill from parent by default
bullet6.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle6 = bullet6.createChild(am4core.Circle);
circle6.radius = 4;
circle6.fill = am4core.color("#fff");
circle6.strokeWidth = 3;
// Create bar + percentage chart
let barPercentChart = am4core.create("bottomRightChart", am4charts.XYChart);
//chart.scrollbarX = new am4core.Scrollbar();
let barPercentChartTitle = barPercentChart.titles.create();
barPercentChartTitle.text = "Cobertura del medio construido en los tramos del Corredor del Bajío";
barPercentChartTitle.fontSize = 9;
barPercentChartTitle.fill = am4core.color(mainTextColor);
let table = "periurbanoBajio";
let query = `${baseUrl}/query/${table}?columns=region,total20/1000 as has,(total20-total15)*100/total15 as inc&filter=id>6&id<13&sort=inc desc`;
d3.json(query).then(d => barPercentChart.data = d);
/* Create axes */
let barPercentCategoryAxis = barPercentChart.xAxes.push(new am4charts.CategoryAxis());
barPercentCategoryAxis.dataFields.category = "region";
barPercentCategoryAxis.renderer.minGridDistance = 30;
barPercentCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barPercentCategoryAxis.renderer.labels.template.fontSize = 9;
}); // end am4core.ready()
/* Create primary value axis */
let barPercentValueAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());
barPercentValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barPercentValueAxis.renderer.labels.template.fontSize = 9;
/* Create secondary value axis */
let barPercentAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());
barPercentAxis.renderer.opposite = true;
barPercentAxis.min = 0;
barPercentAxis.max = 110;
barPercentAxis.strictMinMax = true;
barPercentAxis.renderer.grid.template.disabled = true;
barPercentAxis.numberFormatter = new am4core.NumberFormatter();
barPercentAxis.numberFormatter.numberFormat = "#'%'"
barPercentAxis.cursorTooltipEnabled = false;
barPercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barPercentAxis.renderer.labels.template.fontSize = 9;
/* Create series */
let barPercentColumnSeries = barPercentChart.series.push(new am4charts.ColumnSeries());
barPercentColumnSeries.name = "Medio construido en 2020";
barPercentColumnSeries.dataFields.valueY = "has";
barPercentColumnSeries.dataFields.categoryX = "region";
barPercentColumnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} Ha[/] [#fff]{additional}[/]"
barPercentColumnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
barPercentColumnSeries.columns.template.propertyFields.stroke = "stroke";
barPercentColumnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
barPercentColumnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
barPercentColumnSeries.tooltip.label.textAlign = "middle";
barPercentColumnSeries.fill = am4core.color("#fca311");
barPercentColumnSeries.stroke = am4core.color("#fca311");
let barPercentLineSeries = barPercentChart.series.push(new am4charts.LineSeries());
barPercentLineSeries.name = "% de crecimiento del medio construido 2015-2020";
barPercentLineSeries.dataFields.valueY = "inc";
barPercentLineSeries.dataFields.categoryX = "region";
barPercentLineSeries.yAxis = barPercentAxis;
barPercentLineSeries.stroke = am4core.color("#c41e3a");
barPercentLineSeries.strokeWidth = 3;
barPercentLineSeries.propertyFields.strokeDasharray = "lineDash";
barPercentLineSeries.tooltip.label.textAlign = "middle";
let barPercentBullet = barPercentLineSeries.bullets.push(new am4charts.Bullet());
barPercentBullet.fill = am4core.color("#c41e3a"); // tooltips grab fill from parent by default
barPercentBullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} %[/] [#fff]{additional}[/]"
let barPercentCircle = barPercentBullet.createChild(am4core.Circle);
barPercentCircle.radius = 4;
barPercentCircle.fill = am4core.color("#fff");
barPercentCircle.strokeWidth = 3;
}); // end am4core.ready()
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment