Skip to content

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

Update bar chart values and tooltip

parent bfb44c73
Show whitespace changes
Inline Side-by-side
Showing with 93 additions and 90 deletions
public/js/centropais_periurbano_charts.js
View file @ f451e38f
......@@ -17,7 +17,9 @@ const makeStackedBarSeries = (chart, name, category, value, color, units="Ha") =
series.units = units;
series.dataFields.categoryX = category;
series.dataFields.valueY = value;
series.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} {units}";
// format tooltip depending on units
units == "Ha" ? series.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} {units}" :
series.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###')} {units}";
series.dataItems.template.locations.categoryX = 0.5;
series.stacked = true;
series.tooltip.pointerOrientation = "vertical";
......@@ -35,7 +37,7 @@ const makeLineSeries = (chart, name, value, percent, category, yAxis, color) =>
series.stacked = true;
series.calculatePercent = true;
}
// FIXME: using totalPercent chanhges values when turning series on or off
// FIXME: using totalPercent changes values when turning series on or off
series.yAxis = yAxis;
series.stroke = am4core.color(color);
series.strokeWidth = 3;
......@@ -44,14 +46,14 @@ const makeLineSeries = (chart, name, value, percent, category, yAxis, color) =>
let bullet = series.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color(color); // tooltips grab fill from parent by default
if(percent) {
if (percent) {
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
} else{
} else {
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.formatNumber('#.00')} millares de Ha[/] [#fff][/]";
}
//bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
// FIXME: using totalPercent chanhges values when turning series on or off`
// FIXME: using totalPercent changes values when turning series on or off`
let circle = bullet.createChild(am4core.Circle);
circle.radius = 4;
......@@ -80,7 +82,7 @@ am4core.ready(function() {
d3.json(query).then(d => chart.data = d);
*/
let stackedBarTitle = stackedBarChart.titles.create();
stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (millares de pixeles)";
stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (pixeles)";
stackedBarTitle.fontSize = 15;
stackedBarTitle.marginBottom = 10;
stackedBarTitle.fill = am4core.color(mainTextColor);
......@@ -88,39 +90,39 @@ am4core.ready(function() {
stackedBarChart.data = [
{
category: "2015",
value1: 954,
value2: 145,
value3: 76
bajo: 958343,
medio: 145076,
alto: 76317
},
{
category: "2016",
value1: 1084,
value2: 167,
value3: 94
bajo: 1090132,
medio: 167451,
alto: 94094
},
{
category: "2017",
value1: 1195,
value2: 191,
value3: 115
bajo: 1202563,
medio: 191489,
alto: 114686
},
{
category: "2018",
value1: 1304,
value2: 216,
value3: 140
bajo: 1309015,
medio: 214078,
alto: 135958
},
{
category: "2019",
value1: 1373,
value2: 230,
value3: 156
bajo: 1382721,
medio: 230523,
alto: 156668
},
{
category: "2020",
value1: 1418,
value2: 242,
value3: 170
bajo: 1433701,
medio: 245636,
alto: 174002
}
];
stackedBarChart.legend = new am4charts.Legend();
......@@ -142,9 +144,9 @@ am4core.ready(function() {
stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarValueAxis.renderer.labels.template.fontSize = 15;
makeStackedBarSeries(stackedBarChart, "Bajo", "category", "value1", "#61ac65", "Millares de pixeles");
makeStackedBarSeries(stackedBarChart, "Medio", "category", "value2", "#fcfccc", "Millares de pixeles");
makeStackedBarSeries(stackedBarChart, "Alto", "category", "value3", "#b33d6e", "Millares de pixeles");
makeStackedBarSeries(stackedBarChart, "Bajo", "category", "bajo", "#61ac65", "pixeles");
makeStackedBarSeries(stackedBarChart, "Medio", "category", "medio", "#fcfccc", "pixeles");
makeStackedBarSeries(stackedBarChart, "Alto", "category", "alto", "#b33d6e", "pixeles");
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY
......@@ -166,39 +168,39 @@ am4core.ready(function() {
stackedBarLineChart.data = [
{
category: "2015",
value1: 21750.100923,
value2: 3124.799027,
value3: 1575.434647
bajo: 21750.100923,
medio: 3124.799027,
alto: 1575.434647
},
{
category: "2016",
value1: 24659.53423,
value2: 3621.838793,
value3: 1939.124265
bajo: 24659.53423,
medio: 3621.838793,
alto: 1939.124265
},
{
category: "2017",
value1: 27560.13116,
value2: 4177.560407,
value3: 2393.056475
bajo: 27560.13116,
medio: 4177.560407,
alto: 2393.056475
},
{
category: "2018",
value1: 30374.679993,
value2: 4719.515675,
value3: 2854.437993
bajo: 30374.679993,
medio: 4719.515675,
alto: 2854.437993
},
{
category: "2019",
value1: 32656.93783,
value2: 5188.035213,
value3: 3357.159708
bajo: 32656.93783,
medio: 5188.035213,
alto: 3357.159708
},
{
category: "2020",
value1: 34305.410194,
value2: 5602.741586,
value3: 3789.051441
bajo: 34305.410194,
medio: 5602.741586,
alto: 3789.051441
}
];
......@@ -235,13 +237,13 @@ am4core.ready(function() {
stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLinePercentAxis.renderer.labels.template.fontSize = 15;
makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "value1", "#f8caa0");
makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "value2", "#cf8a4f");
makeStackedBarSeries(stackedBarLineChart, "Alto", "category", "value3", "#93592a");
makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "bajo", "#f8caa0");
makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "medio", "#cf8a4f");
makeStackedBarSeries(stackedBarLineChart, "Alto", "category", "alto", "#93592a");
makeLineSeries(stackedBarLineChart, "% Bajo", "value1", true, "category", stackedBarLinePercentAxis, "#D197FA");
makeLineSeries(stackedBarLineChart, "% Medio", "value2", true, "category", stackedBarLinePercentAxis, "#844DDF");
makeLineSeries(stackedBarLineChart, "% Alto", "value3", true, "category", stackedBarLinePercentAxis, "#351591");
makeLineSeries(stackedBarLineChart, "% Bajo", "bajo", true, "category", stackedBarLinePercentAxis, "#D197FA");
makeLineSeries(stackedBarLineChart, "% Medio", "medio", true, "category", stackedBarLinePercentAxis, "#844DDF");
makeLineSeries(stackedBarLineChart, "% Alto", "alto", true, "category", stackedBarLinePercentAxis, "#351591");
// Use this to avoid turning on or off legend items.
// Remove if use of percentTotal is fixed in series
......@@ -369,13 +371,14 @@ am4core.ready(function() {
barPercentChartTitle.fill = am4core.color(mainTextColor);
let table = "periurbanoBajio";
// query substr of region labels so they do not include "Tramo"
let query = `${baseUrl}/query/${table}?columns=substring(region,7) as 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";
// FIXME: axis labels are too big
// set wrap labels and set max length
let label = barPercentCategoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 80;
......@@ -514,7 +517,7 @@ am4core.ready(function() {
bullet2.fontSize = 9;
bullet2.interactionsEnabled = false;*/
/*
/*
// define colors
var colors = {
//"critical": "#ca0101",
......
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