Skip to content

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

update urbanization data grouped by yeartrimes

parent 2a468b2b
Show whitespace changes
Inline Side-by-side
Showing with 155 additions and 98 deletions
public/js/evolucion_urbana_charts.js
View file @ d614b02b
...@@ -11,6 +11,25 @@ let minValue, maxValue; ...@@ -11,6 +11,25 @@ let minValue, maxValue;
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color'); let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-color'); let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-color');
//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() { am4core.ready(function() {
...@@ -18,96 +37,127 @@ am4core.ready(function() { ...@@ -18,96 +37,127 @@ am4core.ready(function() {
// Add data // Add data
chart.data = [{ chart.data = [{
"date": "2013-01-16", "date": "2014-06-30",
"market1": 71, "area": 15412732.6,
"market2": 75, "cum_area": 15412732.6,
"sales1": 5, "delta": 0
"sales2": 8
}, {
"date": "2013-01-17",
"market1": 74,
"market2": 78,
"sales1": 4,
"sales2": 6
}, {
"date": "2013-01-18",
"market1": 78,
"market2": 88,
"sales1": 5,
"sales2": 2
}, {
"date": "2013-01-19",
"market1": 85,
"market2": 89,
"sales1": 8,
"sales2": 9
}, {
"date": "2013-01-20",
"market1": 82,
"market2": 89,
"sales1": 9,
"sales2": 6
}, {
"date": "2013-01-21",
"market1": 83,
"market2": 85,
"sales1": 3,
"sales2": 5
}, { }, {
"date": "2013-01-22", "date": "2014-09-30",
"market1": 88, "area": 4732329.07,
"market2": 92, "cum_area": 20145061.67,
"sales1": 5, "delta": 31
"sales2": 7
}, { }, {
"date": "2013-01-23", "date": "2014-12-31",
"market1": 85, "area": 7162111.485,
"market2": 90, "cum_area": 27307173.15,
"sales1": 7, "delta": 36
"sales2": 6 }, {
}, { "date": "2015-03-31",
"date": "2013-01-24", "area": 6092156.55,
"market1": 85, "cum_area": 33399329.7,
"market2": 91, "delta": 22
"sales1": 9, }, {
"sales2": 5 "date": "2015-06-30",
}, { "area": 15920921.92,
"date": "2013-01-25", "cum_area": 49320251.62,
"market1": 80, "delta": 48
"market2": 84, }, {
"sales1": 5, "date": "2015-09-30",
"sales2": 8 "area": 9240033.81,
}, { "cum_area": 58560285.43,
"date": "2013-01-26", "delta": 19
"market1": 87, }, {
"market2": 92, "date": "2015-12-31",
"sales1": 4, "area": 8401142.98,
"sales2": 8 "cum_area": 66961428.41,
}, { "delta": 14
"date": "2013-01-27", }, {
"market1": 84, "date": "2016-03-31",
"market2": 87, "area": 8074638.35,//3,
"sales1": 3, "cum_area": 75036066.76,
"sales2": 4 "delta": 12
}, { }, {
"date": "2013-01-28", "date": "2016-06-30",
"market1": 83, "area": 122507.39,//55,
"market2": 88, "cum_area": 75158574.16,
"sales1": 5, "delta": 0
"sales2": 7
}, { }, {
"date": "2013-01-29", "date": "2016-09-30",
"market1": 84, "area": 25938802.55,
"market2": 87, "cum_area": 101097376.7,
"sales1": 5, "delta": 35
"sales2": 8
}, { }, {
"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", "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());
...@@ -115,50 +165,57 @@ am4core.ready(function() { ...@@ -115,50 +165,57 @@ 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 = "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 = "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 = "sales1"; series1.dataFields.valueY = "area";//"sales1";
series1.dataFields.dateX = "date"; series1.dataFields.dateX = "date";
series1.yAxis = valueAxis1; series1.yAxis = valueAxis1;
series1.name = "Target Sales"; series1.name = "Area ocupada trimestral";//"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 = "sales2"; series2.dataFields.valueY = "cum_area";//"sales2";
series2.dataFields.dateX = "date"; series2.dataFields.dateX = "date";
series2.yAxis = valueAxis1; series2.yAxis = valueAxis1;
series2.name = "Actual Sales"; series2.name = "Area acumulada total";//"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 = "market1"; series3.dataFields.valueY = "delta";//"market1";
series3.dataFields.dateX = "date"; series3.dataFields.dateX = "date";
series3.name = "Market Days"; series3.name = "Incremento respecto al area acumulada";//"Market Days";
series3.strokeWidth = 2; series3.strokeWidth = 2;
series3.tensionX = 0.7; series3.tensionX = 0.7;
series3.stroke = am4core.color("#A91B0D");
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.background.fill = am4core.color("#A91B0D");
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");
/*
var series4 = chart.series.push(new am4charts.LineSeries()); var series4 = chart.series.push(new am4charts.LineSeries());
series4.dataFields.valueY = "market2"; series4.dataFields.valueY = "market2";
series4.dataFields.dateX = "date"; series4.dataFields.dateX = "date";
...@@ -174,7 +231,7 @@ am4core.ready(function() { ...@@ -174,7 +231,7 @@ am4core.ready(function() {
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");
*/
// Add cursor // Add cursor
chart.cursor = new am4charts.XYCursor(); chart.cursor = new am4charts.XYCursor();
......
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