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