Skip to content

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

evolucion_urbana_charts

parent 673c2bf8
Hide whitespace changes
Inline Side-by-side
Showing with 420 additions and 126 deletions
public/centropais/index.html
View file @ 8884b2e5
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
</div>--> </div>-->
</div> </div>
<div class="row h-50"> <div class="row h-50">
<div class="col-6 border-right"> <div class="col-6 border-right" id="prueba">
<div id="tablediv"> <div id="tablediv">
<table class="table table-dark table-striped table-fixed" id="tblViajes"> <table class="table table-dark table-striped table-fixed" id="tblViajes">
<thead class="thead-dark"> <thead class="thead-dark">
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="row h-100"> <div class="row h-100" id="prueba2">
<div id="perimeter-graph"></div> <div id="perimeter-graph"></div>
</div> </div>
</div> </div>
......
public/js/evolucion_urbana_charts.js
View file @ 8884b2e5
...@@ -16,120 +16,102 @@ ...@@ -16,120 +16,102 @@
// amchart // amchart
am4core.ready(function() { am4core.ready(function() {
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
var chart = am4core.create("amchartdiv", am4charts.XYChart); var chart = am4core.create("amchartdiv", am4charts.XYChart);
let ctitle = chart.titles.create(); let ctitle = chart.titles.create();
ctitle.text = "Area por trimestre"; ctitle.text = "Área urbanizada mensual";
ctitle.fontSize = 14; ctitle.fontSize = 15;
//title.marginBottom = 30; //title.marginBottom = 30;
ctitle.fill = am4core.color(mainTextColor);
//Add data //Add data
const baseUrl = new URL(`/data`, window.location.href).href; const baseUrl = new URL(`/data`, window.location.href).href;
let table = "urbanization_year"; let table = "urbanization_year";
let query = `${baseUrl}/query/${table}?columns=yeartrimes,sum(area) as area,date&group=yeartrimes,date&sort=yeartrimes`; let query = `${baseUrl}/query/${table}?columns=yeartrimes,sum(area)/10000 as area,date&group=yeartrimes,date&sort=yeartrimes`;
d3.json(query).then(d => chart.data = d); d3.json(query).then(d => chart.data = d);
//d3.json(query).then(d => pchart.data = d); //d3.json(query).then(d => pchart.data = d);
//d3.json(query).then(d => console.log(d)); // d3.json(query).then(d => console.log(d));
// Create axes // Create axes
let xAxis = chart.xAxes.push(new am4charts.DateAxis()); let xAxis = chart.xAxes.push(new am4charts.DateAxis());
xAxis.baseInterval = { timeUnit: "month", count: 1 };
xAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
xAxis.numberFormatter.numberFormat = "#,###.#";
let valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis()); let valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
xAxis.baseInterval = { "timeUnit": "month" }; valueAxis1.title.text = "Área urbanizada (Ha)";
valueAxis1.numberFormatter.numberFormat = "#.##"; valueAxis1.title.fill = am4core.color(mainTextColor);
//yAxis.calculatedTotals = true; valueAxis1.min = valueAxis1.minZoomed;
//var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); valueAxis1.max = valueAxis1.maxZoomed;
// categoryAxis.dataFields.category = "yeartrimes"; valueAxis1.title.fill = am4core.color(mainTextColor);
//renderer.grid.template.location = 0; valueAxis1.renderer.labels.template.fill = am4core.color(mainTextColor);
//dateAxis.renderer.minGridDistance = 30;
//var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis()); /* let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
//valueAxis1.title.text = "Area Ocupada"; //"Sales"; valueAxis2.title.text = "Cambio (Ha)"; //"Market Days";
valueAxis2.renderer.opposite = true;
let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis()); //valueAxis2.axisRanges.value = 50
valueAxis2.title.text = "Incremento" //"Market Days"; //valueAxis2.syncWithAxis = valueAxis1;
valueAxis2.renderer.opposite = true; //valueAxis2.renderer.grid.template.disabled = true;
valueAxis2.axisRanges.value = 200 valueAxis2.numberFormatter.numberFormat = "#,###.0";
valueAxis2.syncWithAxis = valueAxis1; valueAxis2.title.fill = am4core.color(mainTextColor);
valueAxis2.renderer.grid.template.disabled = true; valueAxis2.renderer.labels.template.fill = am4core.color(mainTextColor);*/
valueAxis2.numberFormatter.numberFormat = "#.##";
//valueAxis2.syncWithAxis = valueAxis1;
let valueAxis3 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis3.title.text = "Cambio Porcentual"; //"Market Days";
valueAxis3.renderer.opposite = true;
valueAxis3.numberFormatter.numberFormat = "#.#";
valueAxis3.renderer.labels.template.fill = am4core.color("#b9ce37");
valueAxis3.title.fill = am4core.color("#b9ce37");
valueAxis3.min = -300;
//valueAxis3.syncWithAxis = valueAxis1;
// Create series // Create series
let series1 = chart.series.push(new am4charts.ColumnSeries()); let series1 = chart.series.push(new am4charts.ColumnSeries());
//date = new Date(data.date)
series1.dataFields.dateX = "date"; series1.dataFields.dateX = "date";
series1.dataFields.valueY = "area"; series1.dataFields.valueY = "area";
//series1.dataFields.valueYShow = "sum"; series1.name = "Área urbanizada";
series1.name = "Area";
// //
series1.yAxes = valueAxis1; series1.yAxes = valueAxis1;
//series1.name = "Area"; //"Target Sales"; //series1.tooltipText = "{name}\n{dateX}:\n[bold font-size: 20] {valueY}"; //"{name}\n[bold font-size: 20]{valueY}"; //M[/]";
series1.tooltipText = "{name}\n{dateX}:\n[bold font-size: 20] {valueY}"; //"{name}\n[bold font-size: 20]{valueY}"; //M[/]"; // series1.tooltipText = "[bold font-size: 20]{name}\n[bold font-size: 20] {valueY.formatNumber('#,###.#')} Ha";
series1.fill = chart.colors.getIndex(0); series1.fill = chart.colors.getIndex(0);
series1.strokeWidth = 0; series1.strokeWidth = 0;
series1.clustered = false; series1.clustered = false;
//series1.columns.template.width = am4core.percent(100);
//series1.toBack();
/*let series2 = chart.series.push(new am4charts.ColumnSeries());
let series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.dateX = "date"; series2.dataFields.dateX = "date";
series2.dataFields.valueY = "area"; series2.dataFields.valueY = "area";
series2.dataFields.valueYShow = "previousChange"; series2.dataFields.valueYShow = "change";
series2.name = "Incremento"; series2.name = "Cambio";
series2.yAxis = valueAxis1; series2.yAxis = valueAxis2;
series2.tooltipText = "{name}\n[bold font-size: 20]{valueY.previousChange}[/]"; //M[/]"; series2.tooltipText = "[bold font-size: 20]{name}\n[bold font-size: 20]{valueY.change.formatNumber('#,###.#')} Ha[/]"; //M[/]";
series2.columns.template.width = am4core.percent(40); series2.columns.template.width = am4core.percent(40);
//series2.stroke = am4core.color("#A1045A"); series2.clustered = false;*/
//series2.fill = am4core.color("#A1045A");
//series2.fill = chart.colors.getIndex(0).lighten(0.5);
//series2.strokeWidth = 0;
//series2.clustered = false;
let series3 = chart.series.push(new am4charts.LineSeries()); let series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "area"; //"delta"; //"market1"; series3.dataFields.valueY = "area";
series3.dataFields.valueYShow = "previousChangePercent"; series3.dataFields.valueYShow = "changePercent";
series3.dataFields.dateX = "date"; series3.dataFields.dateX = "date";
//xAxis.calculateTotals = true; series3.name = "Cambio Porcentual";
series3.name = "Incremento Porcentual"; //"Market Days";
series3.strokeWidth = 2; series3.strokeWidth = 2;
series3.tensionX = 0.7; series3.tensionX = 0.7;
series3.stroke = am4core.color("#A1045A"); series3.stroke = am4core.color("#b9ce37");
series3.strokeDasharray = "3,3"; series3.strokeDasharray = "3,3";
series3.yAxis = valueAxis2; series3.yAxis = valueAxis3;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY.previousChangePercent}\%[/]"; series3.tooltipText = "[bold font-size: 10]{dateX}:\n[font-size: 10]Área urbanizada: {valueY} Ha[/]\n[font-size: 10]Cambio: {valueY.change} Ha[/]\n[font-size: 10]{name}: {valueY.changePercent}\%[/]\n";
series3.tooltip.getFillFromObject = false; series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#A1045A"); series3.tooltip.background.fill = am4core.color(mainTextColor);
/*
var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
bullet3.circle.radius = 3;
bullet3.circle.strokeWidth = 2;
bullet3.circle.fill = am4core.color("#fff");
bullet3.circle.stroke = am4core.color("#A1045A");
var series4 = chart.series.push(new am4charts.LineSeries());
series4.dataFields.valueY = "inc";
series4.dataFields.dateX = "yeartrimes";
series4.name = "Incremento trimestral";
series4.strokeWidth = 2;
series4.tensionX = 0.7;
series4.stroke = am4core.color("#BBD915");
series4.yAxis = valueAxis2;
series4.tooltipText = "{name}\n[bold font-size: 20]{valueY}\%[/]";
//series4.stroke = chart.colors.getIndex(0).lighten(0.5);
series4.strokeDasharray = "3,3"
series4.tooltip.getFillFromObject = false;
series4.tooltip.background.fill = am4core.color("#BBD915");;
var bullet4 = series4.bullets.push(new am4charts.CircleBullet());
bullet4.circle.radius = 3;
bullet4.circle.strokeWidth = 2;
bullet4.circle.fill = am4core.color("#fff");
bullet4.circle.stroke = am4core.color("#BBD915");
*/
//Add cursor //Add cursor
chart.cursor = new am4charts.XYCursor(); chart.cursor = new am4charts.XYCursor();
...@@ -138,66 +120,378 @@ am4core.ready(function() { ...@@ -138,66 +120,378 @@ am4core.ready(function() {
chart.legend.position = "top"; chart.legend.position = "top";
//Add scrollbar //Add scrollbar
chart.legend.labels.template.fill = am4core.color(mainTextColor);
chart.scrollbarX = new am4charts.XYChartScrollbar(); chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series1); chart.scrollbarX.series.push(series3);
chart.scrollbarX.minHeight = 10;
//chart.scrollbarX.series.push(series3); //chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer; chart.scrollbarX.parent = chart.bottomAxesContainer;
d3.json(query).then(d => pchart.data = d); //==================================================================================================================================== PIE CHART
let pchart = am4core.create("perimeter-graph", am4charts.PieChart); let pchart = am4core.create("prueba", am4charts.PieChart);
let title = pchart.titles.create();
title.text = "Area por año"; let query2 = `${baseUrl}/query/${table}?columns=sum(area) as area,DATE_PART('year',date) as yy&group=yy&sort=yy`; // &sort=yeartrimes`;
title.fontSize = 14; d3.json(query2).then(d => pchart.data = d);
//title.marginBottom = 30;
//piechart.dataSource.url = "http://localhost:8090/data/query/urbanization_year?columns=yeartrimes,area";
/* piechart.data = [{
"year": "2014",
"area": 27307173 //.1511641
}, {
"year": "2015",
"area": 39654255 //.2586638
}, {
"year": "2016",
"area": 42525995 //.2153693
}, {
"year": "2017",
"area": 44826163 //.093561
}, {
"year": "2018",
"area": 93807299 //.53
}, {
"year": "2019",
"area": 169191074 //.724479
}];
*/
//Set inner radius
pchart.innerRadius = am4core.percent(50);
let ptitle = pchart.titles.create();
ptitle.text = "Área urbanizada anualmente";
ptitle.fontSize = 20;
ptitle.marginTop = 30;
ptitle.fill = am4core.color(mainTextColor);
pchart.innerRadius = am4core.percent(40);
//Add legend
pchart.legend = new am4charts.Legend();
pchart.legend.position = "right";
pchart.legend.labels.template.fill = am4core.color(mainTextColor);
pchart.legend.valueLabels.template.fill = am4core.color(mainTextColor);
// Add and configure Series // Add and configure Series
var pieSeries = pchart.series.push(new am4charts.PieSeries()); let pieSeries = pchart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "area"; pieSeries.dataFields.value = "area";
pieSeries.dataFields.category = "yy";
pieSeries.dataFields.date = "date"; pieSeries.ticks.template.disabled = true;
pieSeries.baseInterval = { "timeUnit": "year" } //pieSeries.labels.template.disabled = true;
pieSeries.slices.template.stroke = am4core.color("#fff"); pieSeries.alignLabels = false;
pieSeries.slices.template.strokeWidth = 0.1; pieSeries.labels.template.bent = true;
pieSeries.slices.template.strokeOpacity = 1;
pieSeries.colors.list = [ pieSeries.colors.list = [
am4core.color("#313695"), am4core.color("#313695"),
am4core.color("#4575B4"), am4core.color("#5e6bbf"),
am4core.color("#E0F3F8"), am4core.color("#e0f3f8"),
am4core.color("#FFFFBF"), am4core.color("#ffffbf"),
am4core.color("#F46D43"), am4core.color("#b82a76"),
am4core.color("#A50026") am4core.color("#9e0142")
]; ];
pieSeries.slices.template.stroke = am4core.color("#ffffff");
pieSeries.slices.template.strokeWidth = 3;
pieSeries.slices.template.strokeOpacity = .20;
pieSeries.numberFormatter.numberFormat = "####.#";
pieSeries.labels.template.fill = am4core.color(mainTextColor);
pieSeries.labels.template.text = "{category}";
//==================================================================================================================================== RADAR CHART
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var rchart = am4core.create("prueba2", am4charts.RadarChart);
// chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
//const baseUrl = new URL(`/data`, window.location.href).href;
//let table = "urbanization_year";
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,date,DATE_PART('month',date) as mm&group=mm,date &sort=mm`;
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm&group=mm &sort=mm`;
let query_r = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,concat('Q', DATE_PART('quarter',date)::text) as qq&group=mm,qq &sort=mm`;
d3.json(query_r).then(d => rchart.data = d);
//chart.padding(20, 20, 20, 20);
// var chart = am4core.create("chartdiv", am4charts.RadarChart);
//prepareDistanceData(data);
rchart.innerRadius = am4core.percent(15);
rchart.radius = am4core.percent(90);
//chart.data = weeklyData;
rchart.fontSize = "11px";
rchart.startAngle = 180;
rchart.endAngle = rchart.startAngle + 180;
// Create axes
// var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var dateAxis = rchart.xAxes.push(new am4charts.CategoryAxis());
dateAxis.dataFields.category = "qq";
// dateAxis.baseInterval = { timeUnit: "month", count: 3 };
//dateAxis.renderer.innerRadius = am4core.percent(40);
dateAxis.renderer.minGridDistance = 5;
dateAxis.renderer.labels.template.relativeRotation = 0;
dateAxis.renderer.labels.template.location = 0.5;
dateAxis.renderer.labels.template.radius = am4core.percent(-57);
dateAxis.renderer.labels.template.fontSize = "8px";
dateAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
// dateAxis.dateFormats.setKey("month", "MMM");
// dateAxis.periodChangeDateFormats.setKey("month", "MMM");
dateAxis.cursorTooltipEnabled = false;
// dateAxis.calculateTotals = true;
var valueAxis = rchart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true;
valueAxis.renderer.radius = am4core.percent(40);
valueAxis.renderer.minGridDistance = 15;
valueAxis.renderer.minLabelPosition = 0.05;
//valueAxis.renderer.axisAngle = 90;
valueAxis.renderer.axisAngle = 270;
valueAxis.cursorTooltipEnabled = false;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
// valueAxis.calculateTotals = true;
//Add series
var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
// columnSeries.dataFields.dateX = "date";
columnSeries.dataFields.categoryX = "qq"; //date
columnSeries.dataFields.valueY = "area";
// columnSeries.dataFields.valueYShow = "sum";
columnSeries.columns.template.strokeOpacity = 0;
columnSeries.columns.template.width = am4core.percent(95);
columnSeries.fill = am4core.color("#80acba");
columnSeries.fillOpacity = 0.6;
columnSeries.tooltip.fontSize = 10;
columnSeries.tooltip.pointerOrientation = "down";
columnSeries.tooltip.background.fillOpacity = 0.5;
columnSeries.columns.template.tooltipText = "[bold]{qq}\n[font-size:13px]Total {valueY.formatNumber('#,###.0')} Ha";
columnSeries.cursorTooltipEnabled = false;
//columnSeries.yAxis = dateAxis;
/* //ANILLO EXTERIOR
var range = dateAxis.axisRanges.create();
range.category = "January";
range.endCategory = "April";
range.axisFill.fill = am4core.color("#396478");
range.axisFill.fillOpacity = 0.3;*/
let yearsAxis = rchart.yAxes.push(new am4charts.CategoryAxis());
let bubbleSeries = rchart.series.push(new am4charts.RadarSeries());
//let queryYYYY = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,DATE_PART('year',date) as yy,date&group=yy,mm,date &sort=yy,mm`;
let queryYYYY = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,to_char(to_timestamp (date_part('month', date)::text, 'MM'), 'Month') as mm,DATE_PART('year',date) as yy,concat('Q', DATE_PART('quarter',date)::text) as qq,date&group=qq,yy,mm,date &sort=date`;
d3.json(queryYYYY).then(d => {
yearsAxis.data = d
bubbleSeries.data = d;
});
// weekday axis
//var weekDayAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yearsAxis.dataFields.category = "yy";
//yearsAxis.data = dailyData;
yearsAxis.renderer.innerRadius = am4core.percent(50);
yearsAxis.renderer.minGridDistance = 10;
yearsAxis.renderer.grid.template.location = 0;
yearsAxis.renderer.grid.template.stroke = am4core.color(mainTextColor);
yearsAxis.renderer.line.disabled = true;
yearsAxis.renderer.axisAngle = 270;
yearsAxis.cursorTooltipEnabled = false;
yearsAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
// bubble series
//var bubbleSeries = chart.series.push(new am4charts.RadarSeries());
bubbleSeries.dataFields.categoryX = "qq";
bubbleSeries.dataFields.categoryY = "yy";
bubbleSeries.dataFields.value = "area";
bubbleSeries.yAxis = yearsAxis;
//bubbleSeries.data = dailyData;
bubbleSeries.strokeOpacity = 0;
bubbleSeries.maskBullets = false;
bubbleSeries.cursorTooltipEnabled = false;
bubbleSeries.tooltip.fontSize = 10;
bubbleSeries.tooltip.pointerOrientation = "down";
bubbleSeries.tooltip.background.fillOpacity = 0.5;
bubbleSeries.dataItems.template.locations.categoryX = 0.5;
var bubbleBullet = bubbleSeries.bullets.push(new am4charts.CircleBullet())
bubbleBullet.locationX = 0.5;
bubbleBullet.stroke = am4core.color("#b9ce37");
bubbleBullet.fill = am4core.color("#b9ce37");
bubbleBullet.tooltipText = "[bold]{date.formatDate('yyyy-MMM')}: \n{value.formatNumber('#,###.0')} Ha";
bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) {
return -target.circle.radius;
})
bubbleSeries.heatRules.push({ target: bubbleBullet.circle, min: 2, max: 12, dataField: "value", property: "radius" });
bubbleSeries.dataItems.template.locations.categoryY = 0.5;
// TITULOS MISCELANEOS
rchart.cursor = new am4charts.RadarCursor();
rchart.cursor.innerRadius = am4core.percent(40);
rchart.cursor.lineY.disabled = true;
var label = rchart.radarContainer.createChild(am4core.Label);
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fill = am4core.color(mainTextColor);
label.fontSize = 12;
//label.fontWeight = "bold";
label.text = "TOTAL\nTRIMESTRAL";
var title = rchart.createChild(am4core.Label);
title.fill = am4core.color("#b9ce37");
title.fontSize = 20;
title.isMeasured = false;
title.valign = "top";
title.align = "left";
title.wrap = true;
title.width = 200;
title.text = "[bold]Área urbanizada entre 2014 y 2019.\n[font-size:11; #ffffff] Cada círculo representa el tamaño del área urbanizada.";
}); // end am4core.ready()
/*
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var rchart = am4core.create("prueba2", am4charts.RadarChart);
// chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
const baseUrl = new URL(`/data`, window.location.href).href;
let table = "urbanization_year";
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,date,DATE_PART('month',date) as mm&group=mm,date &sort=mm`;
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm&group=mm &sort=mm`;
let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,to_char(to_timestamp (date_part('month', date)::text, 'MM'), 'Month') as mm,DATE_PART('month',date) as mm1&group=mm,mm1 &sort=mm1`;
d3.json(query).then(d => rchart.data = d);
//chart.padding(20, 20, 20, 20);
// var chart = am4core.create("chartdiv", am4charts.RadarChart);
//prepareDistanceData(data);
rchart.innerRadius = am4core.percent(15);
rchart.radius = am4core.percent(90);
//chart.data = weeklyData;
rchart.fontSize = "11px";
rchart.startAngle = 180;
rchart.endAngle = rchart.startAngle + 180;
// Create axes
// var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var dateAxis = rchart.xAxes.push(new am4charts.CategoryAxis());
dateAxis.dataFields.category = "mm";
// dateAxis.baseInterval = { timeUnit: "month", count: 3 };
//dateAxis.renderer.innerRadius = am4core.percent(40);
dateAxis.renderer.minGridDistance = 5;
dateAxis.renderer.labels.template.relativeRotation = 0;
dateAxis.renderer.labels.template.location = 0.5;
dateAxis.renderer.labels.template.radius = am4core.percent(-57);
dateAxis.renderer.labels.template.fontSize = "8px";
dateAxis.renderer.labels.template.fill = am4core.color("#ffffff");
// dateAxis.dateFormats.setKey("month", "MMM");
// dateAxis.periodChangeDateFormats.setKey("month", "MMM");
dateAxis.cursorTooltipEnabled = false;
// dateAxis.calculateTotals = true;
var valueAxis = rchart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true;
valueAxis.renderer.radius = am4core.percent(40);
valueAxis.renderer.minGridDistance = 15;
valueAxis.renderer.minLabelPosition = 0.05;
//valueAxis.renderer.axisAngle = 90;
valueAxis.renderer.axisAngle = 90;
valueAxis.cursorTooltipEnabled = false;
valueAxis.renderer.labels.template.fill = am4core.color("#ffffff");
// valueAxis.calculateTotals = true;
//Add series
var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
// columnSeries.dataFields.dateX = "date";
columnSeries.dataFields.categoryX = "mm"; //date
columnSeries.dataFields.valueY = "area";
// columnSeries.dataFields.valueYShow = "sum";
columnSeries.columns.template.strokeOpacity = 0;
columnSeries.columns.template.width = am4core.percent(95);
columnSeries.fill = am4core.color("#ffffff");
columnSeries.fillOpacity = 0.6;
columnSeries.tooltip.fontSize = 10;
columnSeries.tooltip.pointerOrientation = "down";
columnSeries.tooltip.background.fillOpacity = 0.5;
columnSeries.columns.template.tooltipText = "[bold]{mm} \n[font-size:13px]Total {valueY.formatNumber('#,###.0')} Ha";
columnSeries.cursorTooltipEnabled = false;
//columnSeries.yAxis = dateAxis;
let yearsAxis = rchart.yAxes.push(new am4charts.CategoryAxis());
let bubbleSeries = rchart.series.push(new am4charts.RadarSeries());
//let queryYYYY = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,DATE_PART('year',date) as yy,date&group=yy,mm,date &sort=yy,mm`;
let queryYYYY = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,to_char(to_timestamp (date_part('month', date)::text, 'MM'), 'Month') as mm,DATE_PART('year',date) as yy,date&group=yy,mm,date &sort=date`;
d3.json(queryYYYY).then(d => {
yearsAxis.data = d
bubbleSeries.data = d;
});
// weekday axis
//var weekDayAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yearsAxis.dataFields.category = "yy";
//yearsAxis.data = dailyData;
yearsAxis.renderer.innerRadius = am4core.percent(50);
yearsAxis.renderer.minGridDistance = 10;
yearsAxis.renderer.grid.template.location = 0;
yearsAxis.renderer.grid.template.stroke = am4core.color("#ffffff");;
yearsAxis.renderer.line.disabled = true;
yearsAxis.renderer.axisAngle = 270;
yearsAxis.cursorTooltipEnabled = false;
yearsAxis.renderer.labels.template.fill = am4core.color("#ffffff");
// bubble series
//var bubbleSeries = chart.series.push(new am4charts.RadarSeries());
bubbleSeries.dataFields.categoryX = "mm";
bubbleSeries.dataFields.categoryY = "yy";
bubbleSeries.dataFields.value = "area";
bubbleSeries.yAxis = yearsAxis;
//bubbleSeries.data = dailyData;
bubbleSeries.strokeOpacity = 0;
bubbleSeries.maskBullets = false;
bubbleSeries.cursorTooltipEnabled = false;
bubbleSeries.tooltip.fontSize = 10;
bubbleSeries.tooltip.pointerOrientation = "down";
bubbleSeries.tooltip.background.fillOpacity = 0.5;
bubbleSeries.dataItems.template.locations.categoryX = 0.5;
var bubbleBullet = bubbleSeries.bullets.push(new am4charts.CircleBullet())
bubbleBullet.locationX = 0.5;
bubbleBullet.stroke = am4core.color("#b9ce37");
bubbleBullet.fill = am4core.color("#b9ce37");
bubbleBullet.tooltipText = "[bold]{date.formatDate('yyyy-MMM')}: \n{value.formatNumber('#,###.0')} Ha";
bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) {
return -target.circle.radius;
})
bubbleSeries.heatRules.push({ target: bubbleBullet.circle, min: 2, max: 12, dataField: "value", property: "radius" });
bubbleSeries.dataItems.template.locations.categoryY = 0.5;
// TITULOS MISCELANEOS
rchart.cursor = new am4charts.RadarCursor();
rchart.cursor.innerRadius = am4core.percent(40);
rchart.cursor.lineY.disabled = true;
var label = rchart.radarContainer.createChild(am4core.Label);
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fill = am4core.color("#ffffff");
label.fontSize = 12;
//label.fontWeight = "bold";
label.text = "TOTAL\nTRIMESTRAL";
var title = rchart.createChild(am4core.Label);
title.fill = am4core.color("#b9ce37");
title.fontSize = 20;
title.isMeasured = false;
title.valign = "top";
title.align = "left";
title.wrap = true;
title.width = 200;
title.text = "[bold]Área urbanizada entre 2014 y 2019.\n[font-size:11; #ffffff] Cada círculo representa el tamaño del área urbanizada.";
// This creates initial animation
pieSeries.hiddenState.properties.opacity = 1;
pieSeries.hiddenState.properties.endAngle = -90;
pieSeries.hiddenState.properties.startAngle = -90;
}); // end am4core.ready() }); // end am4core.ready()*/
\ No newline at end of file \ 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