2 Gráficos na mesma página usando Charts.Js

[MouseBugado 0]

Olá pessoal.

 

Estou querendo colocar 2 gráficos na mesma página, mas quando eu abro a página, ele me gera Somente 1 gráfico.

como posso Solucionar esse problema.

 

Segue Código.

https://pastebin.com/rnavu7Sx

 

[AnthraxisBR 56]

Bom dia!

 

Ja tentei usar esse plugin uma vez, era meio complicado pra renderizar vários gráficos, ai encontrei esse:

 

FusionCharts

 

Apesar da aparência não ser das melhores, é o melhor plugin para gráficos que eu já encontrei, inclusive ele fornece suporte para gerar os gráficos direto pelo php, sem precisar repassar para o js.

 

<?php
//-> Detalhe importante aqui, para gerar multiplos gráficos eu uso um ID gerado aleatóriamente, e repasso o id do elemento para o renderizador do plugin
$rand = uniqid();
            echo "<div id='chart-1' style='margin:0px'></div>";

            $arrData = Array(
                'chart' => Array(
                    "caption" => "Grafico de concluídos por regime",
                    "subCaption" => 'Exibe os graficos comparando os regimes tributários, e exibe a porcentagem de conclusão individual',
                    "numberSuffix" => "%",
                    "theme" => "ocean"
                )
            );
            $actualData = Array(
                "SIMPLES NACIONAL" => $tot_simples,
                "PRESUMIDO" => $tot_presumido,
                "REAL" => $tot_real
            );

            $arrData['data'] = array();

            foreach ($actualData as $key => $value) {
                array_push($arrData['data'], array(
                    'label' => $key,
                    'value' => $value
                ));
            }
            $data_JSON = json_encode($arrData);
			//O $rand é o ID aleatório indicando onde é pra se renderizar o gráfico 
            $columnChart = new fusioncharts("column2d", "$rand", "100%", 400, "chart-1", "json", $data_JSON);

            $columnChart->render();

 

[MouseBugado 0]

Até dei uma olhada, Mas esse Fusion Charts é pago.

E os Desenhos do Chart.Js são tão bem alinhados, eu queria muito usar o charts.JS

[wootzor 103]

Uma sugestão: utiliza apenas um evento window.onload.

Outra sugestão: se pretendes usar o mesmo nome para as variáveis, talvez fosse interessante definir contextos diferentes (utilizado clojures).

 

Aqui fica uma abordagem diferente.

 

Finalmente, verifica se tens algum erro na consola do browser.

[MouseBugado 0]

16 minutos atrás, wootzor disse:

Uma sugestão: utiliza apenas um evento window.onload.

Outra sugestão: se pretendes usar o mesmo nome para as variáveis, talvez fosse interessante definir contextos diferentes (utilizado clojures).

 

Aqui fica uma abordagem diferente.

 

Finalmente, verifica se tens algum erro na consola do browser.

 

Estou aprendendo sobre desenvolvimento WEB.  Como eu verifico se tem "erro na consola do browser" ??

[AnthraxisBR 56]

2 minutos atrás, MouseBugado disse:

Estou aprendendo sobre desenvolvimento WEB.  Como eu verifico se tem "erro na consola do browser" ??

 

O correto é console, este trecho artigo é PT-PT kk

 

Baixa o mozilla firefox developer edition, abre o console com 'ctrl+shift+k', e atualize sua página.

 

Vai ter algo como isso:

 

console

 

[Electronic 124]

 

20 horas atrás, MouseBugado disse:

 

Estou aprendendo sobre desenvolvimento WEB.  Como eu verifico se tem "erro na consola do browser" ??

 

todo browser ja tem um. clica com botao direito no site e em inspecionar elemento

 

[wootzor 103]

No Chrome o atalho é Ctrl+Shift+J.