Como exibir 2 ou mais graficos na mesma tela ???

Como exibir 2 ou mais graficos na mesma tela ??? Boa tarde a todos, Gostaria de saber se tem como exibir dois gráficos diferentes na mesma tela, pois cria-los só aparece um e tenho o seguinte erro do console no navegador. Uncaught Error: Google Charts loader.js can only be loaded once. Alguem já passou por isso e como resolveu ? Desde já agradeço Jones ...

Jones Lisboa 23/02/2017 (há 8 anos)

Boa tarde a todos,

Gostaria de saber se tem como exibir dois gráficos diferentes na mesma tela, pois cria-los só aparece um e tenho o seguinte erro do console no navegador.

Uncaught Error: Google Charts loader.js can only be loaded once.

Alguem já passou por isso e como resolveu ?

Desde já agradeço

Jones

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 (8)

Nataniel Rabaioli 03/03/2017 (há 8 anos)

Jones, verifique o link abaixo:
https://developers.google.com/chart/interactive/docs/basic_multiple_charts

Umas das maneiras seria criar funções diferentes para cada gráfico e chamar a função setOnLoadCallback para cada uma delas. Ex:

... google.charts.setOnLoadCallback(drawGrafico1); google.charts.setOnLoadCallback(drawGrafico2); function drawGrafico1() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); ... } function drawGrafico2() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); ... }

Jones Lisboa - AUTOR DO POST 03/03/2017 (há 8 anos)

Obrigado Nataniel , vou tentar fazer dessa forma :)

Mailson da Silva 17/03/2017 (há 8 anos)

Olá! Eu precisei fazer isso também, pois montei um dashboard no formulário inicial da aplicação e funcionou perfeitamente com 4 gráficos e alguns grids.
Porém, utilizei as classes nativas do Adianti 4 que encontram-se na pasta app/resourses. Mas é necessário alterar os packages que você irá utilizar caso a página possuir gráficos de diferentes tipos. Ex: google.charts.load('current', {'packages':['bar', 'corechart', 'line']});

Madson Silva 21/03/2017 (há 8 anos)

Mailson da Silva

Você tem disponibilizar o exemplo da tela dashboard, pra eu ter uma ideia de como montar uma tela desse tipo.

Desde já gradeço

Júnior Andrade 30/03/2017 (há 8 anos)

também gostaria de saber como foi feito.

Iran Vital 19/04/2017 (há 8 anos)

Não compreendi bem como faço para exibir dois ou mais graficos, tentei assim mas só é exibido o primeiro grafico.
Alguma dica galera?

 <?php
function __construct()
    {
        parent::__construct();
        
        $html = new THtmlRenderer('app/resources/google_pie_chart.html');
        $data = array();
        $data[] = [ 'Orçamento', 'Value' ];
        $data[] = [ 'Pago',   73.8 ];
        $data[] = [ 'Saldo',   27 ];
        
        $panel = new TPanelGroup('Orçamento');
        $panel->add($html);
        
        // replace the main section variables
        $html->enableSection('main', array('data'   => json_encode($data),
                                           'width'  => '100%',
                                           'height'  => '300px',
                                           'title'  => 'Pagamentos',
                                           'ytitle' => 'Accesses', 
                                           'xtitle' => 'Day'));
        
        // add the template to the page
        $container = new TVBox;
        $container->style = 'width: 60%';
        $container->add(TXMLBreadCrumb::create(['Gráficos']));
        $container->add($panel);
        
        // GRAFICO DOIS
        
        $html1 = new THtmlRenderer('app/resources/google_line_chart.html');
        $data1 = array();
        $data1[] = [ 'Orçamento', 'Value' ];
        $data1[] = [ 'Pago',   73 ];
        $data1[] = [ 'Saldo',   27 ];
        
        $panel1 = new TPanelGroup('Orçamento');
        $panel1->add($html1);
        
        // replace the main section variables
        $html1->enableSection('main', array('data'   => json_encode($data1),
                                           'width'  => '100%',
                                           'height'  => '300px',
                                           'title'  => 'Pagamentos',
                                           'ytitle' => 'Accesses', 
                                           'xtitle' => 'Day'));
        
        // add the template to the page
        $container1 = new TVBox;
        $container1->style = 'width: 60%';
        $container1->add($panel1);              
        
        parent::add($container);
        parent::add($container1);
    }
?>

Mailson da Silva 20/04/2017 (há 8 anos)

Oi Iran. O problema no seu código é que você está utilizando a seção 'main', a função 'drawVisualization' e o div 'chart_div' para todos os gráficos. Isso está fixado nos 'google_xxx_chart.html' dos 'resources'. Para cada gráfico você deve mudar esses três nome. Ex:

 <?php
        //->Alimentando os dados é normal
        $html = new \Adianti\Widget\Template\THtmlRenderer('app/resources/google_pie_chart.html');
        $data = array();
        $data[] = ['Situação', 'Quantidade'];
        foreach ($situacoes as $key => $value) {
            $data[] = [$key, $value];
        }
       //-
        //->Ao invés de 'main', use um nome de seção diferente para cada gráfico
        $html->enableSection('secaoPedidosPorSitChart', array('data' => json_encode($data),
            'width' => '100%',
            'height' => '300px',
            'title' => '',
            'ytitle' => 'Situação',
            'xtitle' => 'Quantidade'));
        //->Tem que substituir alguns nomes que devem ser únicos, diferentes para cada gráfico
        $html->template = str_replace("drawVisualization", "drawPedidosPorSitChart", $html->template); //A função javascript também tem que ser única
        $html->template = str_replace("chart_div", "chartPedidosPorSitChart_div", $html->template); //O div também deve ser único
        $html->template = str_replace("main", "secaoPedidosPorSitChart", $html->template); //Substitua o nome de seção padrão para o do gráfico atual conforme utilizado no 'enableSection' logo acima
?>

Você também tem que acertar a linha nos html com os tipos de gráficos que irá utilizar. Ex:

google.charts.load('current', {'packages':['bar', 'corechart', 'line']})

Você também pode adicionar uma variável e substituir no código php. Ex:

google.charts.load('current', {'packages':[{$packages}]});

e então:

 <?php
      $html->enableSection('secaoPedidosPorSitChart', array('data' => json_encode($data),
            'width' => '100%',
            'height' => '300px',
            'packages' => $uteis->getGraPackages(), //Aqui retorna os packages que vou utilizar na dash
            'title' => '',
            'ytitle' => 'Situação',
            'xtitle' => 'Quantidade'));
?>

Ricardo Sotomayor 16/06/2017 (há 7 anos)

Boa noite, Não entendi! Podeira colocar um exemplo

Novo Comentário