Json e OrgChart di google

[enigma83]

ok ho seguito questa guida.. qualcuno mi dice dove sbaglio?

Codice: Seleziona tutto

<?php 
require_once("top.php"); 
$sql=mysql_query("SELECT * FROM Gesta_Albero");

$rows = array();
while($r = mysql_fetch_array($sql)) {
$rows[] = $r;
}
$jsonTable = json_encode($rows);
?>

<div id="chart_div"></div>




<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

// Create and draw the visualization.
new google.visualization.OrgChart(document.getElementById('visualization')).
draw(data, {allowHtml: true});
}

google.setOnLoadCallback(drawVisualization);
google.load('visualization', '1', {packages: ['orgchart']});
</script>

il json esce cosi [{"0":"1","id":"1","1":"17","parent_id":"17","2":"jack Sparrow","sopra":"jack Sparrow","3":"Barbara Jimenez","sotto":"Barbara Jimenez"}]

[Zoff]

Puoi riportare l'html generato?

[enigma83]

l'html è vuoto.. il json è scritto li

[Zoff]

No, quello è uno script php che esegue l'output del tag script prensente nell'html, quindi come minimo nell'html ci deve essere il div e il tag script.

In ogni caso l'id e il formato json sono sbagliati.

[enigma83]

si l'id l'ho corretto era visualization invece di div_chart il formato json come deve uscire? lo avevo capito che era sbagliato ma non ho capito cosa deve uscire cioè che formato ci vuole?

[Zoff]

Come specificato nella documentazione: https://developers.google.com/chart/int ... ata-format

[enigma83]

dove sta scritto come ciclare le righe? come inserirle? dove specificare il json? ho già letto la guida..

[Zoff]

Esattamente dove ti ho linkato.

Nella descrizione del formato:

Data Format

A table with three string string columns, where each row represents a node in the orgchart. Here are the three columns:

Column 0 - The node ID. It should be unique among all nodes, and can include any characters, including spaces. This is shown on the node. You can specify a formatted value to show on the chart instead, but the unformatted value is still used as the ID.
Column 1 - [optional] The ID of the parent node. This should be the unformatted value from column 0 of another row. Leave unspecified for a root node.
Column 2 - [optional] Tool-tip text to show, when a user hovers over this node.

Each node can have zero or one parent node, and zero or more child nodes.

Nell'esempio:

Codice: Seleziona tutto

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        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', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {allowHtml:true});
      }

[enigma83]

ok ma questo non è dinamico.. come metto al posto di

Codice: Seleziona tutto

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', '']
        ]);

l'array json?

[Zoff]

Basta guardare come funzionano le DataTables: https://developers.google.com/chart/int ... _dataviews

[enigma83]

già lette.. forse sto incrippato io .. xkè al momento sto seguendo 3 gestionali insieme.. ma non sarebbe + semplice farmi un esempio?

[Zoff]

L'esempio è nella guida, non ho idea di che dati tu voglia graficare quindi non posso farti un esempio.

[enigma83]

devo graficare un albero che sto ancora capendo come fare.. ma dovrebbe avere i campi nome e cognome padre, livello, nome e cognome figlio.

[Zoff]

E che differenza c'è con l'esempio della documentazione?
Perché non puoi usare quello?

[enigma83]

me lo scrivi qui l'esempio xkè forse non ho capito qual'è grazie

[Zoff]

L'ho scritto sopra. Ecco il fiddle equivalente: https://jsfiddle.net/dlaliberte/dpvLsnwe/

[enigma83]

Cosi non funge:

Codice: Seleziona tutto

<?php
// set database connection parameters

define('DB_SERVER', '***');
define('DB_USERNAME', '***');
define('DB_PASSWORD', '***');
define('DB_DATABASE', '***');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
$query=mysql_query("SELECT sopra, sotto FROM Gesta_Albero") or die(mysql_error());

# Collect the results
while($obj = mysql_fetch_object($query)) {
    $arr[] = $obj;
}

# JSON-encode the response
$json_response = json_encode($arr);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>
        Google Visualization API Sample
        </title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            function drawVisualization() {
                // Create and populate the data table.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);


                // Create and draw the visualization.
                new google.visualization.OrgChart(document.getElementById('visualization')).
                draw(data, {allowHtml: true});
            }

            google.setOnLoadCallback(drawVisualization);
            google.load('visualization', '1', {packages: ['orgchart']});
        </script>
    </head>
    <body style="font-family: Arial;border: 0 none;">
        <div id="visualization" style="width: 900px; height: 900px;"></div>
    </body>
</html>

cosi nemmeno:

Codice: Seleziona tutto

<?php 
require_once("top.php"); 
$sql=mysql_query("SELECT sopra, sotto FROM Gesta_Albero");

$sopra = array();
$sotto = array();
while($r = mysql_fetch_array($sql)) {
	$sopra[]=$r[0];
	$sotto[]=$r[1];
}
$jsonTable = json_encode($rows);
?>



<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div"></div>
     google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          ['<?php echo $sopra; ?>', '<?php echo $sotto; ?>', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {allowHtml:true});
      }

[Zoff]

Ma stai andando ad inzecco?
Segui questi semplici step:
1. Dimentica PHP e prendi l'esempio html
2. Crea a mano scrivendolo direttamente nel tag script dell'html un codice json che genera il risultato che vuoi
3. Riprendi in mano PHP e crea uno script che fa solo una cosa: generare una stringa json dello stesso formato del punto 2 partendo dal tuo DB
4. Combina le soluzioni

[enigma83]

Buonasera a tutti vorrei sapere come diavolo deve uscire l'array json per darla in basto alla funzione orgchart..
Ho questo codice... per praticità vi scrivo direttamente la stampa dell'array che viene fuori da echo $json..

Codice: Seleziona tutto

echo $json da:
[['Vincenzo Formicola', 'Diego De Fusco'],['Diego De Fusco', 'Barnara Jimenez'],['Vincenzo Formicola', 'Francesco Ingrosso']] 

mentre la orgchart è:

			<div id="chart_div"></div>




<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript">
            function drawVisualization() {
                // Create and populate the data table.
                var data = new google.visualization.DataTable(<?php echo $json; ?>);

                // Create and draw the visualization.
                new google.visualization.OrgChart(document.getElementById('chart_div')).
                draw(data, {allowHtml: true});
            }

            google.setOnLoadCallback(drawVisualization);
            google.load('visualization', '1', {packages: ['orgchart']});
        </script>

perchè mi da sempre questo errore? :

Error: Data table should have at least 2 columns

[Zoff]

Unisco a http://forum.ubuntu-it.org/viewtopic.php?f=33&t=616303

Tirando ad indovinare, è questo quello che vuoi? https://jsfiddle.net/1euL78e7/