Skip to content

F
fordecyt_2019
You need to sign in or sign up before continuing.
Commit 673c2bf8 authored by Tania Gómez's avatar Tania Gómez
Browse files
Options

changes on combined graph panel

parent 886ec2ab
Show 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,193 +22,88 @@ 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;
......@@ -234,7 +112,7 @@ am4core.ready(function() {
var series4 = chart.series.push(new am4charts.LineSeries());
series4.dataFields.valueY = "inc";
series4.dataFields.dateX = "date";
series4.dataFields.dateX = "yeartrimes";
series4.name = "Incremento trimestral";
series4.strokeWidth = 2;
series4.tensionX = 0.7;
......@@ -251,28 +129,28 @@ am4core.ready(function() {
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();
// 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 = [{
//piechart.dataSource.url = "http://localhost:8090/data/query/urbanization_year?columns=yeartrimes,area";
/* piechart.data = [{
"year": "2014",
"area": 27307173 //.1511641
}, {
......@@ -292,15 +170,18 @@ am4core.ready(function() {
"area": 169191074 //.724479
}];
// Set inner radius
piechart.innerRadius = am4core.percent(50);
*/
//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