line chart ok

public/js/centropais_charts.js

@@ -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

@@ -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()
-
+}); // end am4core.ready()
\ No newline at end of file
-
-
-/*
-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