javascript php e diagramma ad albero di google

**lollythefighter** · 02-05-2012, 15:40

Ragazzi avrei un problemuccio, sto tentando (per un progetto universitario) di costruire un diagramma ad albero dinamico che prenda direttamente da una query i risultati e li stampi.
Girando qua e la mi sono imbattuto in una api di google che consente di disegnare alberi ma staticamente tramite il javascript, ecco a voi:

codice:

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
    </script>
  </head>

  <body>
    <div id='chart_div'></div>
  </body>
</html>

tramite la funzione data.addRows si può inserire staticamente il nome dell'oggetto e del suo genitore, il problema diventa dunque come posso fare per poter inserire i risultati di una query in quella funzione?
Purtroppo sono scarsino sia col js che col php vi sarei immensamente grato se mi aiutaste!

**lollythefighter** · 02-05-2012, 16:03

Dimenticavo qualche info in più, uso mysql e phpmyadmin, mentre per la documentazione di google:
https://developers.google.com/chart/...chart?hl=it-IT
un altra cosa se per voi esiste o conoscete un altro metodo per realizzare diagrammi ad albero dinamici in maniera più efficiente o simile accetto consigli.
Ancora grazie a tutti!

**lollythefighter** · 04-05-2012, 15:06

ho trovato qualcosa di simile a quello che volevo fare

codice:

  $arr = array('this' => array('is' =>    array('just' => array('a'),
                                                'test'),
                               'to' =>    array('test' => array('my',
                                                                'new' =>  array('class',
                                                                                'called'),
                                                                'diagram')),
                               'graph'));

ogni array punta ad un altro array e l'array che punta costituisce l'elemento genitore, il problema è che non sono un gran che in php come avevo detto sopra, difatti come posso fare per creare da una query un array nidificato in questa maniera?
Considerate che ho una tabella "appartenenza" che collega gli elementi tramite i loro id per riconoscere chi è figlio di chi e chi è padre nelle categorie.

**lollythefighter** · 04-05-2012, 17:44

nessun aiutino?

**Virus_101** · 04-05-2012, 17:48

uHm nn ho testate tale lib ma sei sicuro di quello che fa?
A me pare piu' per fare "charts" ossia diagrammi , se poi hai la versione alberale tanto meglio.

Cmq non c'e' situazione migliore per applicare la ricorsione .

Lo puoi fare direttamente in php .

1- procedura che prepara il nodo
2- ricorri ogni nodo interno e aumenta il margine.

Se devi solo stampare in html una struttura di tipo alberale(tipo albero directory per capirci) non hai soluzione migliore della ricorsione (cosi i prof sono felici e vedono che sai usarla se la fai bene ovviamente )

**lollythefighter** · 05-05-2012, 14:09

Ciao, innanzitutto grazie per la risposta, non ho ben capito che cosa intendi per "ricorsione"
comunque sia entrambi i metodi che ho postato fanno un diagramma ad albero, ossia abbiamo dei nodi padri collegati con tanti nodi figli, entrambi i metodi però benché funzionino alla perfezione staticamente non mi consentono per ora di funzionare dinamicamente:
nel primo (quello di google) non ho la più pallida idea di come inserire nella funzione javascript data.addRows i miei dati contenuti in un array tramite una query al db, nel secondo caso non so come trasformare il mio array:

codice:

Array ( [0] => Array ( [0] => materiale ortopedico [nome] => [1] => [2] => ) [1] => Array ( [0] => elettronica [nome] => elettronica [1] => ingegneria [2] => elettronica ) [2] => Array ( [0] => informatica [nome] => informatica [1] => elettronica [2] => informatica ) [3] => Array ( [0] => sport [nome] => [1] => [2] => ) [4] => Array ( [0] => medicina [nome] => [1] => [2] => ) [5] => Array ( [0] => meccanica [nome] => meccanica [1] => ingegneria [2] => meccanica ) [6] => Array ( [0] => ingegneria [nome] => [1] => [2] => ) )

in:

codice:

array('this' => array('is' =>    array('just' => array('a'),
                                                'test'),
                               'to' =>    array('test' => array('my',
                                                                'new' =>  array('class',
                                                                                'called'),
                                                                'diagram')),
                               'graph'))

Grazie per l'aiuto!

**Virus_101** · 05-05-2012, 21:26

Originariamente inviato da lollythefighter
Ciao, innanzitutto grazie per la risposta, non ho ben capito che cosa intendi per "ricorsione"

Allora..... secondo me anche tu hai maolta cunfusione riguardo l'argomento su cui ti stai per cimentare.
Capisco la tua necessità di arrivare ad 1 soluzione. Ma ci sono dei limiti di fondo che non ti consentono di arrivarci.

Per ricorsione ... non si intende nulla, si richiede o si propone l'utilizzo di tale tecnica per sviluppare un codice in grado di analizzare un struttura dati di tipo alberale di cui ingori la struttura.
Quando si studiano le strutture dati di tipo "albero" (generico,binario,bilanciato,rosso-nero, etc) si studiano di pari passo soluzioni "ricorsive", ossia funzioni o metodi che "richiamano se' stessi" .
Questa particolare tecnica ti consente di scrivere codice che analizzi tali strutture dati, senza dover impazzire a scrivere procedure iterative folli. UNitamente al fatto che alcune strutture non sono analizzabili se non ricorsivamente.

ad sempio scansionare un b-tree (albero binario)
esempio di codice ricorsivo :

codice:

begin scan( byref nodo )

destra <- ""
sinistra <- "" 
scansione <- "" 


if node is empty or null // CASO BASE
   then   ritorna "" 
else // fasi di controllo 

   // Ricorsione sul sottoramo destro
   destra <- scan(nodo.rightChild)

   // ricorsione sul sottoramo sinistro
   sinistra <- scan( nodo.leftChild )
   
   // Creazione e concatenamento dalloutput
   scansione <- "Nodo "+(nodo.value)+" s:"+sinistra+" | d:"+destra
endif

ritorna scansion

end

Questo ti fa capire come e' una pèrocedura ricorsiva ossia una procedura che richima se'ì stessa per analizzare una struttura dati di tipo "albero binario" in questo caso. CI sono un sacco di procedura di questa tipologia per analizzare strutture dati simili in base alle propietà intrinseche della tipologia di struttura in analisi.

Ora, il mio consiglio, e' che inizi a dare un occhio a questa tipologia di "algoritmi e strutture dati" altrimenti nn ne vieni fuori.

**lollythefighter** · 06-05-2012, 10:45

grazie per la risposta, potevi risparmiarti il facepalm

so cos'è la ricorsione intendevo sapere in che modo pensavi di implementarla nel mio caso.
Comunque sia la mia struttura di dati è relativamente semplice:
i dati sono salvati nel db nel seguente modo: ho una tabella contenente tutte le categorie che mi servono e un'altra tabella contenente le relazioni di gerarchia tra le varie categorie, se una categoria non ha nessuna relazione non è presente nella seconda tabella.
Ora però come dici tu sono molto confuso e non so quale sia la procedura migliore o quantomeno funzionale per organizzare un diagramma ad albero.
Con quegli esempi che ho postato non sono riuscito ancora a ricavare nulla...
L'idea con la quale ero partito e con la quale ho realizzato questa query:

codice:

$sql = "SELECT c.nome, padre.nome, figlio.nome FROM gerarchia JOIN gruppo AS padre ON padre.id=id2 JOIN gruppo AS figlio ON figlio.id=id1 RIGHT JOIN gruppo AS c ON c.nome=figlio.nome ";

era di prendere tutte le categorie e vedere se esse avevano una relazione con un altra categoria e difatti il risultato era l'array che ho postato.
Nel secondo esempio (al quale forse mi converrebbe attenermi) l'array è strutturato in modo tale che l'elemento genitore punta al figlio e così via, solo che francamente non so come realizzarlo dalla mia struttura di dati.
Grazie mille ancora!

**Virus_101** · 07-05-2012, 10:41

OK ma da come l'avevi messa nella precedente risposta sembrava che tu non sapessi cosa fosse la ricorsione.

Il mio suggerimento in questo caso e' di trattare la struttura dati come albero generico.
Quindi creare una procedura che estrae il nodo radice e i nodi figli, quindi scorri iterativamente i nodi figli e per ogni nodo figlio lanci la ricorsione. QUindi la procedura popola un array che ritorna il sotto-array popolato al chiamante in modo che quando si chiude la ricorsione hai correttamente popolato l'intera struttura dati.

A questo punto hai eseguito l'estrazione dei dati e la conversione nella opportuna struttura, a questo punto crea 1 procedura che li converte in codice html human-readable

**lollythefighter** · 07-05-2012, 11:05

Grazie per la risposta, ho provato così sempre con la google api ma mi da sempre schermata bianca...credo che ci sia un errore nell'inclusione dell'html nel php perché da li in poi non mi stampa più nulla tramite echo

codice:

<?php 
include("connect.php");
$db=mysql_connect($HOST, $USER, $PASSWORD);
    $dbname = 'progetto';
    mysql_select_db($dbname);
?>




<?php 

$query = " select node.nome as node, if (gerarchia.id2 is NULL,' ',parent.nome) as parent
FROM gruppo as node LEFT JOIN gerarchia ON node.id=gerarchia.id1 LEFT JOIN gruppo as parent on gerarchia.id2=parent.id";
$qry1 = mysql_query($query,$db) or die("
Failed query: $sql1\n
\n".mysql_error());




function orgchart( $query ) {
  $cols = array(); $rows = array();
  $res = mysql_query($query) or exit( mysql_error() );

  $colcount = mysql_num_fields( $res );

  if( $colcount < 2 ) exit( "Org chart needs two or three columns" );
  $rowcount = mysql_num_rows( $res );

  for( $i=0; $i<$colcount; $i++ ) $cols[] = mysql_fetch_field( $res, $i );

  while( $row = mysql_fetch_row( $res )) {$rows[] = $row; }

  echo "<html><head>";
   echo     " <script type='text/javascript' src='https://www.google.com/jsapi'></script>\n";
   echo     " <script type='text/javascript'>\n";
   echo     " google.load('visualization', '1', {'packages':['orgchart']});\n";
   echo     " google.setOnLoadCallback(drawChart);\n";
   echo     " function drawChart() {\n";
   echo     " var data = new google.visualization.DataTable();\n";


  for( $i=0; $i<$colcount; $i++ ) echo " data.addColumn('string','{$cols[$i]->nome}')\n";
  echo " data.addRows([\n";
  for( $j=0; $j<$rowcount; $j++ ) {
    $row = $rows[$j];
    $c = (( $j < $rowcount-1 ) ? "," : "" );
    echo " ['{$row[0]}','{$row[1]}','{$row[2]}']$c\n"; 
   }
  echo " ]);\n",
       " var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));\n",
       " var options = {'size':'small','allowHtml':'true','allowCollapse':'true'};\n",
       " chart.draw(data, options);\n", 
       " }\n",
       " </script>\n</head>\n<body>\n",
       " <div id='chart_div'></div>\n",
       "</body>\n</html>";
 }

orgchart( $query );




?>

grazie mille...(sto impazzendo)

Discussione: javascript php e diagramma ad albero di google

Strumenti discussione

Ricerca discussione

Visualizza

javascript php e diagramma ad albero di google

Permessi di invio