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
Show 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 ...@@ -12,107 +12,30 @@ let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-tex
am4core.ready(function() { am4core.ready(function() {
let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
// Themes begin // Themes begin
am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_animated);
// Themes end // Themes end
// Create chart instance //++++++++++++++++++++++++++++++++++++++++++++++++++++++BARRAS SEMAFORO++
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 FALTA VER DE QUÉ TABLA VIENEN ESTOS DATOS Y ELEGIR LA VERSION EN PIXELES
Y CONSTRUIR EL QUERY Y CONSTRUIR EL QUERY
*/ */
am4core.ready(function() {
var chart = am4core.create("topLeftChart", am4charts.XYChart); let stackedBarChart = am4core.create("topLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in stackedBarChart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/* /*
let table = "periurbanoBajio"; 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`; 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); d3.json(query).then(d => chart.data = d);
*/ */
let title = chart.titles.create(); let stackedBarTitle = stackedBarChart.titles.create();
title.text = "Grado de urbanización en la RU-CMCP (número de pixeles)"; stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
title.fontSize = 9; stackedBarTitle.fontSize = 9;
title.fill = am4core.color(mainTextColor); stackedBarTitle.fill = am4core.color(mainTextColor);
chart.data = [ stackedBarChart.data = [
{ {
category: "2015", category: "2015",
value1: 21750.100923, value1: 21750.100923,
...@@ -150,38 +73,38 @@ am4core.ready(function() { ...@@ -150,38 +73,38 @@ am4core.ready(function() {
value3: 3789.051441 value3: 3789.051441
} }
]; ];
chart.legend = new am4charts.Legend(); stackedBarChart.legend = new am4charts.Legend();
chart.legend.fontSize = 10; stackedBarChart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor); stackedBarChart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); let stackedBarCategoryAxis = stackedBarChart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category"; stackedBarCategoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0; stackedBarCategoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor); stackedBarCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11; stackedBarCategoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); let stackedBarValueAxis = stackedBarChart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0; stackedBarValueAxis.min = 0;
//valueAxis.max = 100; //valueAxis.max = 100;
valueAxis.strictMinMax = true; stackedBarValueAxis.strictMinMax = true;
valueAxis.calculateTotals = true; stackedBarValueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50; stackedBarValueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9; stackedBarValueAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries()); let stackedBarSeries1 = stackedBarChart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80); stackedBarSeries1.columns.template.width = am4core.percent(80);
series1.name = "Bajo"; stackedBarSeries1.name = "Bajo";
series1.dataFields.categoryX = "category"; stackedBarSeries1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1"; stackedBarSeries1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha"; stackedBarSeries1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5; stackedBarSeries1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true; stackedBarSeries1.stacked = true;
series1.tooltip.pointerOrientation = "vertical"; stackedBarSeries1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#2dc937"); stackedBarSeries1.fill = am4core.color("#2dc937");
series1.stroke = am4core.color("#2dc937"); stackedBarSeries1.stroke = am4core.color("#2dc937");
/*var bullet1 = series1.bullets.push(new am4charts.LabelBullet()); /*let bullet1 = stackedBarSeries.bullets.push(new am4charts.LabelBullet());
bullet1.interactionsEnabled = false; bullet1.interactionsEnabled = false;
bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha"; bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet1.label.fill = am4core.color("#ffffff"); bullet1.label.fill = am4core.color("#ffffff");
...@@ -189,40 +112,40 @@ am4core.ready(function() { ...@@ -189,40 +112,40 @@ am4core.ready(function() {
bullet1.locationY = 0.5;*/ bullet1.locationY = 0.5;*/
var series2 = chart.series.push(new am4charts.ColumnSeries()); let stackedBarSeries2 = stackedBarChart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80); stackedBarSeries2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; stackedBarSeries2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio"; stackedBarSeries2.name = "Medio";
series2.dataFields.categoryX = "category"; stackedBarSeries2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2"; stackedBarSeries2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent"; //stackedBarSeries2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5; stackedBarSeries2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true; stackedBarSeries2.stacked = true;
series2.tooltip.pointerOrientation = "vertical"; stackedBarSeries2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#e7b416"); stackedBarSeries2.fill = am4core.color("#e7b416");
series2.stroke = am4core.color("#e7b416"); stackedBarSeries2.stroke = am4core.color("#e7b416");
/*var bullet2 = series2.bullets.push(new am4charts.LabelBullet()); /*let bullet2 = stackedBarSeries2.bullets.push(new am4charts.LabelBullet());
bullet2.interactionsEnabled = false; bullet2.interactionsEnabled = false;
bullet2.locationY = 0.5; bullet2.locationY = 0.5;
bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha"; bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet2.label.fill = am4core.color("#ffffff"); bullet2.label.fill = am4core.color("#ffffff");
bullet2.label.fontSize = 9;*/ bullet2.label.fontSize = 9;*/
var series3 = chart.series.push(new am4charts.ColumnSeries()); let stackedBarSeries3 = stackedBarChart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80); stackedBarSeries3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; stackedBarSeries3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto"; stackedBarSeries3.name = "Alto";
series3.dataFields.categoryX = "category"; stackedBarSeries3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3"; stackedBarSeries3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent"; //stackedBarSeries3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5; stackedBarSeries3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true; stackedBarSeries3.stacked = true;
series3.tooltip.pointerOrientation = "vertical"; stackedBarSeries3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#c41e3a"); stackedBarSeries3.fill = am4core.color("#c41e3a");
series3.stroke = am4core.color("#c41e3a"); stackedBarSeries3.stroke = am4core.color("#c41e3a");
/*var bullet3 = series3.bullets.push(new am4charts.LabelBullet()); /*let bullet3 = stackedBarSeries3.bullets.push(new am4charts.LabelBullet());
bullet3.interactionsEnabled = false; bullet3.interactionsEnabled = false;
bullet3.locationY = 0.5; bullet3.locationY = 0.5;
bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha"; bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha";
...@@ -230,30 +153,24 @@ am4core.ready(function() { ...@@ -230,30 +153,24 @@ am4core.ready(function() {
bullet3.label.fontSize = 9;*/ bullet3.label.fontSize = 9;*/
}); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY
am4core.ready(function() {
// Themes begin //++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
am4core.useTheme(am4themes_animated); // FALTA CONSTRUIR QUERY
// Themes end
var chart = am4core.create("topRightChart", am4charts.XYChart); let stackedBarLineChart = am4core.create("topRightChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in stackedBarLineChart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/* /*
let table = "periurbanoBajio"; 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`; 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); d3.json(query).then(d => chart.data = d);
*/ */
let title = chart.titles.create(); let stackedBarLineTitle = stackedBarLineChart.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"; stackedBarLineTitle.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; stackedBarLineTitle.fontSize = 9;
title.fill = am4core.color(mainTextColor); stackedBarLineTitle.fill = am4core.color(mainTextColor);
chart.data = [ stackedBarLineChart.data = [
{ {
category: "2015", category: "2015",
value1: 21750.100923, value1: 21750.100923,
...@@ -292,178 +209,176 @@ am4core.ready(function() { ...@@ -292,178 +209,176 @@ am4core.ready(function() {
} }
]; ];
chart.legend = new am4charts.Legend(); stackedBarLineChart.legend = new am4charts.Legend();
chart.legend.fontSize = 10; stackedBarLineChart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor); stackedBarLineChart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); let stackedBarLineCategoryAxis = stackedBarLineChart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category"; stackedBarLineCategoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0; stackedBarLineCategoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor); stackedBarLineCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11; stackedBarLineCategoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); let stackedBarLineValueAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0; stackedBarLineValueAxis.min = 0;
//valueAxis.max = 100; //stackedBarLineValueAxis.max = 100;
valueAxis.strictMinMax = true; stackedBarLineValueAxis.strictMinMax = true;
valueAxis.calculateTotals = true; stackedBarLineValueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50; stackedBarLineValueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); stackedBarLineValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9; stackedBarLineValueAxis.renderer.labels.template.fontSize = 9;
/* Create secondary value axis */ /* Create secondary value axis */
let percentAxis = chart.yAxes.push(new am4charts.ValueAxis()); let stackedBarLinePercentAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
percentAxis.renderer.opposite = true; stackedBarLinePercentAxis.renderer.opposite = true;
percentAxis.calculateTotals = true; stackedBarLinePercentAxis.calculateTotals = true;
percentAxis.min = 50; stackedBarLinePercentAxis.min = 50;
percentAxis.max = 110; stackedBarLinePercentAxis.max = 110;
percentAxis.strictMinMax = true; stackedBarLinePercentAxis.strictMinMax = true;
percentAxis.renderer.grid.template.disabled = true; stackedBarLinePercentAxis.renderer.grid.template.disabled = true;
percentAxis.numberFormatter = new am4core.NumberFormatter(); stackedBarLinePercentAxis.numberFormatter = new am4core.NumberFormatter();
percentAxis.numberFormatter.numberFormat = "#'%'" stackedBarLinePercentAxis.numberFormatter.numberFormat = "#'%'"
percentAxis.cursorTooltipEnabled = false; stackedBarLinePercentAxis.cursorTooltipEnabled = false;
percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor); stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
percentAxis.renderer.labels.template.fontSize = 9; stackedBarLinePercentAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries()); let stackedBarLineSeries1 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80); stackedBarLineSeries1.columns.template.width = am4core.percent(80);
series1.name = "Bajo"; stackedBarLineSeries1.name = "Bajo";
series1.dataFields.categoryX = "category"; stackedBarLineSeries1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1"; stackedBarLineSeries1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha"; stackedBarLineSeries1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5; stackedBarLineSeries1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true; stackedBarLineSeries1.stacked = true;
series1.tooltip.pointerOrientation = "vertical"; stackedBarLineSeries1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#f8caa0"); stackedBarLineSeries1.fill = am4core.color("#f8caa0");
series1.stroke = am4core.color("#f8caa0"); stackedBarLineSeries1.stroke = am4core.color("#f8caa0");
/*var bullet1 = series1.bullets.push(new am4charts.LabelBullet()); /*let bullet1 = stackedBarLineSeries1.bullets.push(new am4charts.LabelBullet());
bullet1.interactionsEnabled = false; bullet1.interactionsEnabled = false;
bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha"; bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet1.label.fill = am4core.color("#ffffff"); bullet1.label.fill = am4core.color("#ffffff");
bullet1.label.fontSize = 9; bullet1.label.fontSize = 9;
bullet1.locationY = 0.5;*/ bullet1.locationY = 0.5;*/
var series2 = chart.series.push(new am4charts.ColumnSeries()); let stackedBarLineSeries2 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80); stackedBarLineSeries2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; stackedBarLineSeries2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio"; stackedBarLineSeries2.name = "Medio";
series2.dataFields.categoryX = "category"; stackedBarLineSeries2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2"; stackedBarLineSeries2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent"; //stackedBarLineSeries2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5; stackedBarLineSeries2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true; stackedBarLineSeries2.stacked = true;
series2.tooltip.pointerOrientation = "vertical"; stackedBarLineSeries2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#cf8a4f"); stackedBarLineSeries2.fill = am4core.color("#cf8a4f");
series2.stroke = am4core.color("#cf8a4f"); stackedBarLineSeries2.stroke = am4core.color("#cf8a4f");
/*var bullet2 = series2.bullets.push(new am4charts.LabelBullet()); /*let bullet2 = stackedBarLineSeries2.bullets.push(new am4charts.LabelBullet());
bullet2.interactionsEnabled = false; bullet2.interactionsEnabled = false;
bullet2.locationY = 0.5; bullet2.locationY = 0.5;
bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha"; bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet2.label.fill = am4core.color("#ffffff"); bullet2.label.fill = am4core.color("#ffffff");
bullet2.label.fontSize = 9;*/ bullet2.label.fontSize = 9;*/
var series3 = chart.series.push(new am4charts.ColumnSeries()); let stackedBarLineSeries3 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80); stackedBarLineSeries3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; stackedBarLineSeries3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto"; stackedBarLineSeries3.name = "Alto";
series3.dataFields.categoryX = "category"; stackedBarLineSeries3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3"; stackedBarLineSeries3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent"; //stackedBarLineSeries3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5; stackedBarLineSeries3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true; stackedBarLineSeries3.stacked = true;
series3.tooltip.pointerOrientation = "vertical"; stackedBarLineSeries3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#93592a"); stackedBarLineSeries3.fill = am4core.color("#93592a");
series3.stroke = am4core.color("#93592a"); stackedBarLineSeries3.stroke = am4core.color("#93592a");
/*var bullet3 = series3.bullets.push(new am4charts.LabelBullet()); /*let bullet3 = stackedBarLineSeries3.bullets.push(new am4charts.LabelBullet());
bullet3.interactionsEnabled = false; bullet3.interactionsEnabled = false;
bullet3.locationY = 0.5; bullet3.locationY = 0.5;
bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha"; bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet3.label.fill = am4core.color("#ffffff"); bullet3.label.fill = am4core.color("#ffffff");
bullet3.label.fontSize = 9;*/ bullet3.label.fontSize = 9;*/
var lineSeries1 = chart.series.push(new am4charts.LineSeries()); let stackedBarLineLineSeries1 = stackedBarLineChart.series.push(new am4charts.LineSeries());
lineSeries1.name = "% Bajo"; stackedBarLineLineSeries1.name = "% Bajo";
lineSeries1.dataFields.valueY = "value1"; stackedBarLineLineSeries1.dataFields.valueY = "value1";
lineSeries1.dataFields.categoryX = "category"; stackedBarLineLineSeries1.dataFields.categoryX = "category";
lineSeries1.dataFields.valueYShow = "totalPercent"; stackedBarLineLineSeries1.dataFields.valueYShow = "totalPercent";
lineSeries1.yAxis = percentAxis; // FIXME: using totalPercent chanhges values when turning series on or off
//lineSeries.dataItems.template.locations.categoryX = 0.5; stackedBarLineLineSeries1.yAxis = stackedBarLinePercentAxis;
//stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries1.stroke = am4core.color("#D197FA");
lineSeries1.strokeWidth = 3; stackedBarLineLineSeries1.stroke = am4core.color("#D197FA");
lineSeries1.propertyFields.strokeDasharray = "lineDash"; stackedBarLineLineSeries1.strokeWidth = 3;
lineSeries1.tooltip.label.textAlign = "middle"; stackedBarLineLineSeries1.propertyFields.strokeDasharray = "lineDash";
lineSeries1.stacked =true; stackedBarLineLineSeries1.tooltip.label.textAlign = "middle";
stackedBarLineLineSeries1.stacked =true;
var bullet = lineSeries1.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#D197FA"); // tooltips grab fill from parent by default let stackedBarLineBullet = stackedBarLineLineSeries1.bullets.push(new am4charts.Bullet());
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]" stackedBarLineBullet.fill = am4core.color("#D197FA"); // tooltips grab fill from parent by default
var circle11 = bullet.createChild(am4core.Circle); stackedBarLineBullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"
circle11.radius = 4;
circle11.fill = am4core.color("#fff"); let stackedBarLineBulletCirlce1 = stackedBarLineBullet.createChild(am4core.Circle);
circle11.strokeWidth = 3; stackedBarLineBulletCirlce1.radius = 4;
stackedBarLineBulletCirlce1.fill = am4core.color("#fff");
var lineSeries2 = chart.series.push(new am4charts.LineSeries()); stackedBarLineBulletCirlce1.strokeWidth = 3;
lineSeries2.name = "% Medio";
lineSeries2.dataFields.valueY = "value2"; let stackedBarLineLineSeries2 = stackedBarLineChart.series.push(new am4charts.LineSeries());
lineSeries2.dataFields.categoryX = "category"; stackedBarLineLineSeries2.name = "% Medio";
lineSeries2.dataFields.valueYShow = "totalPercent"; stackedBarLineLineSeries2.dataFields.valueY = "value2";
lineSeries2.yAxis = percentAxis; stackedBarLineLineSeries2.dataFields.categoryX = "category";
//lineSeries.dataItems.template.locations.categoryX = 0.5; stackedBarLineLineSeries2.dataFields.valueYShow = "totalPercent";
stackedBarLineLineSeries2.yAxis = stackedBarLinePercentAxis;
lineSeries2.stroke = am4core.color("#844DDF"); //stackedBarLineLineSeries2.dataItems.template.locations.categoryX = 0.5;
lineSeries2.strokeWidth = 3;
lineSeries2.propertyFields.strokeDasharray = "lineDash"; stackedBarLineLineSeries2.stroke = am4core.color("#844DDF");
lineSeries2.tooltip.label.textAlign = "middle"; stackedBarLineLineSeries2.strokeWidth = 3;
lineSeries2.stacked =true; stackedBarLineLineSeries2.propertyFields.strokeDasharray = "lineDash";
stackedBarLineLineSeries2.tooltip.label.textAlign = "middle";
var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet()); stackedBarLineLineSeries2.stacked =true;
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}[/]" let stackedBarLineBullet2 = stackedBarLineLineSeries2.bullets.push(new am4charts.Bullet());
var circle22 = bullet22.createChild(am4core.Circle); stackedBarLineBullet2.fill = am4core.color("#844DDF"); // tooltips grab fill from parent by default
circle22.radius = 4; stackedBarLineBullet2.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
circle22.fill = am4core.color("#fff");
circle22.strokeWidth = 3; let stackedBarLineBulletCircle2 = stackedBarLineBullet2.createChild(am4core.Circle);
stackedBarLineBulletCircle2.radius = 4;
var lineSeries3 = chart.series.push(new am4charts.LineSeries()); stackedBarLineBulletCircle2.fill = am4core.color("#fff");
lineSeries3.name = "% Alto"; stackedBarLineBulletCircle2.strokeWidth = 3;
lineSeries3.dataFields.valueY = "value3";
lineSeries3.dataFields.categoryX = "category"; let stackedBarLineLineSeries3 = stackedBarLineChart.series.push(new am4charts.LineSeries());
lineSeries3.dataFields.valueYShow = "totalPercent"; stackedBarLineLineSeries3.name = "% Alto";
lineSeries3.yAxis = percentAxis; stackedBarLineLineSeries3.dataFields.valueY = "value3";
//lineSeries.dataItems.template.locations.categoryX = 0.5; stackedBarLineLineSeries3.dataFields.categoryX = "category";
stackedBarLineLineSeries3.dataFields.valueYShow = "totalPercent";
lineSeries3.stroke = am4core.color("#351591"); stackedBarLineLineSeries3.yAxis = stackedBarLinePercentAxis;
lineSeries3.strokeWidth = 3; //stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries3.propertyFields.strokeDasharray = "lineDash";
lineSeries3.tooltip.label.textAlign = "middle"; stackedBarLineLineSeries3.stroke = am4core.color("#351591");
lineSeries3.stacked =true; stackedBarLineLineSeries3.strokeWidth = 3;
stackedBarLineLineSeries3.propertyFields.strokeDasharray = "lineDash";
var bullet33 = lineSeries3.bullets.push(new am4charts.Bullet()); stackedBarLineLineSeries3.tooltip.label.textAlign = "middle";
bullet33.fill = am4core.color("#351591"); // tooltips grab fill from parent by default stackedBarLineLineSeries3.stacked =true;
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); let stackedBarLineBullet3 = stackedBarLineLineSeries3.bullets.push(new am4charts.Bullet());
circle33.radius = 4; stackedBarLineBullet3.fill = am4core.color("#351591"); // tooltips grab fill from parent by default
circle33.fill = am4core.color("#fff"); stackedBarLineBullet3.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
circle33.strokeWidth = 3; let stackedBarLineCircle3 = stackedBarLineBullet3.createChild(am4core.Circle);
stackedBarLineCircle3.radius = 4;
stackedBarLineCircle3.fill = am4core.color("#fff");
stackedBarLineCircle3.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar(); //chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
am4core.ready(function() {
// Themes begin //++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("bottomLeftChart", am4charts.XYChart); let lineChart = am4core.create("bottomLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in lineChart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/* /*
let table = "periurbanoBajio"; let table = "periurbanoBajio";
...@@ -471,12 +386,12 @@ am4core.ready(function() { ...@@ -471,12 +386,12 @@ am4core.ready(function() {
d3.json(query).then(d => chart.data = d); d3.json(query).then(d => chart.data = d);
*/ */
let title = chart.titles.create(); let lineTitle = lineChart.titles.create();
title.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío"; lineTitle.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
title.fontSize = 9; lineTitle.fontSize = 9;
title.fill = am4core.color(mainTextColor); lineTitle.fill = am4core.color(mainTextColor);
chart.data = [ lineChart.data = [
{ {
category: "2015", category: "2015",
Tramo7: 3565.151797, Tramo7: 3565.151797,
...@@ -534,135 +449,209 @@ am4core.ready(function() { ...@@ -534,135 +449,209 @@ am4core.ready(function() {
]; ];
chart.legend = new am4charts.Legend(); lineChart.legend = new am4charts.Legend();
chart.legend.fontSize = 10; lineChart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor); 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()); //chart.scrollbarX = new am4core.Scrollbar();
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()); // Create bar + percentage chart
valueAxis.min = 0; let barPercentChart = am4core.create("bottomRightChart", am4charts.XYChart);
//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;
//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);
}); // end am4core.ready() 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;
/* 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