Only one chart is displayed per page

1

I have a page where I should display two graphics, and although the two are working, only the second graphic appears.

No error appears, simply one of the two graphs appears as if the other did not even 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 chart:

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

    
asked by anonymous 10.07.2018 / 15:10

1 answer

1

You are rendering both graphs using the same ID.

Note that in the first php you have a container with the name 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 the id:

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

It works, however as you repeated the container 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 chart and then call the function that renders the chart 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 graphic, div id = 'container-tt-2' and Highcharts.chart ('container-tt-2' .....

    
10.07.2018 / 16:43