Exibindo dependências de tabelas em gráficos.

Em outro artigo, disponível aqui, escrevi sobre uma classe de dependência de tabelas em banco de dados. O que eu não fiz naquele momento foi disponibilizar um exemplo de uso.

Sei que em muitos casos apenas a demonstração da classe realmente não resolve o problema, então resolvi divulgar aqui os arquivos que fiz para testar e exibir as dependências em formato de gráfico.

Primeiro. Um arquivo PHP que tratas a chamada ao Objeto “Dependencia”

get_dependencia.php

<?php
include_once 'dependencia.php';
extract($_POST);
$dep = new Dependencia ( $host, $user, $pass, $database, $port);
$dep->dependenciasFull();
$arr = $dep->grafoFull;
$dados = array();
foreach ($arr as $key => $tables) {
    foreach ($tables as $table) {
        $dados [$key] [] = array(
            $table->tabela,
            $table->referencia,
            $table->coluna
        );
    }
}
echo json_encode($dados);

Posteriormente criei dois arquivos HTML.

Este primeiro arquivo exibe um campo “SELECT” para escolha da tabela.

dependencia.html

<html>
    <head>
    </head>
    <body id="myBody">
        <select id="tabela" onChange="mudou()"><option>--</option></select>
        <div id="chart_div"></div>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1");
            google.load("jqueryui", "1");
            google.load("visualization", "1", {packages: ["orgchart"]});
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: "get_dependencia.php",
                    data: {
                        host: 'localhost',
                        user: 'root',
                        pass: '',
                        database: 'your_data_base',
                        port: '3306'
                    },
                    type: "POST",
                    dataType: "json",
                    success: function (json) {
                        resultGrafo = json;
                        html = '';
                        for (var k in resultGrafo) {
                            resultset = resultGrafo[k];
                            $("#tabela").append($('<option>', {value: k, text: k}));
                            html += '<div id="chart_div_' + k + '"></div>';
                        }
                        $("#myBody").append(html);
                    },
                    error: function (xhr, status, errorThrown) {
                        console.log("Sorry, there was a problem!");

                    }
                });
            });
            function drawChart() {
                for (var k in resultGrafo) {
                    if (k == $("#tabela").val()) {
                        resultset = resultGrafo[k];
                    }
                }
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Name');
                data.addColumn('string', 'Manager');
                data.addColumn('string', 'ToolTip');
                data.addRows(resultset);
                var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
                chart.draw(data, {allowHtml: true});
            }
            function mudou() {
                drawChart();
            }
        </script>
    </body>
</html>

Este segundo arquivo mostra todas as tabelas diretamente na tela. Separados por blocos.

dependenciaAll.html

<html>
    <head>    </head>
    <body id="myBody">
        <h3><center>Lista de tabelas e suas dependencias</center></h3>
        <div id="chart_div"></div>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1");
            google.load("jqueryui", "1");
            google.load("visualization", "1", {packages: ["orgchart"]});
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: "get_dependencia.php",
                    data: {
                        host: 'localhost',
                        user: 'root',
                        pass: '',
                        database: 'your_data_base',
                        port: '3306'
                    },
                    type: "POST",
                    dataType: "json",
                    success: function (json) {
                        resultGrafo = json;
                        html = '';
                        for (var k in resultGrafo) {
                            resultset = resultGrafo[k];
                            html += '<div id="chart_div_' + k + '" style="border:1px solid black;"></div>';
                        }
                        $("#myBody").append(html);

                        for (var k in resultGrafo) {
                            resultset = resultGrafo[k];
                            drawChart(k);
                        }
                    },
                    error: function (xhr, status, errorThrown) {
                        console.log("Sorry, there was a problem!");
                    }
                });
            });
            function drawChart(valor) {
                for (var k in resultGrafo) {
                    if (k == valor) {
                        resultset = resultGrafo[k];
                    }
                }
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Name');
                data.addColumn('string', 'Manager');
                data.addColumn('string', 'ToolTip');
                data.addRows(resultset);
                var chart = new google.visualization.OrgChart(document.getElementById('chart_div_' + valor));
                chart.draw(data, {allowHtml: true});
            }
            function mudou() {
                drawChart();
            }
        </script>
    </body>
</html>

Qualquer dúvida ou dicas, entre em contato: leandrolt@gmail.com

1 comment for “Exibindo dependências de tabelas em gráficos.

Leave a Reply

Your email address will not be published. Required fields are marked *