Skip to content

F
fordecyt_2019
Commit 4b3219fd authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Improve radar chart ceation

parent 4643d048
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 201 deletions
public/js/cuerpos_charts.js
View file @ 4b3219fd
......@@ -6,6 +6,7 @@
*/
/* globals updateBarChart, barChartData, am4charts, am4core, am4themes_animated */
/* export makeRadialChart */
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function grijalva_theme(target) {
......@@ -35,15 +36,10 @@ function customizeGrip(grip) {
img.valign = "middle";
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ RADAR- LINES
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
am4core.useTheme(grijalva_theme);
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// Themes end
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// radial chart
const makeRadialChart = (data, months, years) => {
var radialChart = am4core.create("radial_chart", am4charts.RadarChart);
let radialTitle = radialChart.titles.create();
......@@ -52,13 +48,11 @@ am4core.ready(function() {
radialTitle.marginBottom = 10;
radialTitle.fill = am4core.color(mainTextColor);
var radialData = [];
radialChart.data = radialData;
//console.log(data);
radialChart.data = data;
/* Create axes */
//var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
var radialCategoryAxis = radialChart.xAxes.push(new am4charts.CategoryAxis());
let radialCategoryAxis = radialChart.xAxes.push(new am4charts.CategoryAxis());
radialCategoryAxis.dataFields.category = "month";
radialCategoryAxis.fontSize = 9;
radialCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
......@@ -75,48 +69,23 @@ am4core.ready(function() {
//radialValueAxis.renderer.labels.template.fontSize = 15;
/* Create and configure series */
//TODO: make these series in a more efficient way
var radialSeries1 = radialChart.series.push(new am4charts.RadarSeries());
radialSeries1.dataFields.valueY = "value1";
radialSeries1.dataFields.categoryX = "month" //"date";
radialSeries1.strokeWidth = 1.5;
radialSeries1.tooltipText = "{valueY}";
radialSeries1.name = "2016"
radialSeries1.stroke = am4core.color("#F98293"); // red
radialSeries1.tooltip.getFillFromObject = false;
radialSeries1.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
radialSeries1.tooltip.background.fill = am4core.color("#F98293");
//radialSeries1.bullets.create(am4charts.CircleBullet);
//radialSeries1.dataItems.template.locations.dateX = 0.5;
var radialSeries2 = radialChart.series.push(new am4charts.RadarSeries());
radialSeries2.dataFields.valueY = "value2";
radialSeries2.dataFields.categoryX = "month"; //"date";
radialSeries2.strokeWidth = 1.5;
radialSeries2.tooltipText = "{valueY}";
radialSeries2.name = "2017";
radialSeries2.stroke = am4core.color("#2AC2BB"); // red
radialSeries2.tooltip.getFillFromObject = false;
//radialSeries2.tooltip.background.fill = am4core.color("#");
radialSeries2.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
radialSeries2.tooltip.background.fill = am4core.color("#2AC2BB"); // red
//radialSeries2.tooltip.background.fill = am4core.
//radialSeries2.bullets.create(am4charts.CircleBullet);
//radialSeries2.dataItems.template.locations.dateX = 0.5;
var radialSeries3 = radialChart.series.push(new am4charts.RadarSeries());
radialSeries3.dataFields.valueY = "value3";
radialSeries3.dataFields.categoryX = "month"; //"date";
radialSeries3.strokeWidth = 1.5;
radialSeries3.tooltipText = "{valueY}";
radialSeries3.name = "2018";
radialSeries3.stroke = am4core.color("#FDA259"); // red
radialSeries3.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
radialSeries3.tooltip.getFillFromObject = false;
radialSeries3.tooltip.background.fill = am4core.color("#FDA259");
//radialSeries2.bullets.create(am4charts.CircleBullet);
//radialSeries3.dataItems.template.locations.X = 0.5;
const createRadialSeries = (chart, value, category, name, color) => {
let radialSeries = chart.series.push(new am4charts.RadarSeries());
radialSeries.dataFields.valueY = value;
radialSeries.dataFields.categoryX = category;
radialSeries.strokeWidth = 1.5;
radialSeries.tooltipText = "{valueY}";
radialSeries.name = name
radialSeries.stroke = am4core.color(color); // red
radialSeries.tooltip.getFillFromObject = false;
radialSeries.tooltipText = "[bold] {name}: [/]{valueY.formatNumber('#,###.0')} Ha[/]";
radialSeries.tooltip.background.fill = am4core.color(color);
}
let seriesColor = ["#F98293", "#2AC2BB", "#FDA259"];
years.forEach( (year, i) => {
createRadialSeries(radialChart, year, "month", year, seriesColor[i]);
});
radialChart.scrollbarX = new am4core.Scrollbar();
radialChart.scrollbarX.minHeight = 1;
......@@ -128,94 +97,22 @@ am4core.ready(function() {
customizeGrip(radialChart.scrollbarY.startGrip);
customizeGrip(radialChart.scrollbarY.endGrip);
//TODO: make these ranges in a more efficient way
var range_estiaje = radialCategoryAxis.axisRanges.create();
range_estiaje.category = "March";
range_estiaje.endcategory = "April";
range_estiaje.axisFill.fill = am4core.color("#595952");
//range_estiaje.axisFill.fill = am4core.color("#DFA34D");
range_estiaje.axisFill.fillOpacity = 0.4;
range_estiaje.grid.strokeOpacity = 0;
var range_estiaje_1 = radialCategoryAxis.axisRanges.create();
range_estiaje_1.category = "April";
range_estiaje_1.endcategory = "May";
range_estiaje_1.axisFill.fill = am4core.color("#595952");
//range_estiaje_1.axisFill.fill = am4core.color("#DFA34D");
range_estiaje_1.axisFill.fillOpacity = 0.4;
range_estiaje_1.grid.strokeOpacity = 0;
var range_lluvTropical = radialCategoryAxis.axisRanges.create();
range_lluvTropical.category = "May";
range_lluvTropical.endcategory = "June";
//range_lluvTropical.date = new Date(2020, 4, 1);
//range_lluvTropical.endDate = new Date(2020, 8, 1);
range_lluvTropical.axisFill.fill = am4core.color("#838278");
range_lluvTropical.axisFill.fillOpacity = 0.4;
range_lluvTropical.grid.strokeOpacity = 0;
var range_lluvTropical_1 = radialCategoryAxis.axisRanges.create();
range_lluvTropical_1.category = "June";
range_lluvTropical_1.endcategory = "July";
range_lluvTropical_1.axisFill.fill = am4core.color("#838278");
range_lluvTropical_1.axisFill.fillOpacity = 0.4;
range_lluvTropical_1.grid.strokeOpacity = 0;
var range_lluvTropical_2 = radialCategoryAxis.axisRanges.create();
range_lluvTropical_2.category = "July";
range_lluvTropical_2.endcategory = "August";
range_lluvTropical_2.axisFill.fill = am4core.color("#838278");
range_lluvTropical_2.axisFill.fillOpacity = 0.4;
range_lluvTropical_2.grid.strokeOpacity = 0;
var range_lluvTropical_3 = radialCategoryAxis.axisRanges.create();
range_lluvTropical_3.category = "August";
range_lluvTropical_3.endcategory = "September";
range_lluvTropical_3.axisFill.fill = am4core.color("#838278");
range_lluvTropical_3.axisFill.fillOpacity = 0.4;
range_lluvTropical_3.grid.strokeOpacity = 0;
var range_lluvTropicalInv = radialCategoryAxis.axisRanges.create();
range_lluvTropicalInv.category = "September";
range_lluvTropicalInv.endcategory = "October";
range_lluvTropicalInv.axisFill.fill = am4core.color("#B1AE9F");
range_lluvTropicalInv.axisFill.fillOpacity = 0.4;
range_lluvTropicalInv.grid.strokeOpacity = 0;
var range_lluvTropicalInv_1 = radialCategoryAxis.axisRanges.create();
range_lluvTropicalInv_1.category = "October";
range_lluvTropicalInv_1.endcategory = "November";
range_lluvTropicalInv_1.axisFill.fill = am4core.color("#B1AE9F");
range_lluvTropicalInv_1.axisFill.fillOpacity = 0.4;
range_lluvTropicalInv_1.grid.strokeOpacity = 0;
var range_lluvTropicalInv_2 = radialCategoryAxis.axisRanges.create();
range_lluvTropicalInv_2.category = "November";
range_lluvTropicalInv_2.endcategory = "December";
range_lluvTropicalInv_2.axisFill.fill = am4core.color("#B1AE9F");
range_lluvTropicalInv_2.axisFill.fillOpacity = 0.4;
range_lluvTropicalInv_2.grid.strokeOpacity = 0;
var range_lluvInv = radialCategoryAxis.axisRanges.create();
range_lluvInv.category = "December";
range_lluvInv.endcategory = "January";
range_lluvInv.axisFill.fill = am4core.color("#E1DBC8");
range_lluvInv.axisFill.fillOpacity = 0.4;
range_lluvInv.grid.strokeOpacity = 0;
var range_lluvInv_1 = radialCategoryAxis.axisRanges.create();
range_lluvInv_1.category = "January";
range_lluvInv_1.endcategory = "February";
range_lluvInv_1.axisFill.fill = am4core.color("#E1DBC8");
range_lluvInv_1.axisFill.fillOpacity = 0.4;
range_lluvInv_1.grid.strokeOpacity = 0;
var range_lluvInv_2 = radialCategoryAxis.axisRanges.create();
range_lluvInv_2.category = "February";
range_lluvInv_2.endcategory = "March";
range_lluvInv_2.axisFill.fill = am4core.color("#E1DBC8");
range_lluvInv_2.axisFill.fillOpacity = 0.4;
range_lluvInv_2.grid.strokeOpacity = 0;
const makeRadialRange = (start, end, color, span) => {
let radialRange = radialCategoryAxis.axisRanges.create();
radialRange.category = start;
radialRange.endcategory = end;
radialRange.axisFill.fill = am4core.color(color);
radialRange.axisFill.fillOpacity = 0.4;
radialRange.grid.strokeOpacity = 0;
radialRange.locations.endCategory = span ? span : "";
}
let radialRangeColors = ["#E1DBC8", "#595952", "#838278", "#B1AE9F"];
makeRadialRange("enero", "marzo", radialRangeColors[0], 2);
makeRadialRange("marzo", "mayo", radialRangeColors[1], 2);
makeRadialRange("mayo", "septiembre", radialRangeColors[2], 4);
makeRadialRange("septiembre", "diciembre", radialRangeColors[3], 3);
makeRadialRange("diciembre", "diciembre", radialRangeColors[0], 1);
radialChart.cursor = new am4charts.RadarCursor();
......@@ -228,7 +125,6 @@ am4core.ready(function() {
{ name: "Tropical", fill: am4core.color("#838278") },
{ name: "Tropical-Invernal", fill: am4core.color("#B1AE9F") },
{ name: "Invernal", fill: am4core.color("#E1DBC8") }
];
radialChart.legend.data = legenddata;
......@@ -237,6 +133,14 @@ am4core.ready(function() {
var markerTemplate = radialChart.legend.markers.template;
markerTemplate.width = 20;
markerTemplate.height = 20;
}
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
am4core.useTheme(grijalva_theme);
//let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
// Themes end
// linea chart
let lineChart = am4core.create("linesChart", am4charts.XYChart);
......
public/js/cuerpos_functions.js
View file @ 4b3219fd
......@@ -5,8 +5,8 @@
* January 2021
*/
/* globals omnivore, Promise, makeBaseMap, am4core */
/* exported. userFiles, userDates, timeParse, layerControl */
/* globals omnivore, Promise, makeBaseMap, am4core, makeRadialChart */
/* exported. userFiles, userDates, timeParse, layerControl, yearList */
let timeParse,
timeFormat,
......@@ -282,72 +282,47 @@ const setupMap = (dates) => {
});
}
let barChartData = [];
let barChartData = [],
yearList;
const populateMap = async(mapData) => {
let baseUrl = new URL(`/data`, window.location.href).href;
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ RADIAL CHART
let data = []; // empty array to hold chart data
// get am chart
let radialChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
// RADIAL CHART
// get am chart - may need this to update chart on date change
//let radialChart = am4core.registry.baseSprites.find(c => c.htmlContainer.id === "radial_chart");
// async queries for each date that has been loaded
const queries = userFiles.map(async(mes, i) => {
//let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1,sum(perimcpo) value2, sum(dimfrcpo) value3`;
let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 value1`;
let query = `${baseUrl}/query/${mes}?columns=sum(areacpo)/10000 area`;
const queryData = await d3.json(query);
let date = new Date(dateArray[i]);
queryData[0].date = date;
data.push(queryData[0]);
queryData[0].date = new Date(userDates[i])
return new Promise(resolve => {
resolve(queryData[0]);
});
});
// wait for all queries to complete and then set chart data
Promise.all(queries).then( data => {
// create sets of unique months and years
yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))];
//let formatter = new Intl.DateTimeFormat('es', { month: 'long' });
// TODO: maybe make this a function so it can be used to update chart when changing dates
let chartaData = [];
monthArray.forEach( (month, index) => {
let element = {};
yearList.forEach( year => {
//element.month = formatter.format(new Date(year, month, 1, 0, 0, 0));
element.month = month.toLowerCase();
let yearData = data.filter(d => new Date(d.date).getMonth() == index && new Date(d.date).getFullYear() == year);
element[year] = yearData.length > 0 ? yearData[0].area : null;
});
chartaData.push(element);
});
makeRadialChart(chartaData, monthArray, yearList);
});
// wait for all queries to complete
const dataQueries = await Promise.all(queries);
// and then set chart data
let data_1 = data;
data_1.sort((a, b) => (a.date > b.date) ? 1 : -1)
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var year = new Array();
year[116] = "2016";
year[117] = "2017";
year[118] = "2018";
let cc;
for (cc = 0; cc < data_1.length; cc++) {
data_1[cc].mm = month[(data_1[cc].date).getMonth()];
data_1[cc].yy = year[(data_1[cc].date).getYear()];
}
// TODO: check this for loop to use selected months and years
var element = {},
cart = [],
cntr;
for (cntr = 0; cntr < 12; cntr++) {
//console.log(month[cntr]);
element = {};
element.month = (month[cntr]).toString();
element.value1 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2016 }))[0].value1;
element.value2 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2017 }))[0].value1;
element.value3 = (data_1.filter(function(d) { return d.mm == month[cntr] && d.yy == 2018 }))[0].value1;
cart.push(element);
}
radialChart.data = cart;
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ LINE CHART
let data_ls = [];
......
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