Only one chart is displayed per page

Question

I have a page where I should present two charts and, although the two are working, only the second graph appears.

No error appears, just one of the two graphs appears as if the other does not exist.

Chart 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;

                                      ?>

The second graph:

<?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;
                                  ?>

And the page that displays the graphics:

<!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>

I’m using HIGHCHARTS.js for the chart.

Answer 1

You are rendering both graphics using the same ID.

Note that in the first php you have a container named container-tt

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

And below it you render the graph based on id:

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

It works, but since you repeated the content id in the second php, and called the render function for the same id, javascript tries to render the two graphics in the same container, overwriting one of them.

To fix this you need to give a unique ID to the containers of each graph and then call the function that renders the graph by calling that same unique id.

Example:

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

And when it comes to rendering: Highcharts.Chart('container-tt-1', {...

And do the same with the second graph, div id='container-tt-2' and Highcharts.Chart('container-tt-2'.....