Skip to content

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

line chart ok

parent 94fcb056
Hide whitespace changes
Inline Side-by-side
Showing with 12 additions and 169 deletions
public/js/centropais_charts.js
View file @ adc64ce7
......@@ -309,8 +309,8 @@ am4core.ready(function() {
})
function animateBullet(bullet) {
var duration = 3000 * Math.random() + 2000;
var animation = bullet.animate([{ property: "locationX", from: 0, to: 1 }], duration)
var duration = cd_chart.links.length * Math.random() + 3000;
var animation = bullet.animate([{ property: "locationX", from: 0, to: 1.05 }], duration)
animation.events.on("animationended", function(event) {
animateBullet(event.target.object)
})
......@@ -323,7 +323,7 @@ am4core.ready(function() {
//label.wrap = true;
//label.bent = true;
//cd_chart.responsive.enabled = true;
cd_chart.responsive.enabled = true;
}); // end am4core.ready()
\ No newline at end of file
public/js/evolucion_urbana_charts.js
View file @ adc64ce7
......@@ -36,7 +36,7 @@ am4core.ready(function() {
// Create axes
let xAxis = chart.xAxes.push(new am4charts.DateAxis());
let xAxis = chart.xAxes.push(new am4charts.DateAxis()); //chart.xAxes.push(new am4charts.DateAxis());
xAxis.baseInterval = { timeUnit: "month", count: 1 };
xAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
xAxis.numberFormatter.numberFormat = "#,###.#";
......@@ -69,6 +69,7 @@ am4core.ready(function() {
valueAxis3.renderer.labels.template.fill = am4core.color("#b9ce37");
valueAxis3.title.fill = am4core.color("#b9ce37");
valueAxis3.min = -300;
valueAxis3.syncWithAxis = valueAxis1;
//valueAxis3.syncWithAxis = valueAxis1;
......@@ -100,7 +101,8 @@ am4core.ready(function() {
let series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "area";
series3.dataFields.valueYShow = "changePercent";
series3.dataFields.valueYShow = "previousChangePercent";
//series3.dataFields.valueX = "date";
series3.dataFields.dateX = "date";
series3.name = "Cambio Porcentual";
series3.strokeWidth = 2;
......@@ -108,7 +110,7 @@ am4core.ready(function() {
series3.stroke = am4core.color("#b9ce37");
series3.strokeDasharray = "3,3";
series3.yAxis = valueAxis3;
series3.tooltipText = "[bold font-size: 10]{dateX}:\n[font-size: 10]Área urbanizada: {valueY} Ha[/]\n[font-size: 10]Cambio: {valueY.change} Ha[/]\n[font-size: 10]{name}: {valueY.changePercent}\%[/]\n";
series3.tooltipText = "[bold font-size: 10]{dateX}:\n[font-size: 10]Área urbanizada: {valueY} Ha[/]\n[font-size: 10]Cambio: {valueY.previousChange} Ha[/]\n[font-size: 10]{name}: {valueY.previousChangePercent}\%[/]\n";
series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color(mainTextColor);
......@@ -120,10 +122,10 @@ am4core.ready(function() {
chart.legend.position = "top";
//Add scrollbar
chart.legend.labels.template.fill = am4core.color(mainTextColor);
// chart.legend.labels.template.fill = am4core.color(mainTextColor);
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series3);
chart.scrollbarX.minHeight = 10;
// chart.scrollbarX.series.push(series3);
chart.scrollbarX.minHeight = 1;
//chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer;
......@@ -335,163 +337,4 @@ am4core.ready(function() {
}); // end am4core.ready()
/*
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var rchart = am4core.create("prueba2", am4charts.RadarChart);
// chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
const baseUrl = new URL(`/data`, window.location.href).href;
let table = "urbanization_year";
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,date,DATE_PART('month',date) as mm&group=mm,date &sort=mm`;
//let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm&group=mm &sort=mm`;
let query = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,to_char(to_timestamp (date_part('month', date)::text, 'MM'), 'Month') as mm,DATE_PART('month',date) as mm1&group=mm,mm1 &sort=mm1`;
d3.json(query).then(d => rchart.data = d);
//chart.padding(20, 20, 20, 20);
// var chart = am4core.create("chartdiv", am4charts.RadarChart);
//prepareDistanceData(data);
rchart.innerRadius = am4core.percent(15);
rchart.radius = am4core.percent(90);
//chart.data = weeklyData;
rchart.fontSize = "11px";
rchart.startAngle = 180;
rchart.endAngle = rchart.startAngle + 180;
// Create axes
// var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var dateAxis = rchart.xAxes.push(new am4charts.CategoryAxis());
dateAxis.dataFields.category = "mm";
// dateAxis.baseInterval = { timeUnit: "month", count: 3 };
//dateAxis.renderer.innerRadius = am4core.percent(40);
dateAxis.renderer.minGridDistance = 5;
dateAxis.renderer.labels.template.relativeRotation = 0;
dateAxis.renderer.labels.template.location = 0.5;
dateAxis.renderer.labels.template.radius = am4core.percent(-57);
dateAxis.renderer.labels.template.fontSize = "8px";
dateAxis.renderer.labels.template.fill = am4core.color("#ffffff");
// dateAxis.dateFormats.setKey("month", "MMM");
// dateAxis.periodChangeDateFormats.setKey("month", "MMM");
dateAxis.cursorTooltipEnabled = false;
// dateAxis.calculateTotals = true;
var valueAxis = rchart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true;
valueAxis.renderer.radius = am4core.percent(40);
valueAxis.renderer.minGridDistance = 15;
valueAxis.renderer.minLabelPosition = 0.05;
//valueAxis.renderer.axisAngle = 90;
valueAxis.renderer.axisAngle = 90;
valueAxis.cursorTooltipEnabled = false;
valueAxis.renderer.labels.template.fill = am4core.color("#ffffff");
// valueAxis.calculateTotals = true;
//Add series
var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
// columnSeries.dataFields.dateX = "date";
columnSeries.dataFields.categoryX = "mm"; //date
columnSeries.dataFields.valueY = "area";
// columnSeries.dataFields.valueYShow = "sum";
columnSeries.columns.template.strokeOpacity = 0;
columnSeries.columns.template.width = am4core.percent(95);
columnSeries.fill = am4core.color("#ffffff");
columnSeries.fillOpacity = 0.6;
columnSeries.tooltip.fontSize = 10;
columnSeries.tooltip.pointerOrientation = "down";
columnSeries.tooltip.background.fillOpacity = 0.5;
columnSeries.columns.template.tooltipText = "[bold]{mm} \n[font-size:13px]Total {valueY.formatNumber('#,###.0')} Ha";
columnSeries.cursorTooltipEnabled = false;
//columnSeries.yAxis = dateAxis;
let yearsAxis = rchart.yAxes.push(new am4charts.CategoryAxis());
let bubbleSeries = rchart.series.push(new am4charts.RadarSeries());
//let queryYYYY = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,DATE_PART('year',date) as yy,date&group=yy,mm,date &sort=yy,mm`;
let queryYYYY = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,to_char(to_timestamp (date_part('month', date)::text, 'MM'), 'Month') as mm,DATE_PART('year',date) as yy,date&group=yy,mm,date &sort=date`;
d3.json(queryYYYY).then(d => {
yearsAxis.data = d
bubbleSeries.data = d;
});
// weekday axis
//var weekDayAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yearsAxis.dataFields.category = "yy";
//yearsAxis.data = dailyData;
yearsAxis.renderer.innerRadius = am4core.percent(50);
yearsAxis.renderer.minGridDistance = 10;
yearsAxis.renderer.grid.template.location = 0;
yearsAxis.renderer.grid.template.stroke = am4core.color("#ffffff");;
yearsAxis.renderer.line.disabled = true;
yearsAxis.renderer.axisAngle = 270;
yearsAxis.cursorTooltipEnabled = false;
yearsAxis.renderer.labels.template.fill = am4core.color("#ffffff");
// bubble series
//var bubbleSeries = chart.series.push(new am4charts.RadarSeries());
bubbleSeries.dataFields.categoryX = "mm";
bubbleSeries.dataFields.categoryY = "yy";
bubbleSeries.dataFields.value = "area";
bubbleSeries.yAxis = yearsAxis;
//bubbleSeries.data = dailyData;
bubbleSeries.strokeOpacity = 0;
bubbleSeries.maskBullets = false;
bubbleSeries.cursorTooltipEnabled = false;
bubbleSeries.tooltip.fontSize = 10;
bubbleSeries.tooltip.pointerOrientation = "down";
bubbleSeries.tooltip.background.fillOpacity = 0.5;
bubbleSeries.dataItems.template.locations.categoryX = 0.5;
var bubbleBullet = bubbleSeries.bullets.push(new am4charts.CircleBullet())
bubbleBullet.locationX = 0.5;
bubbleBullet.stroke = am4core.color("#b9ce37");
bubbleBullet.fill = am4core.color("#b9ce37");
bubbleBullet.tooltipText = "[bold]{date.formatDate('yyyy-MMM')}: \n{value.formatNumber('#,###.0')} Ha";
bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) {
return -target.circle.radius;
})
bubbleSeries.heatRules.push({ target: bubbleBullet.circle, min: 2, max: 12, dataField: "value", property: "radius" });
bubbleSeries.dataItems.template.locations.categoryY = 0.5;
// TITULOS MISCELANEOS
rchart.cursor = new am4charts.RadarCursor();
rchart.cursor.innerRadius = am4core.percent(40);
rchart.cursor.lineY.disabled = true;
var label = rchart.radarContainer.createChild(am4core.Label);
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fill = am4core.color("#ffffff");
label.fontSize = 12;
//label.fontWeight = "bold";
label.text = "TOTAL\nTRIMESTRAL";
var title = rchart.createChild(am4core.Label);
title.fill = am4core.color("#b9ce37");
title.fontSize = 20;
title.isMeasured = false;
title.valign = "top";
title.align = "left";
title.wrap = true;
title.width = 200;
title.text = "[bold]Área urbanizada entre 2014 y 2019.\n[font-size:11; #ffffff] Cada círculo representa el tamaño del área urbanizada.";
}); // end am4core.ready */
\ No newline at end of file
}); // 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