0

Estoy tratando de utilizar

https://www.highcharts.com/docs/chart-and-series-types/organization-chart

Para graficar el organigrama de empresas que se registran en mi base de datos. Obtengo las áreas que conforman la empresa de la manera en que se supone que debe ser:

Estando el par compuesto por: [area padre, area hijo] [["INICIO","area 2"],["area 2","area 21"],["INICIO","area 4"],["area 2","area 22"],["area 4","area 41"],["area 21","area 31"],["area 31","area 331"],["area 41","area 441"]]

    $(document).ready(function(){

        var datoss = getdatos();
        
        Highcharts.chart('container', {
        chart: {
            height: 600,
            inverted: true
        },

        title: {
            text: 'Organigrama'
        },

        accessibility: {
            point: {
                descriptionFormatter: function (point) {
                    var nodeName = point.toNode.name,
                        nodeId = point.toNode.id,
                        nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
                        parentDesc = point.fromNode.id;
                    return point.index + '. ' + nodeDesc + ', reporta a ' + parentDesc + '.';
                }
            }
        },

    series: [{
        type: 'organization',
        name: 'Highsoft',
        keys: ['from', 'to'],
        data: datoss,
        /* [
            //['INICIO','area 2'],['area 2','area 21'],['INICIO','area 4'],['area 2','area 22'],['area 4','area 41'],['area 21','area 31'],['area 31','area 331'],['area 41','area 441']
            ], */
        levels: [{
            level: 0,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 2,
            color: '#980104'
        }, {
            level: 4,
            color: '#359154'
        }],
        nodes: [{
            id: 'Shareholders'
        }, {
            id: 'Board'
        }, {
            id: 'CEO',
            title: 'CEO',
            name: 'Grethe Hjetland',
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131126/Highsoft_03862_.jpg'
        }, {
            id: 'HR',
            title: 'HR/CFO',
            name: 'Anne Jorunn Fjærestad',
            color: '#007ad0',
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131210/Highsoft_04045_.jpg'
        }, {
            id: 'CTO',
            title: 'CTO',
            name: 'Christer Vasseng',
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131120/Highsoft_04074_.jpg'
        }, {
            id: 'CPO',
            title: 'CPO',
            name: 'Torstein Hønsi',
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131213/Highsoft_03998_.jpg'
        }, {
            id: 'CSO',
            title: 'CSO',
            name: 'Anita Nesse',
            image: 'https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2020/03/17131156/Highsoft_03834_.jpg'
        }, {
            id: 'Product',
            name: 'Product developers'
        }, {
            id: 'Web',
            name: 'Web devs, sys admin'
        }, {
            id: 'Sales',
            name: 'Sales team'
        }, {
            id: 'Market',
            name: 'Marketing team',
            column: 5
        }],
        
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        },
        borderColor: 'white',
        nodeWidth: 65
    }],


    tooltip: {
        outside: true
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }
    });




    function getdatos(){
        var resultado;
        $.ajax({
            url: 'datos.php',
            //type: 'GET',
            async:false,
            success: function(data){
                 resultado = data;
                
            },
        });
         return resultado;
    }

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Organization charts are a common case of hierarchical network charts,
        where the parent/child relationships between nodes are visualized.
        Highcharts includes a dedicated organization chart type that streamlines
        the process of creating these types of visualizations.
    </p>
</figure>

Uncaught TypeError: Cannot read property 'name' of undefined

Mi código de consulta a la base de datos:

<?php

$consulta = "SELECT a.id as memberId, a.area_id as parentId,  a.name as hasta,
CASE WHEN (a.area_id IS NULL) THEN 
    'INICIO'
    ELSE  (SELECT p.name FROM areas AS p WHERE p.id = a.area_id) END AS desde
FROM ctv_gxd_areas as a ";
if ($resultado = $link->query($consulta)) {
    while ($fila = $resultado->fetch_row()) {
        $arrChart[] = array($fila[3], $fila[2]);
        //$i++;
    }
    //echo $var;
    echo json_encode($arrChart);
    $resultado->close();


}
?>

No funciona al hacerlo dinámico, pero si sustituyo datoss por el vector que está comentado, lo dibuja correctamente, no sé qué sucede.

1 respuesta 1

0

Dejaré la respuesta por aquí por si alguien la necesitara. El problema es que datoss en data: datoss, debe ser un array y está llegando como una cadena; esto lo resolví con datoss = JSON.parse(datoss)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.