Skip to content

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

changes on combined graph panel

parent 886ec2ab
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 242 deletions
public/js/evolucion_urbana_charts.js
View file @ 673c2bf8
......@@ -7,30 +7,13 @@
/* globals am4core, am4charts, am4themes_animated, intervals*/
let minValue, maxValue;
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-color');
//let amchart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "amchartdiv")
//let Chartdata = "http://localhost:8090/data/query/urbanization_year?columns=yeartrimes,area"
//data = d3.json(Chartdata).then(d => amchart.data = d)
//data = d3.json(Chartdata).then(data => console.log(data))
//http://localhost:8090/data/query/urbanization_year?columns=yeartrimes,area
// funcion copiada de evolucion_urbana.js
//const areaTable = table => {
// return new Promise(resolve => {
// let table = "urbanization_year";
// const baseUrl = new URL(`/data`, window.location.href).href;
// let minmaxQuery = `${baseUrl}/query/${table}?columns=${`min(yeartrimes), max(yeartrimes)`}`;
// let areaQuery = `${baseUrl}/query/${table}?columns=${`yeartrimes,area`}`;
/* d3.json(areaQuery).then(minmax => {
// resolve(minmax[0]);
});*/
// });
//}
//select yeartrimes, sum(area) from urbanization_year_diss group by yeartrimes order by yeartrimes;
// amChart
// amchart
am4core.ready(function() {
var chart = am4core.create("amchartdiv", am4charts.XYChart);
......@@ -39,268 +22,166 @@ am4core.ready(function() {
ctitle.text = "Area por trimestre";
ctitle.fontSize = 14;
//title.marginBottom = 30;
// Add data
chart.data = [{
"date": "2014-06-30",
"area": 15412733,
"cum_area": 15412733,
"delta": 3.69,
"inc": 0
}, {
"date": "2014-09-30",
"area": 4732329,
"cum_area": 20145062,
"delta": 1.13, //31
"inc": 30.70
}, {
"date": "2014-12-31",
"area": 7162111,
"cum_area": 27307173,
"delta": 1.72, //36
"inc": 35.55
}, {
"date": "2015-03-31",
"area": 6155929,
"cum_area": 33463102,
"delta": 1.48, //22
"inc": 22.54
}, {
"date": "2015-06-30",
"area": 15920922,
"cum_area": 49384024,
"delta": 3.82, //48
"inc": 47.58
}, {
"date": "2015-09-30",
"area": 9240034,
"cum_area": 58624058,
"delta": 2.21, //19
"inc": 18.71
}, {
"date": "2015-12-31",
"area": 8337370,
"cum_area": 66961428,
"delta": 2, //14
"inc": 14.22
}, {
"date": "2016-03-31",
"area": 8470320, //3,
"cum_area": 75431748,
"delta": 2.03, //12
"inc": 12.65
}, {
"date": "2016-09-30",
"area": 25938803, //55,
"cum_area": 101370551,
"delta": 6.22,
"inc": 34.39
}, {
"date": "2016-12-31",
"area": 8116873,
"cum_area": 109487424,
"delta": 1.95, //8
"inc": 8.01
}, {
"date": "2017-03-31",
"area": 7775210,
"cum_area": 117262634,
"delta": 1.86, //7
"inc": 7.10
}, {
"date": "2017-06-30",
"area": 47965, //734,
"cum_area": 117310599,
"delta": 0.01, //0
"inc": 0.04
}, {
"date": "2017-09-30",
"area": 28417422,
"cum_area": 145728020,
"delta": 6.81, //24
"inc": 24.22
}, {
"date": "2017-12-31",
"area": 8585566,
"cum_area": 154313587,
"delta": 2.06, //6
"inc": 5.89
}, {
"date": "2018-03-31",
"area": 184379,
"cum_area": 154497966,
"delta": 0.04,
"inc": 0.12
}, {
"date": "2018-06-30",
"area": 10867610,
"cum_area": 165365576,
"delta": 2.60,
"inc": 7.03
}, {
"date": "2018-09-30",
"area": 49281520,
"cum_area": 214647096,
"delta": 11.81,
"inc": 29.8
}, {
"date": "2018-12-31",
"area": 33473790,
"cum_area": 248120886,
"delta": 8.02,
"inc": 15.59
}, {
"date": "2019-03-31",
"area": 59364664,
"cum_area": 307485550,
"delta": 14.24,
"inc": 23.93
}, {
"date": "2019-06-30",
"area": 4934.68, //7186,
"cum_area": 307490484.8,
"delta": 0,
"inc": 0
}, {
"date": "2019-09-30",
"area": 109821476,
"cum_area": 417311961,
"delta": 26.32,
"inc": 35.72
}
/*,{
"date": "2013-01-30",
"market1": 81,
"market2": 85,
"sales1": 4,
"sales2": 7
}*/
];
//Add data
const baseUrl = new URL(`/data`, window.location.href).href;
let table = "urbanization_year";
let query = `${baseUrl}/query/${table}?columns=yeartrimes,sum(area) as area,date&group=yeartrimes,date&sort=yeartrimes`;
d3.json(query).then(d => chart.data = d);
//d3.json(query).then(d => pchart.data = d);
//d3.json(query).then(d => console.log(d));
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
//dateAxis.renderer.grid.template.location = 0;
let xAxis = chart.xAxes.push(new am4charts.DateAxis());
let valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
xAxis.baseInterval = { "timeUnit": "month" };
valueAxis1.numberFormatter.numberFormat = "#.##";
//yAxis.calculatedTotals = true;
//var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
// categoryAxis.dataFields.category = "yeartrimes";
//renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30;
var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis1.title.text = "Area Ocupada"; //"Sales";
//var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
//valueAxis1.title.text = "Area Ocupada"; //"Sales";
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.title.text = "Incremento Porcentual" //"Market Days";
let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.title.text = "Incremento" //"Market Days";
valueAxis2.renderer.opposite = true;
valueAxis2.axisRanges.value = 200
valueAxis2.syncWithAxis = valueAxis1;
valueAxis2.renderer.grid.template.disabled = true;
valueAxis2.numberFormatter.numberFormat = "#.##";
//valueAxis2.syncWithAxis = valueAxis1;
// Create series
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "area"; //"sales1";
let series1 = chart.series.push(new am4charts.ColumnSeries());
//date = new Date(data.date)
series1.dataFields.dateX = "date";
series1.yAxis = valueAxis1;
series1.name = "Area"; //"Target Sales";
series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}"; //M[/]";
series1.dataFields.valueY = "area";
//series1.dataFields.valueYShow = "sum";
series1.name = "Area";
//
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.fill = chart.colors.getIndex(0);
series1.strokeWidth = 0;
series1.clustered = false;
series1.columns.template.width = am4core.percent(40);
//series1.columns.template.width = am4core.percent(100);
//series1.toBack();
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "cum_area"; //"sales2";
let series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "area";
series2.dataFields.valueYShow = "previousChange";
series2.name = "Incremento";
series2.yAxis = valueAxis1;
series2.name = "Area acumulada"; //"Actual Sales";
series2.tooltipText = "{name}\n[bold font-size: 20]{valueY}"; //M[/]";
series2.fill = chart.colors.getIndex(0).lighten(0.5);
series2.strokeWidth = 0;
series2.clustered = false;
series2.toBack();
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "delta"; //"market1";
series2.tooltipText = "{name}\n[bold font-size: 20]{valueY.previousChange}[/]"; //M[/]";
series2.columns.template.width = am4core.percent(40);
//series2.stroke = am4core.color("#A1045A");
//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());
series3.dataFields.valueY = "area"; //"delta"; //"market1";
series3.dataFields.valueYShow = "previousChangePercent";
series3.dataFields.dateX = "date";
series3.name = "Relativa al periodo"; //"Market Days";
//xAxis.calculateTotals = true;
series3.name = "Incremento Porcentual"; //"Market Days";
series3.strokeWidth = 2;
series3.tensionX = 0.7;
series3.stroke = am4core.color("#A1045A");
series3.strokeDasharray = "3,3";
series3.yAxis = valueAxis2;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}\%[/]";
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY.previousChangePercent}\%[/]";
series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#A1045A");
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 = "date";
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
/*
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
chart.cursor = new am4charts.XYCursor();
// Add legend
//Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
// Add scrollbar
//Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series1);
chart.scrollbarX.series.push(series3);
//chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer;
var piechart = am4core.create("perimeter-graph", am4charts.PieChart);
let title = piechart.titles.create();
d3.json(query).then(d => pchart.data = d);
let pchart = am4core.create("perimeter-graph", am4charts.PieChart);
let title = pchart.titles.create();
title.text = "Area por año";
title.fontSize = 14;
//title.marginBottom = 30;
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
piechart.innerRadius = am4core.percent(50);
//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);
// Add and configure Series
var pieSeries = piechart.series.push(new am4charts.PieSeries());
var pieSeries = pchart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "area";
pieSeries.dataFields.category = "year";
pieSeries.dataFields.date = "date";
pieSeries.baseInterval = { "timeUnit": "year" }
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 0.1;
pieSeries.slices.template.strokeOpacity = 1;
......
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