Skip to content

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

load donut chart and modified color series on combined graph

parent a5059f74
Show whitespace changes
Inline Side-by-side
Showing with 237 additions and 166 deletions
public/centropais/index.html
View file @ 0060eec9
...@@ -107,12 +107,14 @@ ...@@ -107,12 +107,14 @@
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="row h-100">
<div id="perimeter-graph"></div> <div id="perimeter-graph"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<footer class="page-footer py-2"> <footer class="page-footer py-2">
<div class="container-fluid text-center"> <div class="container-fluid text-center">
...@@ -184,11 +186,11 @@ ...@@ -184,11 +186,11 @@
let script1 = document.createElement('script'); let script1 = document.createElement('script');
let script2 = document.createElement('script'); let script2 = document.createElement('script');
let script3 = document.createElement('script'); let script3 = document.createElement('script');
script1.src="../js/centropais_functions.js"; script1.src = "../js/centropais_functions.js";
body.appendChild(script1); body.appendChild(script1);
script2.src="../js/centropais_basemap.js"; script2.src = "../js/centropais_basemap.js";
body.appendChild(script2); body.appendChild(script2);
script3.src="../js/centropais_charts.js"; script3.src = "../js/centropais_charts.js";
body.appendChild(script3); body.appendChild(script3);
}); });
......
public/js/evolucion_urbana_charts.js
View file @ 0060eec9
...@@ -21,9 +21,9 @@ let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-co ...@@ -21,9 +21,9 @@ let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-co
// return new Promise(resolve => { // return new Promise(resolve => {
// let table = "urbanization_year"; // let table = "urbanization_year";
// const baseUrl = new URL(`/data`, window.location.href).href; // const baseUrl = new URL(`/data`, window.location.href).href;
// let minmaxQuery = `${baseUrl}/query/${table}?columns=${`min(yeartrimes), max(yeartrimes)`}`; // let minmaxQuery = `${baseUrl}/query/${table}?columns=${`min(yeartrimes), max(yeartrimes)`}`;
// let areaQuery = `${baseUrl}/query/${table}?columns=${`yeartrimes,area`}`; // let areaQuery = `${baseUrl}/query/${table}?columns=${`yeartrimes,area`}`;
/* d3.json(areaQuery).then(minmax => { /* d3.json(areaQuery).then(minmax => {
// resolve(minmax[0]); // resolve(minmax[0]);
});*/ });*/
// }); // });
...@@ -38,126 +38,139 @@ am4core.ready(function() { ...@@ -38,126 +38,139 @@ am4core.ready(function() {
// Add data // Add data
chart.data = [{ chart.data = [{
"date": "2014-06-30", "date": "2014-06-30",
"area": 15412732.6, "area": 15412733,
"cum_area": 15412732.6, "cum_area": 15412733,
"delta": 0 "delta": 3.69,
"inc": 0
}, { }, {
"date": "2014-09-30", "date": "2014-09-30",
"area": 4732329.07, "area": 4732329,
"cum_area": 20145061.67, "cum_area": 20145062,
"delta": 31 "delta": 1.13, //31
"inc": 30.70
}, { }, {
"date": "2014-12-31", "date": "2014-12-31",
"area": 7162111.485, "area": 7162111,
"cum_area": 27307173.15, "cum_area": 27307173,
"delta": 36 "delta": 1.72, //36
"inc": 35.55
}, { }, {
"date": "2015-03-31", "date": "2015-03-31",
"area": 6092156.55, "area": 6155929,
"cum_area": 33399329.7, "cum_area": 33463102,
"delta": 22 "delta": 1.48, //22
"inc": 22.54
}, { }, {
"date": "2015-06-30", "date": "2015-06-30",
"area": 15920921.92, "area": 15920922,
"cum_area": 49320251.62, "cum_area": 49384024,
"delta": 48 "delta": 3.82, //48
"inc": 47.58
}, { }, {
"date": "2015-09-30", "date": "2015-09-30",
"area": 9240033.81, "area": 9240034,
"cum_area": 58560285.43, "cum_area": 58624058,
"delta": 19 "delta": 2.21, //19
"inc": 18.71
}, { }, {
"date": "2015-12-31", "date": "2015-12-31",
"area": 8401142.98, "area": 8337370,
"cum_area": 66961428.41, "cum_area": 66961428,
"delta": 14 "delta": 2, //14
"inc": 14.22
}, { }, {
"date": "2016-03-31", "date": "2016-03-31",
"area": 8074638.35,//3, "area": 8470320, //3,
"cum_area": 75036066.76, "cum_area": 75431748,
"delta": 12 "delta": 2.03, //12
}, { "inc": 12.65
"date": "2016-06-30",
"area": 122507.39,//55,
"cum_area": 75158574.16,
"delta": 0
}, { }, {
"date": "2016-09-30", "date": "2016-09-30",
"area": 25938802.55, "area": 25938803, //55,
"cum_area": 101097376.7, "cum_area": 101370551,
"delta": 35 "delta": 6.22,
"inc": 34.39
}, { }, {
"date": "2016-12-31", "date": "2016-12-31",
"area": 8390046.92, "area": 8116873,
"cum_area": 109487423.6, "cum_area": 109487424,
"delta": 8 "delta": 1.95, //8
"inc": 8.01
}, { }, {
"date": "2017-03-31", "date": "2017-03-31",
"area": 7589780.379, "area": 7775210,
"cum_area": 117077204, "cum_area": 117262634,
"delta": 7 "delta": 1.86, //7
"inc": 7.10
}, { }, {
"date": "2017-06-30", "date": "2017-06-30",
"area": 47964.71,//734, "area": 47965, //734,
"cum_area": 117125168.7, "cum_area": 117310599,
"delta": 0 "delta": 0.01, //0
"inc": 0.04
}, { }, {
"date": "2017-09-30", "date": "2017-09-30",
"area": 28417421.7, "area": 28417422,
"cum_area": 145542590.4, "cum_area": 145728020,
"delta": 24 "delta": 6.81, //24
"inc": 24.22
}, { }, {
"date": "2017-12-31", "date": "2017-12-31",
"area": 8770996.298, "area": 8585566,
"cum_area": 154313586.7, "cum_area": 154313587,
"delta": 6 "delta": 2.06, //6
}, /*{ "inc": 5.89
}, {
"date": "2018-03-31", "date": "2018-03-31",
"area": 0, "area": 184379,
"cum_area": 0, "cum_area": 154497966,
"delta": 0 "delta": 0.04,
},*/ { "inc": 0.12
}, {
"date": "2018-06-30", "date": "2018-06-30",
"area": 10867609.97, "area": 10867610,
"cum_area": 165181196.7, "cum_area": 165365576,
"delta": 7 "delta": 2.60,
"inc": 7.03
}, { }, {
"date": "2018-09-30", "date": "2018-09-30",
"area": 49281520.15, "area": 49281520,
"cum_area": 214462716.8, "cum_area": 214647096,
"delta": 30 "delta": 11.81,
"inc": 29.8
}, { }, {
"date": "2018-12-31", "date": "2018-12-31",
"area": 33658169.408, "area": 33473790,
"cum_area": 248120886.2, "cum_area": 248120886,
"delta": 16 "delta": 8.02,
"inc": 15.59
}, { }, {
"date": "2019-03-31", "date": "2019-03-31",
"area": 59364663.86, "area": 59364664,
"cum_area": 307485550.1, "cum_area": 307485550,
"delta": 24 "delta": 14.24,
"inc": 23.93
}, { }, {
"date": "2019-06-30", "date": "2019-06-30",
"area": 4934.68,//7186, "area": 4934.68, //7186,
"cum_area": 307490484.8, "cum_area": 307490484.8,
"delta": 0 "delta": 0,
"inc": 0
}, { }, {
"date": "2019-09-30", "date": "2019-09-30",
"area": 109814786.2, "area": 109821476,
"cum_area": 417305271,
"delta": 36
}, {
"date": "2019-12-31",
"area": 6689.99,//5409,
"cum_area": 417311961, "cum_area": 417311961,
"delta": 0 "delta": 26.32,
}/*,{ "inc": 35.72
}
/*,{
"date": "2013-01-30", "date": "2013-01-30",
"market1": 81, "market1": 81,
"market2": 85, "market2": 85,
"sales1": 4, "sales1": 4,
"sales2": 7 "sales2": 7
}*/]; }*/
];
// Create axes // Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
...@@ -165,73 +178,76 @@ am4core.ready(function() { ...@@ -165,73 +178,76 @@ am4core.ready(function() {
//dateAxis.renderer.minGridDistance = 30; //dateAxis.renderer.minGridDistance = 30;
var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis()); var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis1.title.text = "Area Ocupada";//"Sales"; valueAxis1.title.text = "Area Ocupada"; //"Sales";
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis()); var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.title.text = "Incremento Porcentual"//"Market Days"; valueAxis2.title.text = "Incremento Porcentual" //"Market Days";
valueAxis2.renderer.opposite = true; valueAxis2.renderer.opposite = true;
valueAxis2.renderer.grid.template.disabled = true; valueAxis2.renderer.grid.template.disabled = true;
// Create series // Create series
var series1 = chart.series.push(new am4charts.ColumnSeries()); var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "area";//"sales1"; series1.dataFields.valueY = "area"; //"sales1";
series1.dataFields.dateX = "date"; series1.dataFields.dateX = "date";
series1.yAxis = valueAxis1; series1.yAxis = valueAxis1;
series1.name = "Area ocupada trimestral";//"Target Sales"; series1.name = "Area"; //"Target Sales";
series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}";//M[/]"; series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}"; //M[/]";
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(40); series1.columns.template.width = am4core.percent(40);
var series2 = chart.series.push(new am4charts.ColumnSeries()); var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "cum_area";//"sales2"; series2.dataFields.valueY = "cum_area"; //"sales2";
series2.dataFields.dateX = "date"; series2.dataFields.dateX = "date";
series2.yAxis = valueAxis1; series2.yAxis = valueAxis1;
series2.name = "Area acumulada total";//"Actual Sales"; series2.name = "Area acumulada"; //"Actual Sales";
series2.tooltipText = "{name}\n[bold font-size: 20]{valueY}";//M[/]"; series2.tooltipText = "{name}\n[bold font-size: 20]{valueY}"; //M[/]";
series2.fill = chart.colors.getIndex(0).lighten(0.5); series2.fill = chart.colors.getIndex(0).lighten(0.5);
series2.strokeWidth = 0; series2.strokeWidth = 0;
series2.clustered = false; series2.clustered = false;
series2.toBack(); series2.toBack();
var series3 = chart.series.push(new am4charts.LineSeries()); var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "delta";//"market1"; series3.dataFields.valueY = "delta"; //"market1";
series3.dataFields.dateX = "date"; series3.dataFields.dateX = "date";
series3.name = "Incremento respecto al area acumulada";//"Market Days"; series3.name = "Relativa"; //"Market Days";
series3.strokeWidth = 2; series3.strokeWidth = 2;
series3.tensionX = 0.7; series3.tensionX = 0.7;
series3.stroke = am4core.color("#A91B0D"); series3.stroke = am4core.color("#844685");
series3.strokeDasharray = "3,3"; series3.strokeDasharray = "3,3";
series3.yAxis = valueAxis2; series3.yAxis = valueAxis2;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}\%[/]"; series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}\%[/]";
series3.tooltip.getFillFromObject = false; series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#A91B0D"); series3.tooltip.background.fill = am4core.color("#844685");
var bullet3 = series3.bullets.push(new am4charts.CircleBullet()); var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
bullet3.circle.radius = 3; bullet3.circle.radius = 3;
bullet3.circle.strokeWidth = 2; bullet3.circle.strokeWidth = 2;
bullet3.circle.fill = am4core.color("#fff"); bullet3.circle.fill = am4core.color("#fff");
bullet3.circle.stroke = am4core.color("#A91B0D"); bullet3.circle.stroke = am4core.color("#844685");
/*
var series4 = chart.series.push(new am4charts.LineSeries()); var series4 = chart.series.push(new am4charts.LineSeries());
series4.dataFields.valueY = "market2"; series4.dataFields.valueY = "inc";
series4.dataFields.dateX = "date"; series4.dataFields.dateX = "date";
series4.name = "Market Days ALL"; series4.name = "Incremento trimestral";
series4.strokeWidth = 2; series4.strokeWidth = 2;
series4.tensionX = 0.7; series4.tensionX = 0.7;
series4.stroke = am4core.color("#FAFA0F");
series4.yAxis = valueAxis2; series4.yAxis = valueAxis2;
series4.tooltipText = "{name}\n[bold font-size: 20]{valueY}[/]"; series4.tooltipText = "{name}\n[bold font-size: 20]{valueY}\%[/]";
series4.stroke = chart.colors.getIndex(0).lighten(0.5); //series4.stroke = chart.colors.getIndex(0).lighten(0.5);
series4.strokeDasharray = "3,3"; series4.strokeDasharray = "3,3"
series4.tooltip.getFillFromObject = false;
series4.tooltip.background.fill = am4core.color("#FACA0F");;
var bullet4 = series4.bullets.push(new am4charts.CircleBullet()); var bullet4 = series4.bullets.push(new am4charts.CircleBullet());
bullet4.circle.radius = 3; bullet4.circle.radius = 3;
bullet4.circle.strokeWidth = 2; bullet4.circle.strokeWidth = 2;
bullet4.circle.fill = am4core.color("#fff"); bullet4.circle.fill = am4core.color("#fff");
*/ bullet4.circle.stroke = am4core.color("#FACA0F");
// Add cursor // Add cursor
chart.cursor = new am4charts.XYCursor(); chart.cursor = new am4charts.XYCursor();
...@@ -246,4 +262,57 @@ am4core.ready(function() { ...@@ -246,4 +262,57 @@ am4core.ready(function() {
chart.scrollbarX.parent = chart.bottomAxesContainer; chart.scrollbarX.parent = chart.bottomAxesContainer;
var piechart = am4core.create("perimeter-graph", am4charts.PieChart);
let title = piechart.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);
// Add and configure Series
var pieSeries = piechart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "area";
pieSeries.dataFields.category = "year";
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 0.1;
pieSeries.slices.template.strokeOpacity = 1;
pieSeries.colors.list = [
am4core.color("#313695"),
am4core.color("#4575B4"),
am4core.color("#E0F3F8"),
am4core.color("#FFFFBF"),
am4core.color("#F46D43"),
am4core.color("#A50026")
];
// 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
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