Skip to content

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

Fix font sizes, title margins and tooltip text formats

parent 0d096323
Show whitespace changes
Inline Side-by-side
Showing with 23 additions and 19 deletions
public/js/centropais_periurbano_charts.js
View file @ 583e2518
......@@ -74,7 +74,8 @@ am4core.ready(function() {
*/
let stackedBarTitle = stackedBarChart.titles.create();
stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
stackedBarTitle.fontSize = 9;
stackedBarTitle.fontSize = 15;
stackedBarTitle.marginBottom = 10;
stackedBarTitle.fill = am4core.color(mainTextColor);
stackedBarChart.data = [
......@@ -116,14 +117,14 @@ am4core.ready(function() {
}
];
stackedBarChart.legend = new am4charts.Legend();
stackedBarChart.legend.fontSize = 10;
stackedBarChart.legend.fontSize = 15;
stackedBarChart.legend.labels.template.fill = am4core.color(mainTextColor);
let stackedBarCategoryAxis = stackedBarChart.xAxes.push(new am4charts.CategoryAxis());
stackedBarCategoryAxis.dataFields.category = "category";
stackedBarCategoryAxis.renderer.grid.template.location = 0;
stackedBarCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarCategoryAxis.renderer.labels.template.fontSize = 11;
stackedBarCategoryAxis.renderer.labels.template.fontSize = 15;
let stackedBarValueAxis = stackedBarChart.yAxes.push(new am4charts.ValueAxis());
stackedBarValueAxis.min = 0;
......@@ -132,7 +133,7 @@ am4core.ready(function() {
stackedBarValueAxis.calculateTotals = true;
stackedBarValueAxis.renderer.minWidth = 50;
stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarValueAxis.renderer.labels.template.fontSize = 9;
stackedBarValueAxis.renderer.labels.template.fontSize = 15;
makeStackedBarSeries(stackedBarChart, "Bajo", "category", "value1", "#61ac65");
makeStackedBarSeries(stackedBarChart, "Medio", "category", "value2", "#fcfccc");
......@@ -151,7 +152,8 @@ am4core.ready(function() {
*/
let stackedBarLineTitle = stackedBarLineChart.titles.create();
stackedBarLineTitle.text = "Evolución del grado de urbanización en el periurbano del \n Corredor del Bajío en extensión y proporción";
stackedBarLineTitle.fontSize = 9;
stackedBarLineTitle.fontSize = 15;
stackedBarLineTitle.marginBottom = 10;
stackedBarLineTitle.fill = am4core.color(mainTextColor);
stackedBarLineChart.data = [
......@@ -194,14 +196,14 @@ am4core.ready(function() {
];
stackedBarLineChart.legend = new am4charts.Legend();
stackedBarLineChart.legend.fontSize = 10;
stackedBarLineChart.legend.fontSize = 15;
stackedBarLineChart.legend.labels.template.fill = am4core.color(mainTextColor);
let stackedBarLineCategoryAxis = stackedBarLineChart.xAxes.push(new am4charts.CategoryAxis());
stackedBarLineCategoryAxis.dataFields.category = "category";
stackedBarLineCategoryAxis.renderer.grid.template.location = 0;
stackedBarLineCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLineCategoryAxis.renderer.labels.template.fontSize = 11;
stackedBarLineCategoryAxis.renderer.labels.template.fontSize = 15;
let stackedBarLineValueAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
stackedBarLineValueAxis.min = 0;
......@@ -210,7 +212,7 @@ am4core.ready(function() {
stackedBarLineValueAxis.calculateTotals = true;
stackedBarLineValueAxis.renderer.minWidth = 50;
stackedBarLineValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLineValueAxis.renderer.labels.template.fontSize = 9;
stackedBarLineValueAxis.renderer.labels.template.fontSize = 15;
/* Create secondary value axis */
let stackedBarLinePercentAxis = stackedBarLineChart.yAxes.push(new am4charts.ValueAxis());
......@@ -224,7 +226,7 @@ am4core.ready(function() {
stackedBarLinePercentAxis.numberFormatter.numberFormat = "#'%'";
stackedBarLinePercentAxis.cursorTooltipEnabled = false;
stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLinePercentAxis.renderer.labels.template.fontSize = 9;
stackedBarLinePercentAxis.renderer.labels.template.fontSize = 15;
makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "value1", "#f8caa0");
makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "value2", "#cf8a4f");
......@@ -254,7 +256,8 @@ am4core.ready(function() {
let lineTitle = lineChart.titles.create();
lineTitle.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
lineTitle.fontSize = 9;
lineTitle.fontSize = 14;
lineTitle.marginBottom = 15;
lineTitle.fill = am4core.color(mainTextColor);
lineChart.data = [
......@@ -316,14 +319,14 @@ am4core.ready(function() {
];
lineChart.legend = new am4charts.Legend();
lineChart.legend.fontSize = 10;
lineChart.legend.fontSize = 15;
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;
lineChartCategoryAxis.renderer.labels.template.fontSize = 15;
let lineChartValueAxis = lineChart.yAxes.push(new am4charts.ValueAxis());
lineChartValueAxis.min = 0;
......@@ -332,7 +335,7 @@ am4core.ready(function() {
lineChartValueAxis.calculateTotals = true;
lineChartValueAxis.renderer.minWidth = 50;
lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
lineChartValueAxis.renderer.labels.template.fontSize = 9;
lineChartValueAxis.renderer.labels.template.fontSize = 15;
makeLineSeries(lineChart, "T7", "Tramo7", false, "category", lineChartValueAxis, "#fddfb9");
makeLineSeries(lineChart, "T8", "Tramo8", false, "category", lineChartValueAxis, "#fb9a99");
......@@ -354,7 +357,8 @@ am4core.ready(function() {
let barPercentChartTitle = barPercentChart.titles.create();
barPercentChartTitle.text = "Cobertura del medio construido en los tramos del Corredor del Bajío";
barPercentChartTitle.fontSize = 9;
barPercentChartTitle.fontSize = 14;
barPercentChartTitle.marginBottom = 15;
barPercentChartTitle.fill = am4core.color(mainTextColor);
let table = "periurbanoBajio";
......@@ -367,12 +371,12 @@ am4core.ready(function() {
// FIXME: axis labels are too big
barPercentCategoryAxis.renderer.minGridDistance = 30;
barPercentCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barPercentCategoryAxis.renderer.labels.template.fontSize = 9;
barPercentCategoryAxis.renderer.labels.template.fontSize = 15;
/* 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;
barPercentValueAxis.renderer.labels.template.fontSize = 15;
/* Create secondary value axis */
let barPercentAxis = barPercentChart.yAxes.push(new am4charts.ValueAxis());
......@@ -385,7 +389,7 @@ am4core.ready(function() {
barPercentAxis.numberFormatter.numberFormat = "#'%'";
barPercentAxis.cursorTooltipEnabled = false;
barPercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barPercentAxis.renderer.labels.template.fontSize = 9;
barPercentAxis.renderer.labels.template.fontSize = 15;
/* Create series */
let barPercentColumnSeries = barPercentChart.series.push(new am4charts.ColumnSeries());
......@@ -393,7 +397,7 @@ am4core.ready(function() {
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.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY.formatNumber('#.00')} Ha[/] [#fff]{additional}[/]";
barPercentColumnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
barPercentColumnSeries.columns.template.propertyFields.stroke = "stroke";
barPercentColumnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
......@@ -415,7 +419,7 @@ am4core.ready(function() {
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}[/]";
barPercentBullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY.formatNumber('#.00')} %[/] [#fff]{additional}[/]";
let barPercentCircle = barPercentBullet.createChild(am4core.Circle);
barPercentCircle.radius = 4;
......
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