Skip to content

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

Fix periurbano chart divs

parent d85f55ff
Hide whitespace changes
Inline Side-by-side
Showing with 595 additions and 595 deletions
public/centropais/index.html
View file @ 0353d3e5
...@@ -82,16 +82,15 @@ ...@@ -82,16 +82,15 @@
<div class="col-6" id="story"> <div class="col-6" id="story">
<div class="loader"></div> <div class="loader"></div>
<div class="row h-50 border-bottom"> <div class="row h-50 border-bottom">
<div class="col" id="topChart"> <div class="col" id="topLeftChart">
<div class="row h-100"> <div class="row h-100">
<div id="odChart"></div> <div id="odChart"></div>
<div id="barChart"></div> <div id="barChart"></div>
</div> </div>
</div> </div>
<div class="col" id="topLeftChart"> <div class="col border-left" id="topRightChart">
<div class="row h-100"> <div class="row h-100">
</div> </div>
</div> </div>
</div> </div>
...@@ -214,10 +213,10 @@ ...@@ -214,10 +213,10 @@
$("#showPeriurban").on("click", () => { $("#showPeriurban").on("click", () => {
["../js/centropais_periurbano.js", "../js/centropais_periurbano_charts.js"].forEach( src =>{ ["../js/centropais_periurbano.js", "../js/centropais_periurbano_charts.js"].forEach( src =>{
let script = document.createElement('script'); let script = document.createElement('script');
//let script = document.createElement('script'); //let script = document.createElement('script');
script.src = src;//"../js/centropais_periurbano.js"; script.src = src;//"../js/centropais_periurbano.js";
script.async = false; script.async = false;
document.body.appendChild(script); document.body.appendChild(script);
}); });
}); });
</script> </script>
......
public/js/centropais_basemap.js
View file @ 0353d3e5
...@@ -664,7 +664,7 @@ const createFlowLayer = (geojson, type, addOnCreate) => { ...@@ -664,7 +664,7 @@ const createFlowLayer = (geojson, type, addOnCreate) => {
// if layer is to be added on creation, add click funcionality and populate chart // if layer is to be added on creation, add click funcionality and populate chart
if (addOnCreate) { if (addOnCreate) {
flowMapLayer.addTo(map).on("click", odClick); flowMapLayer.addTo(map).on("click", odClick);
let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topChart"); let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topLeftChart");
odChart.data = newData; odChart.data = newData;
let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart"); let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart");
......
public/js/centropais_charts.js
View file @ 0353d3e5
...@@ -19,7 +19,7 @@ am4core.ready(function() { ...@@ -19,7 +19,7 @@ am4core.ready(function() {
am4core.options.autoSetClassName = true; am4core.options.autoSetClassName = true;
// Themes end // Themes end
let chart = am4core.create("topChart", am4charts.XYChart); let chart = am4core.create("topLeftChart", am4charts.XYChart);
chart.maskBullets = false; chart.maskBullets = false;
let title = chart.titles.create(); let title = chart.titles.create();
......
public/js/centropais_functions.js
View file @ 0353d3e5
...@@ -97,6 +97,7 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale ...@@ -97,6 +97,7 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale
// TODO: remove unused functions // TODO: remove unused functions
$("#startHeader").remove(); $("#startHeader").remove();
$("#initial-backdrop").remove(); $("#initial-backdrop").remove();
$("#topRightChart")[0].style.setProperty("display", "none");
$("#regionSelect").remove(); $("#regionSelect").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important"); $("#mainContainer")[0].style.setProperty("display", "flex", "important");
$("#mexmap").show(); $("#mexmap").show();
...@@ -291,7 +292,7 @@ $("#indicatorSelect").on("change", function() { ...@@ -291,7 +292,7 @@ $("#indicatorSelect").on("change", function() {
}); });
// on select, update chart data // on select, update chart data
let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topChart"); let odChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "topLeftChart");
odChart.data = odData[option]; odChart.data = odData[option];
let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart"); let chordChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "bottomLeftChart");
......
public/js/centropais_periurbano_charts.js
View file @ 0353d3e5
/* /*
* Copyright 2020 - All rights reserved. * Copyright 2021 - All rights reserved.
* Rodrigo Tapia-McClung * Rodrigo Tapia-McClung
* *
* June 2020 * March 2021
*/ */
/* globals am4core, am4charts, am4themes_animated, intervals */ /* globals am4core, am4charts, am4themes_animated, baseUrl */
let minValue, maxValue;
let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color"); let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
let cellbgColor = getComputedStyle(document.body).getPropertyValue("--main-bg-color"); //let cellbgColor = getComputedStyle(document.body).getPropertyValue("--main-bg-color");
am4core.ready(function() { am4core.ready(function() {
let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color"); 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 // Create chart instance
var chart = am4core.create("bottomRightChart", am4charts.XYChart); var chart = am4core.create("bottomRightChart", am4charts.XYChart);
let title = chart.titles.create(); let title = chart.titles.create();
title.text = "Cobertura del medio construido en los tramos del Corredor del Bajío"; title.text = "Cobertura del medio construido en los tramos del Corredor del Bajío";
title.fontSize = 9; title.fontSize = 9;
title.fill = am4core.color(mainTextColor); title.fill = am4core.color(mainTextColor);
...@@ -31,639 +30,639 @@ am4core.ready(function() { ...@@ -31,639 +30,639 @@ am4core.ready(function() {
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`; 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); d3.json(query).then(d => chart.data = d);
/* Create axes */ /* Create axes */
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "region"; categoryAxis.dataFields.category = "region";
categoryAxis.renderer.minGridDistance = 30; categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor); categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 9; categoryAxis.renderer.labels.template.fontSize = 9;
/* Create primary value axis */ /* Create primary value axis */
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9; valueAxis.renderer.labels.template.fontSize = 9;
/* Create secondary value axis */ /* Create secondary value axis */
let percentAxis = chart.yAxes.push(new am4charts.ValueAxis()); let percentAxis = chart.yAxes.push(new am4charts.ValueAxis());
percentAxis.renderer.opposite = true; percentAxis.renderer.opposite = true;
percentAxis.min = 0; percentAxis.min = 0;
percentAxis.max = 110; percentAxis.max = 110;
percentAxis.strictMinMax = true; percentAxis.strictMinMax = true;
percentAxis.renderer.grid.template.disabled = true; percentAxis.renderer.grid.template.disabled = true;
percentAxis.numberFormatter = new am4core.NumberFormatter(); percentAxis.numberFormatter = new am4core.NumberFormatter();
percentAxis.numberFormatter.numberFormat = "#'%'" percentAxis.numberFormatter.numberFormat = "#'%'"
percentAxis.cursorTooltipEnabled = false; percentAxis.cursorTooltipEnabled = false;
percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor); percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
percentAxis.renderer.labels.template.fontSize = 9; percentAxis.renderer.labels.template.fontSize = 9;
/* Create series */ /* Create series */
var columnSeries = chart.series.push(new am4charts.ColumnSeries()); var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = "Medio construido en 2020"; columnSeries.name = "Medio construido en 2020";
columnSeries.dataFields.valueY = "has"; columnSeries.dataFields.valueY = "has";
columnSeries.dataFields.categoryX = "region"; 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.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.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke"; columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth"; columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash"; columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle"; columnSeries.tooltip.label.textAlign = "middle";
columnSeries.fill = am4core.color("#fca311"); columnSeries.fill = am4core.color("#fca311");
columnSeries.stroke = am4core.color("#fca311"); columnSeries.stroke = am4core.color("#fca311");
var lineSeries = chart.series.push(new am4charts.LineSeries()); var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.name = "% de crecimiento del medio construido 2015-2020"; lineSeries.name = "% de crecimiento del medio construido 2015-2020";
lineSeries.dataFields.valueY = "inc"; lineSeries.dataFields.valueY = "inc";
lineSeries.dataFields.categoryX = "region"; lineSeries.dataFields.categoryX = "region";
lineSeries.yAxis = percentAxis; lineSeries.yAxis = percentAxis;
lineSeries.stroke = am4core.color("#c41e3a"); lineSeries.stroke = am4core.color("#c41e3a");
lineSeries.strokeWidth = 3; lineSeries.strokeWidth = 3;
lineSeries.propertyFields.strokeDasharray = "lineDash"; lineSeries.propertyFields.strokeDasharray = "lineDash";
lineSeries.tooltip.label.textAlign = "middle"; lineSeries.tooltip.label.textAlign = "middle";
var bullet = lineSeries.bullets.push(new am4charts.Bullet()); var bullet = lineSeries.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#c41e3a"); // tooltips grab fill from parent by default 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}[/]" bullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} %[/] [#fff]{additional}[/]"
var circle = bullet.createChild(am4core.Circle); var circle = bullet.createChild(am4core.Circle);
circle.radius = 4; circle.radius = 4;
circle.fill = am4core.color("#fff"); circle.fill = am4core.color("#fff");
circle.strokeWidth = 3; circle.strokeWidth = 3;
}); // end am4core.ready() }); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++++++++++++BARRAS SEMAFORO++ //++++++++++++++++++++++++++++++++++++++++++++++++++++++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() { am4core.ready(function() {
var chart = am4core.create("odChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/* var chart = am4core.create("topLeftChart", am4charts.XYChart);
chart.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 title = chart.titles.create();
title.text = "Grado de urbanización en la RU-CMCP (número de pixeles)"; title.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
title.fontSize = 9; title.fontSize = 9;
title.fill = am4core.color(mainTextColor); title.fill = am4core.color(mainTextColor);
chart.data = [ chart.data = [
{ {
category: "2015", category: "2015",
value1: 21750.100923, value1: 21750.100923,
value2: 3124.799027, value2: 3124.799027,
value3: 1575.434647 value3: 1575.434647
}, },
{ {
category: "2016", category: "2016",
value1: 24659.53423, value1: 24659.53423,
value2: 3621.838793, value2: 3621.838793,
value3: 1939.124265 value3: 1939.124265
}, },
{ {
category: "2017", category: "2017",
value1: 27560.13116, value1: 27560.13116,
value2: 4177.560407, value2: 4177.560407,
value3: 2393.056475 value3: 2393.056475
}, },
{ {
category: "2018", category: "2018",
value1: 30374.679993, value1: 30374.679993,
value2: 4719.515675, value2: 4719.515675,
value3: 2854.437993 value3: 2854.437993
}, },
{ {
category: "2019", category: "2019",
value1: 32656.93783, value1: 32656.93783,
value2: 5188.035213, value2: 5188.035213,
value3: 3357.159708 value3: 3357.159708
}, },
{ {
category: "2020", category: "2020",
value1: 34305.410194, value1: 34305.410194,
value2: 5602.741586, value2: 5602.741586,
value3: 3789.051441 value3: 3789.051441
} }
]; ];
chart.legend = new am4charts.Legend(); chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10; chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor); chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category"; categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor); categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11; categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0; valueAxis.min = 0;
//valueAxis.max = 100; //valueAxis.max = 100;
valueAxis.strictMinMax = true; valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true; valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50; valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9; valueAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries()); var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80); series1.columns.template.width = am4core.percent(80);
series1.name = "Bajo"; series1.name = "Bajo";
series1.dataFields.categoryX = "category"; series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1"; series1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha"; series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5; series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true; series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical"; series1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#2dc937"); series1.fill = am4core.color("#2dc937");
series1.stroke = am4core.color("#2dc937"); series1.stroke = am4core.color("#2dc937");
/*var bullet1 = series1.bullets.push(new am4charts.LabelBullet()); /*var bullet1 = series1.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()); var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80); series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio"; series2.name = "Medio";
series2.dataFields.categoryX = "category"; series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2"; series2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent"; //series2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5; series2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true; series2.stacked = true;
series2.tooltip.pointerOrientation = "vertical"; series2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#e7b416"); series2.fill = am4core.color("#e7b416");
series2.stroke = am4core.color("#e7b416"); series2.stroke = am4core.color("#e7b416");
/*var bullet2 = series2.bullets.push(new am4charts.LabelBullet()); /*var bullet2 = series2.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()); var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80); series3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto"; series3.name = "Alto";
series3.dataFields.categoryX = "category"; series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3"; series3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent"; //series3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5; series3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true; series3.stacked = true;
series3.tooltip.pointerOrientation = "vertical"; series3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#c41e3a"); series3.fill = am4core.color("#c41e3a");
series3.stroke = am4core.color("#c41e3a"); series3.stroke = am4core.color("#c41e3a");
/*var bullet3 = series3.bullets.push(new am4charts.LabelBullet()); /*var bullet3 = series3.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;*/
}); // end am4core.ready() }); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++ //++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY // FALTA CONSTRUIR QUERY
am4core.ready(function() { am4core.ready(function() {
// Themes begin // Themes begin
am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_animated);
// Themes end // Themes end
var chart = am4core.create("topLeftChart", am4charts.XYChart); var chart = am4core.create("topRightChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in chart.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 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.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.fontSize = 9;
title.fill = am4core.color(mainTextColor); title.fill = am4core.color(mainTextColor);
chart.data = [ chart.data = [
{ {
category: "2015", category: "2015",
value1: 21750.100923, value1: 21750.100923,
value2: 3124.799027, value2: 3124.799027,
value3: 1575.434647 value3: 1575.434647
}, },
{ {
category: "2016", category: "2016",
value1: 24659.53423, value1: 24659.53423,
value2: 3621.838793, value2: 3621.838793,
value3: 1939.124265 value3: 1939.124265
}, },
{ {
category: "2017", category: "2017",
value1: 27560.13116, value1: 27560.13116,
value2: 4177.560407, value2: 4177.560407,
value3: 2393.056475 value3: 2393.056475
}, },
{ {
category: "2018", category: "2018",
value1: 30374.679993, value1: 30374.679993,
value2: 4719.515675, value2: 4719.515675,
value3: 2854.437993 value3: 2854.437993
}, },
{ {
category: "2019", category: "2019",
value1: 32656.93783, value1: 32656.93783,
value2: 5188.035213, value2: 5188.035213,
value3: 3357.159708 value3: 3357.159708
}, },
{ {
category: "2020", category: "2020",
value1: 34305.410194, value1: 34305.410194,
value2: 5602.741586, value2: 5602.741586,
value3: 3789.051441 value3: 3789.051441
} }
]; ];
chart.legend = new am4charts.Legend(); chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10; chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor); chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category"; categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor); categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11; categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0; valueAxis.min = 0;
//valueAxis.max = 100; //valueAxis.max = 100;
valueAxis.strictMinMax = true; valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true; valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50; valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9; valueAxis.renderer.labels.template.fontSize = 9;
/* Create secondary value axis */ /* Create secondary value axis */
let percentAxis = chart.yAxes.push(new am4charts.ValueAxis()); let percentAxis = chart.yAxes.push(new am4charts.ValueAxis());
percentAxis.renderer.opposite = true; percentAxis.renderer.opposite = true;
percentAxis.calculateTotals = true; percentAxis.calculateTotals = true;
percentAxis.min = 50; percentAxis.min = 50;
percentAxis.max = 110; percentAxis.max = 110;
percentAxis.strictMinMax = true; percentAxis.strictMinMax = true;
percentAxis.renderer.grid.template.disabled = true; percentAxis.renderer.grid.template.disabled = true;
percentAxis.numberFormatter = new am4core.NumberFormatter(); percentAxis.numberFormatter = new am4core.NumberFormatter();
percentAxis.numberFormatter.numberFormat = "#'%'" percentAxis.numberFormatter.numberFormat = "#'%'"
percentAxis.cursorTooltipEnabled = false; percentAxis.cursorTooltipEnabled = false;
percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor); percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
percentAxis.renderer.labels.template.fontSize = 9; percentAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries()); var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80); series1.columns.template.width = am4core.percent(80);
series1.name = "Bajo"; series1.name = "Bajo";
series1.dataFields.categoryX = "category"; series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1"; series1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha"; series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5; series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true; series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical"; series1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#f8caa0"); series1.fill = am4core.color("#f8caa0");
series1.stroke = am4core.color("#f8caa0"); series1.stroke = am4core.color("#f8caa0");
/*var bullet1 = series1.bullets.push(new am4charts.LabelBullet()); /*var bullet1 = series1.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()); var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80); series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio"; series2.name = "Medio";
series2.dataFields.categoryX = "category"; series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2"; series2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent"; //series2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5; series2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true; series2.stacked = true;
series2.tooltip.pointerOrientation = "vertical"; series2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#cf8a4f"); series2.fill = am4core.color("#cf8a4f");
series2.stroke = am4core.color("#cf8a4f"); series2.stroke = am4core.color("#cf8a4f");
/*var bullet2 = series2.bullets.push(new am4charts.LabelBullet()); /*var bullet2 = series2.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()); var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80); series3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha"; series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto"; series3.name = "Alto";
series3.dataFields.categoryX = "category"; series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3"; series3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent"; //series3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5; series3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true; series3.stacked = true;
series3.tooltip.pointerOrientation = "vertical"; series3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#93592a"); series3.fill = am4core.color("#93592a");
series3.stroke = am4core.color("#93592a"); series3.stroke = am4core.color("#93592a");
/*var bullet3 = series3.bullets.push(new am4charts.LabelBullet()); /*var bullet3 = series3.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()); var lineSeries1 = chart.series.push(new am4charts.LineSeries());
lineSeries1.name = "% Bajo"; lineSeries1.name = "% Bajo";
lineSeries1.dataFields.valueY = "value1"; lineSeries1.dataFields.valueY = "value1";
lineSeries1.dataFields.categoryX = "category"; lineSeries1.dataFields.categoryX = "category";
lineSeries1.dataFields.valueYShow = "totalPercent"; lineSeries1.dataFields.valueYShow = "totalPercent";
lineSeries1.yAxis = percentAxis; lineSeries1.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5; //lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries1.stroke = am4core.color("#D197FA"); lineSeries1.stroke = am4core.color("#D197FA");
lineSeries1.strokeWidth = 3; lineSeries1.strokeWidth = 3;
lineSeries1.propertyFields.strokeDasharray = "lineDash"; lineSeries1.propertyFields.strokeDasharray = "lineDash";
lineSeries1.tooltip.label.textAlign = "middle"; lineSeries1.tooltip.label.textAlign = "middle";
lineSeries1.stacked =true; lineSeries1.stacked =true;
var bullet = lineSeries1.bullets.push(new am4charts.Bullet()); var bullet = lineSeries1.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#D197FA"); // tooltips grab fill from parent by default 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][/]" 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); var circle11 = bullet.createChild(am4core.Circle);
circle11.radius = 4; circle11.radius = 4;
circle11.fill = am4core.color("#fff"); circle11.fill = am4core.color("#fff");
circle11.strokeWidth = 3; circle11.strokeWidth = 3;
var lineSeries2 = chart.series.push(new am4charts.LineSeries()); var lineSeries2 = chart.series.push(new am4charts.LineSeries());
lineSeries2.name = "% Medio"; lineSeries2.name = "% Medio";
lineSeries2.dataFields.valueY = "value2"; lineSeries2.dataFields.valueY = "value2";
lineSeries2.dataFields.categoryX = "category"; lineSeries2.dataFields.categoryX = "category";
lineSeries2.dataFields.valueYShow = "totalPercent"; lineSeries2.dataFields.valueYShow = "totalPercent";
lineSeries2.yAxis = percentAxis; lineSeries2.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5; //lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries2.stroke = am4core.color("#844DDF"); lineSeries2.stroke = am4core.color("#844DDF");
lineSeries2.strokeWidth = 3; lineSeries2.strokeWidth = 3;
lineSeries2.propertyFields.strokeDasharray = "lineDash"; lineSeries2.propertyFields.strokeDasharray = "lineDash";
lineSeries2.tooltip.label.textAlign = "middle"; lineSeries2.tooltip.label.textAlign = "middle";
lineSeries2.stacked =true; lineSeries2.stacked =true;
var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet()); var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet());
bullet22.fill = am4core.color("#844DDF"); // tooltips grab fill from parent by default 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}[/]" 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); var circle22 = bullet22.createChild(am4core.Circle);
circle22.radius = 4; circle22.radius = 4;
circle22.fill = am4core.color("#fff"); circle22.fill = am4core.color("#fff");
circle22.strokeWidth = 3; circle22.strokeWidth = 3;
var lineSeries3 = chart.series.push(new am4charts.LineSeries()); var lineSeries3 = chart.series.push(new am4charts.LineSeries());
lineSeries3.name = "% Alto"; lineSeries3.name = "% Alto";
lineSeries3.dataFields.valueY = "value3"; lineSeries3.dataFields.valueY = "value3";
lineSeries3.dataFields.categoryX = "category"; lineSeries3.dataFields.categoryX = "category";
lineSeries3.dataFields.valueYShow = "totalPercent"; lineSeries3.dataFields.valueYShow = "totalPercent";
lineSeries3.yAxis = percentAxis; lineSeries3.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5; //lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries3.stroke = am4core.color("#351591"); lineSeries3.stroke = am4core.color("#351591");
lineSeries3.strokeWidth = 3; lineSeries3.strokeWidth = 3;
lineSeries3.propertyFields.strokeDasharray = "lineDash"; lineSeries3.propertyFields.strokeDasharray = "lineDash";
lineSeries3.tooltip.label.textAlign = "middle"; lineSeries3.tooltip.label.textAlign = "middle";
lineSeries3.stacked =true; lineSeries3.stacked =true;
var bullet33 = lineSeries3.bullets.push(new am4charts.Bullet()); var bullet33 = lineSeries3.bullets.push(new am4charts.Bullet());
bullet33.fill = am4core.color("#351591"); // tooltips grab fill from parent by default 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}[/]" 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); var circle33 = bullet33.createChild(am4core.Circle);
circle33.radius = 4; circle33.radius = 4;
circle33.fill = am4core.color("#fff"); circle33.fill = am4core.color("#fff");
circle33.strokeWidth = 3; circle33.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar(); //chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready() }); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++ //++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
am4core.ready(function() { am4core.ready(function() {
// Themes begin // Themes begin
am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_animated);
// Themes end // Themes end
var chart = am4core.create("bottomLeftChart", am4charts.XYChart); var chart = am4core.create("bottomLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in chart.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&id<13&sort=inc desc`; 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&id<13&sort=inc desc`;
d3.json(query).then(d => chart.data = d); d3.json(query).then(d => chart.data = d);
*/ */
let title = chart.titles.create(); let title = chart.titles.create();
title.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío"; title.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
title.fontSize = 9; title.fontSize = 9;
title.fill = am4core.color(mainTextColor); title.fill = am4core.color(mainTextColor);
chart.data = [ chart.data = [
{ {
category: "2015", category: "2015",
Tramo7: 3565.151797, Tramo7: 3565.151797,
Tramo8: 4402.997137, Tramo8: 4402.997137,
Tramo9: 2982.665968, Tramo9: 2982.665968,
Tramo10: 1571.134834, Tramo10: 1571.134834,
Tramo11: 3909.316004, Tramo11: 3909.316004,
Tramo12: 657.480063 Tramo12: 657.480063
}, },
{ {
category: "2016", category: "2016",
Tramo7: 3929.417937, Tramo7: 3929.417937,
Tramo8: 4779.702192, Tramo8: 4779.702192,
Tramo9: 3477.272593, Tramo9: 3477.272593,
Tramo10: 1880.688948, Tramo10: 1880.688948,
Tramo11: 4687.034719, Tramo11: 4687.034719,
Tramo12: 808.189062 Tramo12: 808.189062
}, },
{ {
category: "2017", category: "2017",
Tramo7: 4344.194901, Tramo7: 4344.194901,
Tramo8: 5290.03468, Tramo8: 5290.03468,
Tramo9: 4184.257241, Tramo9: 4184.257241,
Tramo10:2168.042568, Tramo10:2168.042568,
Tramo11:5354.295853, Tramo11:5354.295853,
Tramo12:946.076199 Tramo12:946.076199
}, },
{ {
category: "2018", category: "2018",
Tramo7: 4712.061739, Tramo7: 4712.061739,
Tramo8: 5798.574005, Tramo8: 5798.574005,
Tramo9: 4904.355871, Tramo9: 4904.355871,
Tramo10: 2463.225593, Tramo10: 2463.225593,
Tramo11: 6065.936419, Tramo11: 6065.936419,
Tramo12: 1077.998678 Tramo12: 1077.998678
}, },
{ {
category: "2019", category: "2019",
Tramo7: 5004.426599, Tramo7: 5004.426599,
Tramo8: 6112.824022, Tramo8: 6112.824022,
Tramo9: 5397.632509, Tramo9: 5397.632509,
Tramo10: 2775.836758, Tramo10: 2775.836758,
Tramo11: 6783.400364, Tramo11: 6783.400364,
Tramo12: 1238.459944 Tramo12: 1238.459944
}, },
{ {
category: "2020", category: "2020",
Tramo7: 5364.43353, Tramo7: 5364.43353,
Tramo8: 6427.625949, Tramo8: 6427.625949,
Tramo9: 5722.221469, Tramo9: 5722.221469,
Tramo10: 2972.499167, Tramo10: 2972.499167,
Tramo11: 7299.502497, Tramo11: 7299.502497,
Tramo12: 1338.796796 Tramo12: 1338.796796
} }
]; ];
chart.legend = new am4charts.Legend(); chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10; chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor); chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category"; categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor); categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11; categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0; valueAxis.min = 0;
//valueAxis.max = 100; //valueAxis.max = 100;
valueAxis.strictMinMax = true; valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true; valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50; valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9; valueAxis.renderer.labels.template.fontSize = 9;
var lineSeries1 = chart.series.push(new am4charts.LineSeries()); var lineSeries1 = chart.series.push(new am4charts.LineSeries());
lineSeries1.name = "T7";//"San Juan del río - Querétaro"; lineSeries1.name = "T7";//"San Juan del río - Querétaro";
lineSeries1.dataFields.valueY = "Tramo7"; lineSeries1.dataFields.valueY = "Tramo7";
lineSeries1.dataFields.categoryX = "category"; lineSeries1.dataFields.categoryX = "category";
lineSeries1.yAxis = valueAxis; lineSeries1.yAxis = valueAxis;
lineSeries1.stroke = am4core.color("#fddfb9"); lineSeries1.stroke = am4core.color("#fddfb9");
lineSeries1.strokeWidth = 3; lineSeries1.strokeWidth = 3;
lineSeries1.propertyFields.strokeDasharray = "lineDash"; lineSeries1.propertyFields.strokeDasharray = "lineDash";
lineSeries1.tooltip.label.textAlign = "middle"; lineSeries1.tooltip.label.textAlign = "middle";
var bullet = lineSeries1.bullets.push(new am4charts.Bullet()); var bullet = lineSeries1.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#fddfb9"); // tooltips grab fill from parent by default 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][/]" 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); var circle11 = bullet.createChild(am4core.Circle);
circle11.radius = 4; circle11.radius = 4;
circle11.fill = am4core.color("#fff"); circle11.fill = am4core.color("#fff");
circle11.strokeWidth = 3; circle11.strokeWidth = 3;
var lineSeries2 = chart.series.push(new am4charts.LineSeries()); var lineSeries2 = chart.series.push(new am4charts.LineSeries());
lineSeries2.name = "T8";//"Querétaro - Celaya"; lineSeries2.name = "T8";//"Querétaro - Celaya";
lineSeries2.dataFields.valueY = "Tramo8"; lineSeries2.dataFields.valueY = "Tramo8";
lineSeries2.dataFields.categoryX = "category"; lineSeries2.dataFields.categoryX = "category";
lineSeries2.yAxis = valueAxis; lineSeries2.yAxis = valueAxis;
lineSeries2.stroke = am4core.color("#fb9a99"); lineSeries2.stroke = am4core.color("#fb9a99");
lineSeries2.strokeWidth = 3; lineSeries2.strokeWidth = 3;
lineSeries2.propertyFields.strokeDasharray = "lineDash"; lineSeries2.propertyFields.strokeDasharray = "lineDash";
lineSeries2.tooltip.label.textAlign = "middle"; lineSeries2.tooltip.label.textAlign = "middle";
var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet()); var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet());
bullet22.fill = am4core.color("#fb9a99"); // tooltips grab fill from parent by default 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}[/]" 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); var circle22 = bullet22.createChild(am4core.Circle);
circle22.radius = 4; circle22.radius = 4;
circle22.fill = am4core.color("#fff"); circle22.fill = am4core.color("#fff");
circle22.strokeWidth = 3; circle22.strokeWidth = 3;
var lineSeries3 = chart.series.push(new am4charts.LineSeries()); var lineSeries3 = chart.series.push(new am4charts.LineSeries());
lineSeries3.name = "T9";//"Celaya - Salamanca"; lineSeries3.name = "T9";//"Celaya - Salamanca";
lineSeries3.dataFields.valueY = "Tramo9"; lineSeries3.dataFields.valueY = "Tramo9";
lineSeries3.dataFields.categoryX = "category"; lineSeries3.dataFields.categoryX = "category";
lineSeries3.yAxis = valueAxis; lineSeries3.yAxis = valueAxis;
lineSeries3.stroke = am4core.color("#33a09b"); lineSeries3.stroke = am4core.color("#33a09b");
lineSeries3.strokeWidth = 3; lineSeries3.strokeWidth = 3;
lineSeries3.propertyFields.strokeDasharray = "lineDash"; lineSeries3.propertyFields.strokeDasharray = "lineDash";
lineSeries3.tooltip.label.textAlign = "middle"; lineSeries3.tooltip.label.textAlign = "middle";
var bullet3 = lineSeries3.bullets.push(new am4charts.Bullet()); var bullet3 = lineSeries3.bullets.push(new am4charts.Bullet());
bullet3.fill = am4core.color("#33a09b"); // tooltips grab fill from parent by default 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}[/]" 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); var circle3 = bullet3.createChild(am4core.Circle);
circle3.radius = 4; circle3.radius = 4;
circle3.fill = am4core.color("#fff"); circle3.fill = am4core.color("#fff");
circle3.strokeWidth = 3; circle3.strokeWidth = 3;
var lineSeries4 = chart.series.push(new am4charts.LineSeries()); var lineSeries4 = chart.series.push(new am4charts.LineSeries());
lineSeries4.name = "T10";//"Salamanca - Irapuato"; lineSeries4.name = "T10";//"Salamanca - Irapuato";
lineSeries4.dataFields.valueY = "Tramo10"; lineSeries4.dataFields.valueY = "Tramo10";
lineSeries4.dataFields.categoryX = "category"; lineSeries4.dataFields.categoryX = "category";
lineSeries4.yAxis = valueAxis; lineSeries4.yAxis = valueAxis;
lineSeries4.stroke = am4core.color("#de6eb4"); lineSeries4.stroke = am4core.color("#de6eb4");
lineSeries4.strokeWidth = 3; lineSeries4.strokeWidth = 3;
lineSeries4.propertyFields.strokeDasharray = "lineDash"; lineSeries4.propertyFields.strokeDasharray = "lineDash";
lineSeries4.tooltip.label.textAlign = "middle"; lineSeries4.tooltip.label.textAlign = "middle";
var bullet4 = lineSeries4.bullets.push(new am4charts.Bullet()); var bullet4 = lineSeries4.bullets.push(new am4charts.Bullet());
bullet4.fill = am4core.color("#de6eb4"); // tooltips grab fill from parent by default 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}[/]" 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); var circle4 = bullet4.createChild(am4core.Circle);
circle4.radius = 4; circle4.radius = 4;
circle4.fill = am4core.color("#fff"); circle4.fill = am4core.color("#fff");
circle4.strokeWidth = 3; circle4.strokeWidth = 3;
var lineSeries5 = chart.series.push(new am4charts.LineSeries()); var lineSeries5 = chart.series.push(new am4charts.LineSeries());
lineSeries5.name = "T11";//"Irapuato - León"; lineSeries5.name = "T11";//"Irapuato - León";
lineSeries5.dataFields.valueY = "Tramo11"; lineSeries5.dataFields.valueY = "Tramo11";
lineSeries5.dataFields.categoryX = "category"; lineSeries5.dataFields.categoryX = "category";
lineSeries5.yAxis = valueAxis; lineSeries5.yAxis = valueAxis;
lineSeries5.stroke = am4core.color("#4db0ec"); lineSeries5.stroke = am4core.color("#4db0ec");
lineSeries5.strokeWidth = 3; lineSeries5.strokeWidth = 3;
lineSeries5.propertyFields.strokeDasharray = "lineDash"; lineSeries5.propertyFields.strokeDasharray = "lineDash";
lineSeries5.tooltip.label.textAlign = "middle"; lineSeries5.tooltip.label.textAlign = "middle";
var bullet5 = lineSeries5.bullets.push(new am4charts.Bullet()); var bullet5 = lineSeries5.bullets.push(new am4charts.Bullet());
bullet5.fill = am4core.color("#4db0ec"); // tooltips grab fill from parent by default 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}[/]" 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); var circle5 = bullet5.createChild(am4core.Circle);
circle5.radius = 4; circle5.radius = 4;
circle5.fill = am4core.color("#fff"); circle5.fill = am4core.color("#fff");
circle5.strokeWidth = 3; circle5.strokeWidth = 3;
var lineSeries6 = chart.series.push(new am4charts.LineSeries()); var lineSeries6 = chart.series.push(new am4charts.LineSeries());
lineSeries6.name = "T12"; //"León - San Francisco del rincón"; lineSeries6.name = "T12"; //"León - San Francisco del rincón";
lineSeries6.dataFields.valueY = "Tramo12"; lineSeries6.dataFields.valueY = "Tramo12";
lineSeries6.dataFields.categoryX = "category"; lineSeries6.dataFields.categoryX = "category";
lineSeries6.yAxis = valueAxis; lineSeries6.yAxis = valueAxis;
lineSeries6.stroke = am4core.color("#2be829"); lineSeries6.stroke = am4core.color("#2be829");
lineSeries6.strokeWidth = 3; lineSeries6.strokeWidth = 3;
lineSeries6.propertyFields.strokeDasharray = "lineDash"; lineSeries6.propertyFields.strokeDasharray = "lineDash";
lineSeries6.tooltip.label.textAlign = "middle"; lineSeries6.tooltip.label.textAlign = "middle";
var bullet6 = lineSeries6.bullets.push(new am4charts.Bullet()); var bullet6 = lineSeries6.bullets.push(new am4charts.Bullet());
bullet6.fill = am4core.color("#2be829"); // tooltips grab fill from parent by default 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}[/]" 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); var circle6 = bullet6.createChild(am4core.Circle);
circle6.radius = 4; circle6.radius = 4;
circle6.fill = am4core.color("#fff"); circle6.fill = am4core.color("#fff");
circle6.strokeWidth = 3; circle6.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar(); //chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready() }); // end am4core.ready()
public/js/evolucion_urbana.js
View file @ 0353d3e5
...@@ -352,6 +352,7 @@ L.timeDimension.layer.Tile = (layer, options) => { ...@@ -352,6 +352,7 @@ L.timeDimension.layer.Tile = (layer, options) => {
$("#startHeader").remove(); $("#startHeader").remove();
$(".picker").remove(); $(".picker").remove();
$("#initial-backdrop").remove(); $("#initial-backdrop").remove();
$("#topRightChart")[0].style.setProperty("display", "none");
$("#mainContainer")[0].style.setProperty("display", "flex", "important"); $("#mainContainer")[0].style.setProperty("display", "flex", "important");
$("#mexmap").show(); $("#mexmap").show();
......
public/js/evolucion_urbana_charts.js
View file @ 0353d3e5
...@@ -13,7 +13,7 @@ am4core.ready(function() { ...@@ -13,7 +13,7 @@ am4core.ready(function() {
let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color"); let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
// bar and line chart // bar and line chart
let chart = am4core.create("topChart", am4charts.XYChart); let chart = am4core.create("topLeftChart", am4charts.XYChart);
let ctitle = chart.titles.create(); let ctitle = chart.titles.create();
ctitle.text = "Área urbanizada trimestralmente"; ctitle.text = "Área urbanizada trimestralmente";
......
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