Skip to content

F
fordecyt_2019
Commit bdfdaf81 authored by Tania Gómez's avatar Tania Gómez
Browse files
Options

Tramos line chart scale modifications

parent 3cc61f33
Hide whitespace changes
Inline Side-by-side
Showing with 529 additions and 45 deletions
public/js/centropais_periurbano_charts.js
View file @ bdfdaf81
...@@ -44,7 +44,13 @@ const makeLineSeries = (chart, name, value, percent, category, yAxis, color) => ...@@ -44,7 +44,13 @@ 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
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#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 chanhges values when turning series on or off`
let circle = bullet.createChild(am4core.Circle); let circle = bullet.createChild(am4core.Circle);
...@@ -264,57 +270,57 @@ am4core.ready(function() { ...@@ -264,57 +270,57 @@ am4core.ready(function() {
lineChart.data = [ lineChart.data = [
{ {
category: "2015", category: "2015",
Tramo7: 35.65151797, Tramo7: 3.565151797,
Tramo8: 44.02997137, Tramo8: 4.402997137,
Tramo9: 29.82665968, Tramo9: 2.982665968,
Tramo10: 15.71134834, Tramo10: 1.571134834,
Tramo11: 39.09316004, Tramo11: 3.909316004,
Tramo12: 6.57480063 Tramo12: 0.657480063
}, },
{ {
category: "2016", category: "2016",
Tramo7: 39.29417937, Tramo7: 3.929417937,
Tramo8: 47.79702192, Tramo8: 4.779702192,
Tramo9: 34.77272593, Tramo9: 3.477272593,
Tramo10: 18.80688948, Tramo10: 1.880688948,
Tramo11: 46.87034719, Tramo11: 4.687034719,
Tramo12: 8.08189062 Tramo12: 0.808189062
}, },
{ {
category: "2017", category: "2017",
Tramo7: 43.44194901, Tramo7: 4.344194901,
Tramo8: 52.9003468, Tramo8: 5.29003468,
Tramo9: 41.84257241, Tramo9: 4.184257241,
Tramo10:21.68042568, Tramo10: 2.168042568,
Tramo11:53.54295853, Tramo11: 5.354295853,
Tramo12:9.46076199 Tramo12: 0.946076199
}, },
{ {
category: "2018", category: "2018",
Tramo7: 47.12061739, Tramo7: 4.712061739,
Tramo8: 57.98574005, Tramo8: 5.798574005,
Tramo9: 49.04355871, Tramo9: 4.904355871,
Tramo10: 24.63225593, Tramo10: 2.463225593,
Tramo11: 60.65936419, Tramo11: 6.065936419,
Tramo12: 10.77998678 Tramo12: 1.077998678
}, },
{ {
category: "2019", category: "2019",
Tramo7: 50.04426599, Tramo7: 5.004426599,
Tramo8: 61.12824022, Tramo8: 6.112824022,
Tramo9: 53.97632509, Tramo9: 5.397632509,
Tramo10: 27.75836758, Tramo10: 2.775836758,
Tramo11: 67.83400364, Tramo11: 6.783400364,
Tramo12: 12.38459944 Tramo12: 1.238459944
}, },
{ {
category: "2020", category: "2020",
Tramo7: 53.6443353, Tramo7: 5.36443353,
Tramo8: 64.27625949, Tramo8: 6.427625949,
Tramo9: 57.22221469, Tramo9: 5.722221469,
Tramo10: 29.72499167, Tramo10: 2.972499167,
Tramo11: 72.99502497, Tramo11: 7.299502497,
Tramo12: 13.38796796 Tramo12: 1.338796796
} }
]; ];
...@@ -338,12 +344,12 @@ am4core.ready(function() { ...@@ -338,12 +344,12 @@ am4core.ready(function() {
lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
lineChartValueAxis.renderer.labels.template.fontSize = 15; lineChartValueAxis.renderer.labels.template.fontSize = 15;
makeLineSeries(lineChart, "T7", "Tramo7", false, "category", lineChartValueAxis, "#fddfb9"); makeLineSeries(lineChart, "T7", "Tramo7", false, "category", lineChartValueAxis, "#fddfb9");
makeLineSeries(lineChart, "T8", "Tramo8", false, "category", lineChartValueAxis, "#fb9a99"); makeLineSeries(lineChart, "T8", "Tramo8", false, "category", lineChartValueAxis, "#fb9a99");
makeLineSeries(lineChart, "T9", "Tramo9", false, "category", lineChartValueAxis, "#33a09b"); makeLineSeries(lineChart, "T9", "Tramo9", false, "category", lineChartValueAxis, "#33a09b");
makeLineSeries(lineChart, "T10", "Tramo10", false, "category", lineChartValueAxis, "#de6eb4"); makeLineSeries(lineChart, "T10", "Tramo10",false, "category", lineChartValueAxis, "#de6eb4");
makeLineSeries(lineChart, "T11", "Tramo11", false, "category", lineChartValueAxis, "#4db0ec"); makeLineSeries(lineChart, "T11", "Tramo11",false, "category", lineChartValueAxis, "#4db0ec");
makeLineSeries(lineChart, "T12", "Tramo12", false, "category", lineChartValueAxis, "#2be829"); makeLineSeries(lineChart, "T12", "Tramo12",false, "category", lineChartValueAxis, "#2be829");
// 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
...@@ -404,7 +410,7 @@ am4core.ready(function() { ...@@ -404,7 +410,7 @@ am4core.ready(function() {
barPercentColumnSeries.dataFields.valueY = "has"; barPercentColumnSeries.dataFields.valueY = "has";
barPercentColumnSeries.dataFields.categoryX = "region"; barPercentColumnSeries.dataFields.categoryX = "region";
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.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 15px]{valueY.formatNumber('#.00')} millares de Ha[/] [#fff]{additional}[/]";
barPercentColumnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity"; barPercentColumnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
barPercentColumnSeries.columns.template.propertyFields.stroke = "stroke"; barPercentColumnSeries.columns.template.propertyFields.stroke = "stroke";
barPercentColumnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth"; barPercentColumnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
...@@ -433,4 +439,482 @@ am4core.ready(function() { ...@@ -433,4 +439,482 @@ am4core.ready(function() {
barPercentCircle.fill = am4core.color("#fff"); barPercentCircle.fill = am4core.color("#fff");
barPercentCircle.strokeWidth = 3; barPercentCircle.strokeWidth = 3;
}); // end am4core.ready() }); // end am4core.ready()
\ No newline at end of file
//________________________________________________________________________________
/*
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";
series.dataFields.value = "value";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 3000;
series.fill = am4core.color("#000");
series.fillOpacity =0;
// Set up column appearance
var column = series.columns.template;
column.strokeWidth = 2;
column.strokeOpacity = 1;
column.stroke = am4core.color("#ffffff");
column.strokeWidth = 0.1;
//column.tooltipText = "{x}, {y}: {value.workingValue.formatNumber('#.')}";
column.width = am4core.percent(100);
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";
//bullet1.circle.propertyFields.radius = "value";
//bullet1.circle.fill = am4core.color("#000");
bullet1.propertyFields.fill = "color";
bullet1.propertyFields.stroke = "color";
bullet1.circle.strokeWidth = 0.1;
bullet1.circle.stroke = "color";
bullet1.circle.fillOpacity = 1;
//bullet1.interactionsEnabled = false;
bullet1.interactionsEnabled = true;
/*
var bullet2 = series.bullets.push(new am4charts.LabelBullet());
bullet2.label.text = "{value.formatNumber('#.')}";
bullet2.label.fill = am4core.color("#fff");
bullet2.zIndex = 1;
bullet2.fontSize = 9;
bullet2.interactionsEnabled = false;*/
/*
// define colors
var colors = {
//"critical": "#ca0101",
"ags": "#e17a2d",
"slp": "#e1d92d",
"rvd": "#5dbe24"
//"verygood": "#0b7d03"
};
chart.data = [
{
"x": "Bajo",
"y": "2015",
"region": "Aguascalientes",
"color": colors.ags,
"value": 2173.95
},
{
"x": "Medio",
"y": "2015",
"region": "Aguascalientes",
"color": colors.ags,
"value": 603.18
}, {
"x": "Alto",
"y": "2015",
"region": "Aguascalientes",
"color": colors.ags,
"value": 494.67
},
{
"x": "Bajo",
"y": "2015",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 2117.60
}, {
"x": "Medio",
"y": "2015",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 307.51
}, {
"x": "Alto",
"y": "2015",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 173.51
},
{
"x": "Bajo",
"y": "2015",
"region": "Río Verde",
"color": colors.rvd,
"value": 116.94
}, {
"x": "Medio",
"y": "2015",
"region": "Río Verde",
"color": colors.rvd,
"value": 11.07
}, {
"x": "Alto",
"y": "2015",
"region": "Río Verde",
"color": colors.rvd,
"value": 2.81
},
{
"x": "Bajo",
"y": "2016",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 2587.61
},
{
"x": "Bajo",
"y": "2016",
"region": "Aguascalientes",
"color": colors.ags,
"value": 2443.30
},
{
"x": "Medio",
"y": "2016",
"region": "Aguascalientes",
"color": colors.ags,
"value": 701.91
}, {
"x": "Alto",
"y": "2016",
"region": "Aguascalientes",
"color": colors.ags,
"value": 626.42
},
{
"x": "Medio",
"y": "2016",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 380.08
}, {
"x": "Alto",
"y": "2016",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 233.55
},
{
"x": "Bajo",
"y": "2016",
"region": "Río Verde",
"color": colors.rvd,
"value": 157.86
}, {
"x": "Medio",
"y": "2016",
"region": "Río Verde",
"color": colors.rvd,
"value": 13.73
}, {
"x": "Alto",
"y": "2016",
"region": "Río Verde",
"color": colors.rvd,
"value": 3.60
},
{
"x": "Bajo",
"y": "2017",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 2986.12
},
{
"x": "Bajo",
"y": "2017",
"region": "Aguascalientes",
"color": colors.ags,
"value": 2694.58
},
{
"x": "Medio",
"y": "2017",
"region": "Aguascalientes",
"color": colors.ags,
"value": 794.37
}, {
"x": "Alto",
"y": "2017",
"region": "Aguascalientes",
"color": colors.ags,
"value": 748.70
},
{
"x": "Medio",
"y": "2017",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 496.52
}, {
"x": "Alto",
"y": "2017",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 326.59
},
{
"x": "Bajo",
"y": "2017",
"region": "Río Verde",
"color": colors.rvd,
"value": 199.56
}, {
"x": "Medio",
"y": "2017",
"region": "Río Verde",
"color": colors.rvd,
"value": 19.58
}, {
"x": "Alto",
"y": "2017",
"region": "Río Verde",
"color": colors.rvd,
"value": 4.47
},
{
"x": "Bajo",
"y": "2018",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 3313.87
},
{
"x": "Bajo",
"y": "2018",
"region": "Aguascalientes",
"color": colors.ags,
"value": 2997.31
},
{
"x": "Medio",
"y": "2018",
"region": "Aguascalientes",
"color": colors.ags,
"value": 860.59
}, {
"x": "Alto",
"y": "2018",
"region": "Aguascalientes",
"color": colors.ags,
"value": 888.27
},
{
"x": "Medio",
"y": "2018",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 619.27
}, {
"x": "Alto",
"y": "2018",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 427.07
},
{
"x": "Bajo",
"y": "2018",
"region": "Río Verde",
"color": colors.rvd,
"value": 233.20
}, {
"x": "Medio",
"y": "2018",
"region": "Río Verde",
"color": colors.rvd,
"value": 22.59
}, {
"x": "Alto",
"y": "2018",
"region": "Río Verde",
"color": colors.rvd,
"value": 5.28
},
{
"x": "Bajo",
"y": "2019",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 3484.82
},
{
"x": "Bajo",
"y": "2019",
"region": "Aguascalientes",
"color": colors.ags,
"value": 3179.72
},
{
"x": "Medio",
"y": "2019",
"region": "Aguascalientes",
"color": colors.ags,
"value": 933.00
}, {
"x": "Alto",
"y": "2019",
"region": "Aguascalientes",
"color": colors.ags,
"value": 1035.34
},
{
"x": "Medio",
"y": "2019",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 699.00
}, {
"x": "Alto",
"y": "2019",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 504.66
},
{
"x": "Bajo",
"y": "2019",
"region": "Río Verde",
"color": colors.rvd,
"value": 256.65
}, {
"x": "Medio",
"y": "2019",
"region": "Río Verde",
"color": colors.rvd,
"value": 25.10
}, {
"x": "Alto",
"y": "2019",
"region": "Río Verde",
"color": colors.rvd,
"value": 6.12
},
{
"x": "Bajo",
"y": "2020",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 3607.41
},
{
"x": "Bajo",
"y": "2020",
"region": "Aguascalientes",
"color": colors.ags,
"value": 3441.99
},
{
"x": "Medio",
"y": "2020",
"region": "Aguascalientes",
"color": colors.ags,
"value": 996.78
}, {
"x": "Alto",
"y": "2020",
"region": "Aguascalientes",
"color": colors.ags,
"value": 1143.06
},
{
"x": "Medio",
"y": "2020",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 730.09
}, {
"x": "Alto",
"y": "2020",
"region": "San Luis Potosí",
"color": colors.slp,
"value": 574.99
},
{
"x": "Bajo",
"y": "2020",
"region": "Río Verde",
"color": colors.rvd,
"value": 279.36
}, {
"x": "Medio",
"y": "2020",
"region": "Río Verde",
"color": colors.rvd,
"value": 27.87
}, {
"x": "Alto",
"y": "2020",
"region": "Río Verde",
"color": colors.rvd,
"value": 6.8
}
];
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);
legend.labels.template.fontSize = 9;
legend.maxColumns =3;
legend.data = [{
"name": "AGS",
"fill":"#E17A2D"
}, {
"name": "SLP",
"fill": "#E1D92D",
}, {
"name": "Río Verde",
"fill": "#5DBE24"
}];
let ChartTitle = chart.titles.create();
ChartTitle.text = "Evolución del grado de urbanización en el periurbano\nde Aguascalientes, San Luis Potosí y Río Verde";
ChartTitle.fontSize = 12;
ChartTitle.marginBottom = 15;
ChartTitle.fill = am4core.color(mainTextColor);
}); // end am4core.ready()
*/
\ No newline at end of file
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