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 @@
<div class="d-flex flex-column" id="mainContainer">
<!--<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>
<!--<div class="container text-center">-->
<div class="navbar-nav mx-auto">
......@@ -107,7 +107,9 @@
</div>
</div>
<div class="col-6">
<div id="perimeter-graph"></div>
<div class="row h-100">
<div id="perimeter-graph"></div>
</div>
</div>
</div>
</div>
......@@ -168,7 +170,7 @@
<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="../js/jszip.min.js"></script>
<!-- load animation tweening lib requirement for CanvasFlowMapLayer -->
<script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script>
<script src="../js/CanvasFlowmapLayer.js"></script>
......@@ -184,11 +186,11 @@
let script1 = document.createElement('script');
let script2 = document.createElement('script');
let script3 = document.createElement('script');
script1.src="../js/centropais_functions.js";
script1.src = "../js/centropais_functions.js";
body.appendChild(script1);
script2.src="../js/centropais_basemap.js";
script2.src = "../js/centropais_basemap.js";
body.appendChild(script2);
script3.src="../js/centropais_charts.js";
script3.src = "../js/centropais_charts.js";
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
// 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 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]);
});*/
/* d3.json(areaQuery).then(minmax => {
// resolve(minmax[0]);
});*/
// });
//}
......@@ -37,213 +37,282 @@ am4core.ready(function() {
// Add data
chart.data = [{
"date": "2014-06-30",
"area": 15412732.6,
"cum_area": 15412732.6,
"delta": 0
}, {
"date": "2014-09-30",
"area": 4732329.07,
"cum_area": 20145061.67,
"delta": 31
}, {
"date": "2014-12-31",
"area": 7162111.485,
"cum_area": 27307173.15,
"delta": 36
}, {
"date": "2015-03-31",
"area": 6092156.55,
"cum_area": 33399329.7,
"delta": 22
}, {
"date": "2015-06-30",
"area": 15920921.92,
"cum_area": 49320251.62,
"delta": 48
}, {
"date": "2015-09-30",
"area": 9240033.81,
"cum_area": 58560285.43,
"delta": 19
}, {
"date": "2015-12-31",
"area": 8401142.98,
"cum_area": 66961428.41,
"delta": 14
}, {
"date": "2016-03-31",
"area": 8074638.35,//3,
"cum_area": 75036066.76,
"delta": 12
}, {
"date": "2016-06-30",
"area": 122507.39,//55,
"cum_area": 75158574.16,
"delta": 0
}, {
"date": "2016-09-30",
"area": 25938802.55,
"cum_area": 101097376.7,
"delta": 35
}, {
"date": "2016-12-31",
"area": 8390046.92,
"cum_area": 109487423.6,
"delta": 8
}, {
"date": "2017-03-31",
"area": 7589780.379,
"cum_area": 117077204,
"delta": 7
}, {
"date": "2017-06-30",
"area": 47964.71,//734,
"cum_area": 117125168.7,
"delta": 0
}, {
"date": "2017-09-30",
"area": 28417421.7,
"cum_area": 145542590.4,
"delta": 24
}, {
"date": "2017-12-31",
"area": 8770996.298,
"cum_area": 154313586.7,
"delta": 6
}, /*{
"date": "2018-03-31",
"area": 0,
"cum_area": 0,
"delta": 0
},*/ {
"date": "2018-06-30",
"area": 10867609.97,
"cum_area": 165181196.7,
"delta": 7
}, {
"date": "2018-09-30",
"area": 49281520.15,
"cum_area": 214462716.8,
"delta": 30
}, {
"date": "2018-12-31",
"area": 33658169.408,
"cum_area": 248120886.2,
"delta": 16
}, {
"date": "2019-03-31",
"area": 59364663.86,
"cum_area": 307485550.1,
"delta": 24
}, {
"date": "2019-06-30",
"area": 4934.68,//7186,
"cum_area": 307490484.8,
"delta": 0
}, {
"date": "2019-09-30",
"area": 109814786.2,
"cum_area": 417305271,
"delta": 36
}, {
"date": "2019-12-31",
"area": 6689.99,//5409,
"cum_area": 417311961,
"delta": 0
}/*,{
"date": "2013-01-30",
"market1": 81,
"market2": 85,
"sales1": 4,
"sales2": 7
}*/];
"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
}*/
];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
//dateAxis.renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30;
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());
valueAxis2.title.text = "Incremento Porcentual"//"Market Days";
valueAxis2.title.text = "Incremento Porcentual" //"Market Days";
valueAxis2.renderer.opposite = true;
valueAxis2.renderer.grid.template.disabled = true;
// Create series
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "area";//"sales1";
series1.dataFields.valueY = "area"; //"sales1";
series1.dataFields.dateX = "date";
series1.yAxis = valueAxis1;
series1.name = "Area ocupada trimestral";//"Target Sales";
series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}";//M[/]";
series1.name = "Area"; //"Target Sales";
series1.tooltipText = "{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);
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.yAxis = valueAxis1;
series2.name = "Area acumulada total";//"Actual Sales";
series2.tooltipText = "{name}\n[bold font-size: 20]{valueY}";//M[/]";
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";
series3.dataFields.valueY = "delta"; //"market1";
series3.dataFields.dateX = "date";
series3.name = "Incremento respecto al area acumulada";//"Market Days";
series3.name = "Relativa"; //"Market Days";
series3.strokeWidth = 2;
series3.tensionX = 0.7;
series3.stroke = am4core.color("#A91B0D");
series3.stroke = am4core.color("#844685");
series3.strokeDasharray = "3,3";
series3.yAxis = valueAxis2;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}\%[/]";
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());
bullet3.circle.radius = 3;
bullet3.circle.strokeWidth = 2;
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());
series4.dataFields.valueY = "market2";
series4.dataFields.valueY = "inc";
series4.dataFields.dateX = "date";
series4.name = "Market Days ALL";
series4.name = "Incremento trimestral";
series4.strokeWidth = 2;
series4.tensionX = 0.7;
series4.stroke = am4core.color("#FAFA0F");
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.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("#FACA0F");;
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("#FACA0F");
// Add cursor
chart.cursor = new am4charts.XYCursor();
// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
// Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series1);
chart.scrollbarX.series.push(series3);
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