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
Hide 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) {
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
} else{
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.formatNumber('#.00')} millares de Ha[/] [#fff][/]";
if (percent) {
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
} 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;
......@@ -448,30 +451,30 @@ am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("topLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.maskBullets = false;
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = "x";
yAxis.dataFields.category = "y";
xAxis.renderer.grid.template.disabled = true;
xAxis.renderer.minGridDistance = 40;
xAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
xAxis.renderer.labels.template.fontSize = 10;
yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.inversed = true;
yAxis.renderer.minGridDistance = 30;
yAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
yAxis.renderer.labels.template.fontSize = 10;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "x";
series.dataFields.categoryY = "y";
......@@ -480,7 +483,7 @@ am4core.ready(function() {
series.defaultState.transitionDuration = 3000;
series.fill = am4core.color("#000");
series.fillOpacity =0;
// Set up column appearance
var column = series.columns.template;
column.strokeWidth = 2;
......@@ -492,7 +495,7 @@ am4core.ready(function() {
column.height = am4core.percent(100);
column.column.cornerRadius(6, 6, 6, 6);
column.propertyFields.fill = am4core.color("#000000")//"color";
// Set up bullet appearance
var bullet1 = series.bullets.push(new am4charts.CircleBullet());
bullet1.tooltipText = "{region}: {value.workingValue.formatNumber('#.')} Ha";
......@@ -513,8 +516,8 @@ am4core.ready(function() {
bullet2.zIndex = 1;
bullet2.fontSize = 9;
bullet2.interactionsEnabled = false;*/
/*
/*
// define colors
var colors = {
//"critical": "#ca0101",
......@@ -523,7 +526,7 @@ am4core.ready(function() {
"rvd": "#5dbe24"
//"verygood": "#0b7d03"
};
chart.data = [
{
......@@ -532,7 +535,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 2173.95
},
},
{
"x": "Medio",
"y": "2015",
......@@ -545,7 +548,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 494.67
},
},
{
"x": "Bajo",
"y": "2015",
......@@ -564,7 +567,7 @@ am4core.ready(function() {
"region": "San Luis Potosí",
"color": colors.slp,
"value": 173.51
},
},
{
"x": "Bajo",
"y": "2015",
......@@ -597,7 +600,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 2443.30
},
},
{
"x": "Medio",
"y": "2016",
......@@ -610,7 +613,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 626.42
},
},
{
"x": "Medio",
"y": "2016",
......@@ -623,7 +626,7 @@ am4core.ready(function() {
"region": "San Luis Potosí",
"color": colors.slp,
"value": 233.55
},
},
{
"x": "Bajo",
"y": "2016",
......@@ -656,7 +659,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 2694.58
},
},
{
"x": "Medio",
"y": "2017",
......@@ -669,7 +672,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 748.70
},
},
{
"x": "Medio",
"y": "2017",
......@@ -682,7 +685,7 @@ am4core.ready(function() {
"region": "San Luis Potosí",
"color": colors.slp,
"value": 326.59
},
},
{
"x": "Bajo",
"y": "2017",
......@@ -715,7 +718,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 2997.31
},
},
{
"x": "Medio",
"y": "2018",
......@@ -728,7 +731,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 888.27
},
},
{
"x": "Medio",
"y": "2018",
......@@ -741,7 +744,7 @@ am4core.ready(function() {
"region": "San Luis Potosí",
"color": colors.slp,
"value": 427.07
},
},
{
"x": "Bajo",
"y": "2018",
......@@ -774,7 +777,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 3179.72
},
},
{
"x": "Medio",
"y": "2019",
......@@ -787,7 +790,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 1035.34
},
},
{
"x": "Medio",
"y": "2019",
......@@ -800,7 +803,7 @@ am4core.ready(function() {
"region": "San Luis Potosí",
"color": colors.slp,
"value": 504.66
},
},
{
"x": "Bajo",
"y": "2019",
......@@ -833,7 +836,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 3441.99
},
},
{
"x": "Medio",
"y": "2020",
......@@ -846,7 +849,7 @@ am4core.ready(function() {
"region": "Aguascalientes",
"color": colors.ags,
"value": 1143.06
},
},
{
"x": "Medio",
"y": "2020",
......@@ -859,7 +862,7 @@ am4core.ready(function() {
"region": "San Luis Potosí",
"color": colors.slp,
"value": 574.99
},
},
{
"x": "Bajo",
"y": "2020",
......@@ -881,19 +884,19 @@ am4core.ready(function() {
}
];
var baseWidth = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
var maxRadius = baseWidth / Math.sqrt(chart.data.length)/1 - 0; // 2 is jast a margin
series.heatRules.push({ min: 2, max: maxRadius, property: "radius", target: bullet1.circle });
chart.plotContainer.events.on("maxsizechanged", function() {
var side = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
bullet1.circle.clones.each(function(clone) {
clone.scale = side / baseWidth;
})
})
let legend = new am4charts.Legend();
legend.parent = chart.chartContainer;
legend.labels.template.fill = am4core.color(mainTextColor);
......
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