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.