1

Tenho uma página onde eu deveria apresentar dois gráficos e, embora os dois estejam funcionando, só o segundo gráfico aparece.

Nenhum erro aparece, simplesmente só aparece um dos dois gráficos como se o outro nem existisse.

Gráfico 1:

<?PHP

                              $PREV = mysqli_query($lnk, "Select JAN_PREV, FEV_PREV, MAR_PREV, ABR_PREV, MAI_PREV, JUN_PREV, JUL_PREV, AGO_PREV, SET_PREV, OUT_PREV, NOV_PREV, DEZ_PREV from qualite where KPI = 'KPI1' ");
                              $REAL = mysqli_query($lnk, "Select JAN_REAL, FEV_REAL, MAR_REAL, ABR_REAL, MAI_REAL, JUN_REAL, JUL_REAL, AGO_REAL, SET_REAL, OUT_REAL, NOV_REAL, DEZ_REAL from qualite where KPI = 'KPI1' ");


                              $resultPREV = mysqli_fetch_assoc($PREV);

                              $resultREAL = mysqli_fetch_assoc($REAL);

                                  $ListaP = $resultPREV; 
                                  $ListaR = $resultREAL; 
                                  $ListaPTotal = array();
                                  $ListaRTotal = array();

                                  foreach ($ListaP as $i => $value) {
                                    array_push($ListaPTotal, $value);
                                  }

                                  foreach ($ListaR as $i => $value) {
                                      array_push($ListaRTotal, $value);
                                  }


                                      $html1 = "
                                       <div id='container-tt' style='min-width: 310px; height: 400px; margin: 0 auto'></div>

                                          <script type='text/javascript'>
                                    Highcharts.chart('container-tt', {
                                      chart: {
                                          type: 'column'
                                      },
                                      title: {
                                          text: 'KPI1'
                                      },
                                      xAxis: {
                                          categories: [
                                              'Jan',
                                              'Feb',
                                              'Mar',
                                              'Apr',
                                              'May',
                                              'Jun',
                                              'Jul',
                                              'Aug',
                                              'Sep',
                                              'Oct',
                                              'Nov',
                                              'Dec'
                                          ],
                                          crosshair: true
                                      },
                                      yAxis: {
                                          min: 0,
                                          title: {

                                          }
                                      },
                                      tooltip: {

                                          shared: true,
                                          useHTML: true
                                      },
                                      plotOptions: {
                                          column: {
                                              pointPadding: 0.2,
                                              borderWidth: 0
                                          }
                                      },
                                      series: [{
                                          name: 'Previsto',
                                          data: [" . join(", ", $ListaPTotal) . "]

                                      }, {
                                          name: 'Realizado',
                                          data: [" .  join(", ", $ListaRTotal) . "]

                                      }]
                                  });
                                      </script>
                                      </div>";

                                      echo $html1;

                                      ?>

O segundo gráfico:

<?php

                              $PREV2 = mysqli_query($lnk, "Select JAN_PREV, FEV_PREV, MAR_PREV, ABR_PREV, MAI_PREV, JUN_PREV, JUL_PREV, AGO_PREV, SET_PREV, OUT_PREV, NOV_PREV, DEZ_PREV from qualite where KPI = 'KPI2' ");
                              $REAL2 = mysqli_query($lnk, "Select JAN_REAL, FEV_REAL, MAR_REAL, ABR_REAL, MAI_REAL, JUN_REAL, JUL_REAL, AGO_REAL, SET_REAL, OUT_REAL, NOV_REAL, DEZ_REAL from qualite where KPI = 'KPI2' ");


                              $resultPREV2 = mysqli_fetch_assoc($PREV2);

                              $resultREAL2 = mysqli_fetch_assoc($REAL2);

                                  $ListaP2 = $resultPREV2; 
                                  $ListaR2 = $resultREAL2; 
                                  $ListaPTotal2 = array();
                                  $ListaRTotal2 = array();

                                  foreach ($ListaP2 as $i => $value) {
                                    array_push($ListaPTotal2, $value);
                                  }

                                  foreach ($ListaR2 as $i => $value) {
                                      array_push($ListaRTotal2, $value);
                                  }


                                      $html2 = "
                                       <div id='container-tt' style='min-width: 310px; height: 400px; margin: 0 auto'></div>

                                          <script type='text/javascript'>
                                    Highcharts.chart('container-tt', {
                                      chart: {
                                          type: 'column'
                                      },
                                      title: {
                                          text: 'KPI2'
                                      },
                                      xAxis: {
                                          categories: [
                                              'Jan',
                                              'Feb',
                                              'Mar',
                                              'Apr',
                                              'May',
                                              'Jun',
                                              'Jul',
                                              'Aug',
                                              'Sep',
                                              'Oct',
                                              'Nov',
                                              'Dec'
                                          ],
                                          crosshair: true
                                      },
                                      yAxis: {
                                          min: 0,
                                          title: {

                                          }
                                      },
                                      tooltip: {

                                          shared: true,
                                          useHTML: true
                                      },
                                      plotOptions: {
                                          column: {
                                              pointPadding: 0.2,
                                              borderWidth: 0
                                          }
                                      },
                                      series: [{
                                          name: 'Previsto',
                                          data: [" . join(", ", $ListaPTotal2) . "]

                                      }, {
                                          name: 'Realizado',
                                          data: [" .  join(", ", $ListaRTotal2) . "]

                                      }]
                                  });
                                      </script>
                                      </div>";

                                      echo $html2;
                                  ?>

E a página que apresenta os gráficos:

<!DOCTYPE html>
<html lang="pt-br" class="no-js">
    <head>
        <script src="code/highcharts.js" type="text/javascript"></script>
    </head>

    <body>

    <!--É do highcharts -->
    <script src="code/modules/exporting.js"></script>

    <?php require_once("menu.php"); ?>

        <!--Baner -->
        <div class="parallax-window" data-parallax="scroll" data-image-src="img/header-metade.jpg" style="height: 300px;">
            <div class="parallax-content container">
                <h1 class="carousel-title" style="font-size: 50px;">QUALITÉ</h1>
                <p>SISTEMA</p>
            </div>
        </div>


        <!-- Main -->
        <div class="content-lg container">
            <div class="row margin-b-20">
                <div class="col-sm-6">
                    <h2>Prev x Real Month</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 sm-margin-b-50">

                    <?php 
                      error_reporting(E_ALL);
                      ini_set('display_errors', 1);

                      include("conn.php");

                          require_once("graf-qualite-1.php");
                          require_once("graf-qualite-2.php");
                    ?>


                    </div>
                </div>
                <div class="col-sm-4 col-sm-offset-1">

                </div>
            </div>
        </div>



        <?php require_once("footer.php"); ?>

    </body>
</html>

Estou usando HIGHCHARTS.js para o gráfico.

1 Resposta 1

1

Você está renderizando os dois gráficos utilizando o mesmo ID.

Repare que no primeiro php você possui um container com o nome container-tt

  $html1 = "<div id='container-tt' style='min-width: 310px; height: 400px; margin: 0 auto'></div>"

E abaixo dele você renderiza o gráfico baseado no id:

  Highcharts.chart('container-tt', {...

Funciona, porém como você repetiu o id do conteiner no segundo php, e chamou a função de renderizar para o mesmo id, o javascript tenta renderizar os dois gráficos no mesmo container, sobrescrevendo um deles.

Para corrigir isso você precisa dar um ID único para os containers de cada gráfico e depois chamar a função que renderiza o gráfico chamando esse mesmo id único.

Exemplo:

$html1 = "<div id='container-tt-1' style='min-width: 310px; height: 400px; margin: 0 auto'></div>"

E na hora de renderizar: Highcharts.chart('container-tt-1', {...

E fazer o mesmo com o segundo gráfico, div id='container-tt-2' e Highcharts.chart('container-tt-2'.....

1
  • Aaaaah, claro! Faz todo sentido! Obrigada pela resposta. Commented 10/07/2018 às 15:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .