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
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 166 deletions
public/centropais/index.html
View file @ 0060eec9
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<div class="d-flex flex-column" id="mainContainer"> <div class="d-flex flex-column" id="mainContainer">
<!--<header class="page-header py-2">--> <!--<header class="page-header py-2">-->
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="." aria-label="Regresar"><i class="fas fa-arrow-left"></i></a> <a class="navbar-brand mr-0 mr-md-2" href="." aria-label="Regresar"><i class="fas fa-arrow-left"></i></a>
<!--<div class="container text-center">--> <!--<div class="container text-center">-->
<div class="navbar-nav mx-auto"> <div class="navbar-nav mx-auto">
...@@ -107,7 +107,9 @@ ...@@ -107,7 +107,9 @@
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div id="perimeter-graph"></div> <div class="row h-100">
<div id="perimeter-graph"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -168,7 +170,7 @@ ...@@ -168,7 +170,7 @@
<script src="../js/Leaflet.Sync.js"></script> <script src="../js/Leaflet.Sync.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>--> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>-->
<script src="../js/jszip.min.js"></script> <script src="../js/jszip.min.js"></script>
<!-- load animation tweening lib requirement for CanvasFlowMapLayer --> <!-- load animation tweening lib requirement for CanvasFlowMapLayer -->
<script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script> <script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script>
<script src="../js/CanvasFlowmapLayer.js"></script> <script src="../js/CanvasFlowmapLayer.js"></script>
...@@ -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,11 +21,11 @@ let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-co ...@@ -21,11 +21,11 @@ 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]);
});*/ });*/
// }); // });
//} //}
...@@ -37,213 +37,282 @@ am4core.ready(function() { ...@@ -37,213 +37,282 @@ 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", }, {
"area": 4732329.07, "date": "2014-09-30",
"cum_area": 20145061.67, "area": 4732329,
"delta": 31 "cum_area": 20145062,
}, { "delta": 1.13, //31
"date": "2014-12-31", "inc": 30.70
"area": 7162111.485, }, {
"cum_area": 27307173.15, "date": "2014-12-31",
"delta": 36 "area": 7162111,
}, { "cum_area": 27307173,
"date": "2015-03-31", "delta": 1.72, //36
"area": 6092156.55, "inc": 35.55
"cum_area": 33399329.7, }, {
"delta": 22 "date": "2015-03-31",
}, { "area": 6155929,
"date": "2015-06-30", "cum_area": 33463102,
"area": 15920921.92, "delta": 1.48, //22
"cum_area": 49320251.62, "inc": 22.54
"delta": 48 }, {
}, { "date": "2015-06-30",
"date": "2015-09-30", "area": 15920922,
"area": 9240033.81, "cum_area": 49384024,
"cum_area": 58560285.43, "delta": 3.82, //48
"delta": 19 "inc": 47.58
}, { }, {
"date": "2015-12-31", "date": "2015-09-30",
"area": 8401142.98, "area": 9240034,
"cum_area": 66961428.41, "cum_area": 58624058,
"delta": 14 "delta": 2.21, //19
}, { "inc": 18.71
"date": "2016-03-31", }, {
"area": 8074638.35,//3, "date": "2015-12-31",
"cum_area": 75036066.76, "area": 8337370,
"delta": 12 "cum_area": 66961428,
}, { "delta": 2, //14
"date": "2016-06-30", "inc": 14.22
"area": 122507.39,//55, }, {
"cum_area": 75158574.16, "date": "2016-03-31",
"delta": 0 "area": 8470320, //3,
}, { "cum_area": 75431748,
"date": "2016-09-30", "delta": 2.03, //12
"area": 25938802.55, "inc": 12.65
"cum_area": 101097376.7, }, {
"delta": 35 "date": "2016-09-30",
}, { "area": 25938803, //55,
"date": "2016-12-31", "cum_area": 101370551,
"area": 8390046.92, "delta": 6.22,
"cum_area": 109487423.6, "inc": 34.39
"delta": 8 }, {
}, { "date": "2016-12-31",
"date": "2017-03-31", "area": 8116873,
"area": 7589780.379, "cum_area": 109487424,
"cum_area": 117077204, "delta": 1.95, //8
"delta": 7 "inc": 8.01
}, { }, {
"date": "2017-06-30", "date": "2017-03-31",
"area": 47964.71,//734, "area": 7775210,
"cum_area": 117125168.7, "cum_area": 117262634,
"delta": 0 "delta": 1.86, //7
}, { "inc": 7.10
"date": "2017-09-30", }, {
"area": 28417421.7, "date": "2017-06-30",
"cum_area": 145542590.4, "area": 47965, //734,
"delta": 24 "cum_area": 117310599,
}, { "delta": 0.01, //0
"date": "2017-12-31", "inc": 0.04
"area": 8770996.298, }, {
"cum_area": 154313586.7, "date": "2017-09-30",
"delta": 6 "area": 28417422,
}, /*{ "cum_area": 145728020,
"date": "2018-03-31", "delta": 6.81, //24
"area": 0, "inc": 24.22
"cum_area": 0, }, {
"delta": 0 "date": "2017-12-31",
},*/ { "area": 8585566,
"date": "2018-06-30", "cum_area": 154313587,
"area": 10867609.97, "delta": 2.06, //6
"cum_area": 165181196.7, "inc": 5.89
"delta": 7 }, {
}, { "date": "2018-03-31",
"date": "2018-09-30", "area": 184379,
"area": 49281520.15, "cum_area": 154497966,
"cum_area": 214462716.8, "delta": 0.04,
"delta": 30 "inc": 0.12
}, { }, {
"date": "2018-12-31", "date": "2018-06-30",
"area": 33658169.408, "area": 10867610,
"cum_area": 248120886.2, "cum_area": 165365576,
"delta": 16 "delta": 2.60,
}, { "inc": 7.03
"date": "2019-03-31", }, {
"area": 59364663.86, "date": "2018-09-30",
"cum_area": 307485550.1, "area": 49281520,
"delta": 24 "cum_area": 214647096,
}, { "delta": 11.81,
"date": "2019-06-30", "inc": 29.8
"area": 4934.68,//7186, }, {
"cum_area": 307490484.8, "date": "2018-12-31",
"delta": 0 "area": 33473790,
}, { "cum_area": 248120886,
"date": "2019-09-30", "delta": 8.02,
"area": 109814786.2, "inc": 15.59
"cum_area": 417305271, }, {
"delta": 36 "date": "2019-03-31",
}, { "area": 59364664,
"date": "2019-12-31", "cum_area": 307485550,
"area": 6689.99,//5409, "delta": 14.24,
"cum_area": 417311961, "inc": 23.93
"delta": 0 }, {
}/*,{ "date": "2019-06-30",
"date": "2013-01-30", "area": 4934.68, //7186,
"market1": 81, "cum_area": 307490484.8,
"market2": 85, "delta": 0,
"sales1": 4, "inc": 0
"sales2": 7 }, {
}*/]; "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
}*/
];
// Create axes // Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
//dateAxis.renderer.grid.template.location = 0; //dateAxis.renderer.grid.template.location = 0;
//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();
// Add legend // Add legend
chart.legend = new am4charts.Legend(); chart.legend = new am4charts.Legend();
chart.legend.position = "top"; chart.legend.position = "top";
// Add scrollbar // Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar(); chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series1); chart.scrollbarX.series.push(series1);
chart.scrollbarX.series.push(series3); chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer; chart.scrollbarX.parent = chart.bottomAxesContainer;
}); // end am4core.ready() 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()
\ 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