Conheça Características Quem usa Galeria Cursos Docs Fórum
Downloads
Posts Fique por dentro Sobre o Fórum Minha conta
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....
NP
Ajuda para utilizar highcharts com banco de dados !!!!  
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)

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

Nilton, você vai ter que ser mais específico. Em qual parte você está tendo dificuldades?
NP
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. 

<?phpclass 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);  }} ?>



NR
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.
NP
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.
NR
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