Ajuda para utilizar highcharts com banco de dados !!!!

Ajuda para utilizar highcharts com banco de dados !!!! Pessoal boa noite, uma ajuda por favor. Estou tentando utilizar highcharts para gerar graficos e não estou conseguindo. Eu preciso de um exemplo lendo banco de dados. Outro detalhe, gostaria de ter uns 2 ou 3 botoes no grafico onde possa mudar o tipo grafico, de pizza para barras, para radar, etc. sem sair do formulario.. Obrigado....

Nilton Próspero 11/01/2017 (há 8 anos)

Pessoal boa noite, uma ajuda por favor.
Estou tentando utilizar highcharts para gerar graficos e não estou conseguindo.
Eu preciso de um exemplo lendo banco de dados.
Outro detalhe, gostaria de ter uns 2 ou 3 botoes no grafico onde possa mudar o tipo grafico, de pizza para barras, para radar, etc. sem sair do formulario..
Obrigado.

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!

Dominando o Adianti Framework Quero me inscrever agora!

Comentários (5)

Nataniel Rabaioli 12/01/2017 (há 8 anos)

Nilton, você vai ter que ser mais específico. Em qual parte você está tendo dificuldades?

Nilton Próspero - AUTOR DO POST 12/01/2017 (há 8 anos)

Nataniel bom dia, minha dificuldade esta na parte do Javascript. Não consigo fazer executar o javascript, a parte da query no banco esta rodando. E ao clicar nos botoes, não muda o tipo do grafico.

Segue abaixo o codigo.

 <?php
class Grafico_sindrome extends TPage {
    function __construct()
    {
        parent::__construct();
         
        // creates the customer form and add a table inside it
        $this->form = new TQuickForm('form');
        $this->form->class = 'tform';
        
       // loads the galleria javascript library
        TPage::include_js('app/lib/jquery/js/Highcharts-4.1.5/js/highcharts.js');
        TPage::include_js('app/lib/jquery/js/Highcharts-4.1.5/js/highcharts-3d.js');
        TPage::include_js('app/lib/jquery/js/Highcharts-4.1.5/js/highcharts-more.js');
        TPage::include_js('app/lib/jquery/js/Highcharts-4.1.5/js/modules/exporting.js');
        // creates a table
        $table = new TTable; 
        $div = new TElement('div'); 
        $div->id = 'container'; 
        $div->style = "width:800px;height:500px"; 
        $table->addRow()->addCell($div);
        //--------------------------------------------------------------------------------//
        $div1 = new TElement('div'); 
        $div1->id = 'plain'; 
        $div1->style = "width:800px;height:500px"; 
        //--------------------------------------------------------------------------------//
        $div2 = new TElement('div'); 
        $div2->id = 'inverted'; 
        $div2->style = "width:800px;height:500px"; 
        //--------------------------------------------------------------------------------//
        $div3 = new TElement('div'); 
        $div3->id = 'polar'; 
        $div3->style = "width:800px;height:500px"; 
        //--------------------------------------------------------------------------------//
        $table->addRow()->addCell($div);
        //--------------------------------------------------------------------------------//
        // create an action button
        
        $btplain=new TButton('plain');
        $btplain->setAction(new TAction(array($this, 'onInverted')), 'plain');
        $btplain->setImage('ico_datagrid.gif');
        $btinverted=new TButton('inverted');
        $btinverted->setImage('ico_datagrid.gif');
        $btinverted->setAction(new TAction(array($this, 'onInverted')), 'inverted');
        $btpolar=new TButton('polar');
        $btpolar->setAction(new TAction(array($this, 'onInverted')), 'polar');
        $btpolar->setImage('ico_datagrid.gif');
        
        $vbox = new TVBox;
        $btbarra = new TButton('plain');
        $bt2b = new TButton('inverted');
        $bt2c = new TButton('polar');
        $btbarra->setAction(new TAction(array($this, 'onInverted')), 'plain');
        
        $btbarra->setLabel('plain');
        $bt2b->setLabel('inverted');
        $bt2c->setLabel('polar');
        
        $btbarra->setImage('fa:save red');
        $bt2b->setImage('fa:edit green');
        $bt2c->setImage('fa:trash-o blue');
        $this->form->setFields(array($btbarra));
        $vbox = new TVBox;
        $vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
        $vbox->add($this->form);
        parent::add($vbox);
        //--------------------------------------------------------------------------------//
        parent::add($table); 
        
        $this->onGenerator();
        
    }            
    function onGenerator(){
        //==================================================================================//
        TTransaction::open('sgp');
        // Convert an Active Record into array
        $conn = TTransaction::get(); 
        $sql = " SELECT S.descricao as Descricao_Sindrome,
                        COUNT(P.sindrome_id) as QtdPacientes
                  FROM  paciente P
             LEFT JOIN  sindrome S 
                    ON P.sindrome_id = S.sindrome_id
                 WHERE P.status <> 'EX'
              GROUP BY S.descricao
              ORDER BY COUNT(P.sindrome_id) desc ";
        $colunas = $conn->query($sql);
        //crio as variaveis        
        $dados_completo = "";
        $dados = "[";
        $qtd_dados = "[";
        //percorro as colunas e coloco na string         
        foreach ($colunas as $coluna) 
        {
            $dados_completo = $dados_completo . "['".$coluna[0]."',".$coluna[1].'],';
            $dados = $dados . "'". $coluna[0]."',";  
            $qtd_dados = $qtd_dados .$coluna[1].",";  
        }
        //retiro a ultima virgula
        $dados_completo = substr($dados_completo,0,-1); 
        $dados = substr($dados,0,-1);
        $qtd_dados = substr($qtd_dados,0,-1); 
        $dados = $dados .']'; 
        $qtd_dados = $qtd_dados .']'; 
        
        //echo "<br> DADOS COMPLETOS => ".$dados_completo;
        //echo "<br> DADOS => ".$dados;
        //echo "<br> QTD DADOS => ".$qtd_dados;
        
        //==================================================================================//
        TTransaction::close(); 
        //==================================================================================//
        $script = new TElement('script');
        $script->type = 'text/javascript';
        $javascript = "
        $('#container').highcharts({
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    options3d: {
                        enabled: true,
                        alpha: 0,
                        beta:  0,
                        depth: 20,
                        viewDistance: 30
                    }
                },
                title: {
                    text: 'Estatistica - Sindromes'
                },
                subtitle: {
                    text: 'Quantidade de pacientes por Síndrome'
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                xAxis: {
                    type: 'category',
                    labels: {
                        rotation: -50,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total Pacientes'
                    }
                },
                
                legend: {
                    enabled: false
                },
        
                tooltip: {
                    pointFormat: '<b>{point.y} pacientes</b>'
                },        
        
                series: [{
                  type: 'column',
                  data: [ ".$dados_completo."  ],
                  showInLegend: false                
                }]
       }); 
       
    $('#plain').click(function () {
        chart.update({
            chart: {
                inverted: false,
                polar: false
            },
            subtitle: {
                text: 'Plain'
            }
        });
    });
    $('#inverted').click(function () {
        chart.update({
            chart: {
                inverted: true,
                polar: false
            },
            subtitle: {
                text: 'Inverted'
            }
        });
    });
    $('#polar').click(function () {
        chart.update({
            chart: {
                inverted: false,
                polar: true
            },
            subtitle: {
                text: 'Polar'
            }
        });
    });       
       
       
       ";
    $script->add($javascript);
   parent::add($script);
  }
} 
?>

Nataniel Rabaioli 12/01/2017 (há 8 anos)

Vamos por partes.

Copiei o código que passou e apareceu um erro dizendo que a função onInverted não existe.

Criei a função para continuar testando, modifiquei o sql para uma tabela existente em meu banco de dados e... funcionou, o gráfico foi gerado corretamente.

Não testei a parte dos botões porque acho que está faltando a parte do código responsável por isso, pois os botões não estão sendo exibidos na tela.

Nilton Próspero - AUTOR DO POST 12/01/2017 (há 8 anos)

Nataniel boa noite, ontem eu fiquei tentando ajustar o codigo e a partir do grafico que postei realmente passou a funcionar. Só não avisei antes, porque estou tentando agora fazer estes botões de mudança do tipo grafico funcionar. Mas não consigo. Está dificil.

Estou tentando utilizar este exemplo: www.highcharts.com/demo/chart-update

Admito que estou com dificuldades com os graficos, por exemplo, ontem eu tentei fazer este exemplo funcionar e não dá erro mas nao aparece nada na tela.

O exemplo é este: www.highcharts.com/demo/column-drilldown
Mesmo copiando fielmente o exemplo do site, não aparecia nada.

Nataniel Rabaioli 12/01/2017 (há 8 anos)

Nilton, testei o exemplo do chart-update. Parece que a função highcharts está sendo chamada antes do término do carregamento da biblioteca. Resolvi colocando as bibliotecas para carregamento junto com as demais bibliotecas do sistema, no arquivo app/templates/themeX/libraries.html, assim não foi preciso utilizar a função TPage::include_js.

Outra coisa, sugiro separar o html e o js do código php. Veja o exemplo do tutor:
www.adianti.com.br/framework_files/tutor/index.php?class=PieChartVie

Novo Comentário