Chords diagram plot

public/js/centropais_charts.js

@@ -40,23 +40,23 @@ am4core.ready(function() {
         //heatLegend.minValue = minValue;
         //heatLegend.maxValue = maxValue;
         heatLegend.minValue = 0;
-        heatLegend.maxValue = intervals[option].values[intervals[option].values.length-1];
+        heatLegend.maxValue = intervals[option].values[intervals[option].values.length - 1];
 
         // update heatLegend colors
         let heatColors = [];
-        ["#333", ...intervals[option].colors].forEach( c => heatColors.push(am4core.color(c)) );
+        ["#333", ...intervals[option].colors].forEach(c => heatColors.push(am4core.color(c)));
         heatLegend.minColor = heatColors[0];
         heatLegend.maxColor = heatColors[intervals[option].colors.length - 1];
 
         //let checkConditions = [minValue, ...intervals[option].values.slice(1)];
         let checkConditions = [minValue, ...intervals[option].values];
-        let lastValue = intervals[option].values[intervals[option].values.length-1]
+        let lastValue = intervals[option].values[intervals[option].values.length - 1]
 
         // Override heatLegend gradient
         let gradient = new am4core.LinearGradient();
         heatColors.forEach(function(color, index) {
             // addColor(color, opacity, offset) use offset to put colors in proper alignment
-            gradient.addColor(color, undefined, (checkConditions[index] - checkConditions[0])/lastValue);
+            gradient.addColor(color, undefined, (checkConditions[index] - checkConditions[0]) / lastValue);
         });
 
         //heatLegend.markers.template.applyOnClones = true;
@@ -70,20 +70,20 @@ am4core.ready(function() {
             let workingValue = column.dataItem.values["value"].workingValue;
             // use min max values calculated from data on beforedatavalidated
             if (am4core.type.isNumber(workingValue)) {
-                checkConditions.forEach( (condition, index) => {
-                    if ( index < checkConditions.length-1 ) {
-                        if (workingValue >= condition && workingValue <= checkConditions[index+1]) {
+                checkConditions.forEach((condition, index) => {
+                    if (index < checkConditions.length - 1) {
+                        if (workingValue >= condition && workingValue <= checkConditions[index + 1]) {
                             //console.log(`${workingValue} entre ${condition} y ${checkConditions[index+1]}`)
                             fill = new am4core.Color(
                                 am4core.colors.interpolate(
                                     heatColors[index].rgb,
-                                    heatColors[index+1].rgb,
+                                    heatColors[index + 1].rgb,
                                     workingValue
                                 )
                             );
                             //console.log(workingValue, intervals.ocupadosDesde.colors[index])
                         } else if (workingValue < checkConditions[0]) {
-                            fill =  new am4core.color(cellbgColor);
+                            fill = new am4core.color(cellbgColor);
                         }
                     }
                 });
@@ -119,7 +119,7 @@ am4core.ready(function() {
     xAxis.events.on("sizechanged", function(ev) {
         let axis = ev.target;
         let cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
-        axis.renderer.labels.template.maxWidth = 2*Math.ceil(cellWidth)*0.8;
+        axis.renderer.labels.template.maxWidth = 2 * Math.ceil(cellWidth) * 0.8;
     });
 
     // on data change change, resize labels
@@ -127,7 +127,7 @@ am4core.ready(function() {
     xAxis.events.on("datarangechanged", function(ev) {
         let axis = ev.target;
         let cellWidth = axis.pixelWidth / (axis.endIndex - axis.startIndex);
-        axis.renderer.labels.template.maxWidth = 2*Math.ceil(cellWidth)*0.8;
+        axis.renderer.labels.template.maxWidth = 2 * Math.ceil(cellWidth) * 0.8;
     });
 
     xAxis.renderer.labels.template.fontSize = 12;
@@ -184,7 +184,7 @@ am4core.ready(function() {
     columnTemplate.adapter.add("strokeWidth", function(width, column) {
         var workingValue = column.dataItem.values["value"].workingValue;
         if (am4core.type.isNumber(workingValue)) {
-            width = workingValue != 0 ? 1: 0;
+            width = workingValue != 0 ? 1 : 0;
         }
         return width;
     });
@@ -227,8 +227,7 @@ am4core.ready(function() {
             column.strokeWidth = 2;
             column.strokeOpacity = 0.2;
             heatLegend.valueAxis.showTooltipAt(column.dataItem.value);
-        }
-        else {
+        } else {
             column.strokeWidth = 0;
             column.strokeOpacity = 0;
             heatLegend.valueAxis.hideTooltip();
@@ -246,4 +245,85 @@ am4core.ready(function() {
 
     chart.responsive.enabled = true;
 
-}); // end am4core.ready()
+    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++CC
+    // Themes begin
+    am4core.useTheme(am4themes_animated);
+    // Themes end
+
+
+
+    var cd_chart = am4core.create("prueba2", am4charts.ChordDiagram);
+
+    var cd_title = cd_chart.titles.create();
+    //cd_title.text = "Viajes de ocupados desde centros de mercado";
+    cd_title.fill = am4core.color(mainTextColor);
+    cd_title.fontSize = 13;
+    cd_title.align = "left";
+    cd_title.marginBottom = 20;
+    cd_title.paddingLeft = 10;
+
+
+    cd_chart.events.on("beforedatavalidated", function(ev) {
+        let option = $("#indicatorSelect").val();
+        let optionTitle = $("#indicatorSelect option:selected").text();
+
+        cd_title.text = "[bold]Conectividad origen -destino entre \n" + optionTitle.toLowerCase();
+
+        //var data = ev.target.data;
+        //let data = data.filter(function(e) { return e.flowCount > 0 });
+
+
+        //console.log(data);
+
+    });
+
+
+
+    cd_chart.dataFields.fromName = "xVar";
+    cd_chart.dataFields.toName = "yVar";
+    cd_chart.dataFields.value = "flowCount";
+    //cd_chart.labels.fontSize = 15;
+
+    // make nodes draggable
+    var nodeTemplate = cd_chart.nodes.template;
+    nodeTemplate.readerTitle = "Oculta/muestra para reorganizar la red"; //"Click to show/hide or drag to rearrange";
+    nodeTemplate.showSystemTooltip = true;
+
+    var nodeLink = cd_chart.links.template;
+    var bullet = nodeLink.bullets.push(new am4charts.CircleBullet());
+    bullet.fillOpacity = 0.8;
+    bullet.circle.radius = 3;
+    bullet.locationX = 0.5;
+
+    // create animations
+
+
+    cd_chart.events.on("over", function() {
+        // nodeTemplate.events.on("ready", function() {
+        for (var i = 0; i < cd_chart.links.length; i++) {
+            var link = cd_chart.links.getIndex(i);
+            var bullet = link.bullets.getIndex(0);
+
+            animateBullet(bullet);
+        }
+    })
+
+    function animateBullet(bullet) {
+        var duration = 3000 * Math.random() + 2000;
+        var animation = bullet.animate([{ property: "locationX", from: 0, to: 1 }], duration)
+        animation.events.on("animationended", function(event) {
+            animateBullet(event.target.object)
+        })
+    }
+
+    var label = nodeTemplate.label;
+    label.relativeRotation = 90;
+    label.fontSize = 10;
+    label.fill = am4core.color(mainTextColor);
+    //label.wrap = true;
+    //label.bent = true;
+
+    //cd_chart.responsive.enabled = true;
+
+
+}); // end am4core.ready()
\ No newline at end of file

public/js/evolucion_urbana_charts.js

@@ -494,4 +494,4 @@ am4core.ready(function() {
 
 
 
-}); // end am4core.ready()*/
+}); // end am4core.ready */
\ No newline at end of file