Hour chart in Highcharts?

Question

Hour chart in Highcharts?

Navigation

#1 by (1 votes)

0

I'm trying to make a chart look like this and I'm not getting it. Could someone help me?

Remembering that the table can be ignored, I just wanted the same chart.

jquery highcharts

asked by anonymous 30.07.2018 / 19:08

1 answer

How to make edit button work in a modal window? Inserting foreign keys by Kettle

score 1 · Accepted Answer

To graph the Highchart , we need to take a few steps:

First, go to link and download highcharts 6.1.1 . After that, copy the code and examples folder from within the highcharts folder into the system folder you are developing.

Within the examples folder there will be several other folders with the files for each type of chart. For your chart, we'll use combo-dual-axes .

Now you already have a chart, but it does not take the values from your table, it's a chart with pre-programmed values, so let's put the values in your table.

The first thing we'll do is copy the content of the page from your chosen chart and paste it into a new page that you'll save as a php file. That's because we'll need php to get the values from your table in the database and put it inside the chart.

Now that you have a php page with the graph inside, let's make the selects to get the values of each column, make an array for each and put the arrays we create inside the arrays of highcharts:

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Seu gráfico</title>

        <style type="text/css">

        </style>
    </head>
    <body>
<script src="code/highcharts.js"></script>
<script src="code/modules/exporting.js"></script>

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



<div class="col-sm-6 sm-margin-b-2">
  <div class="">
    <div class="" data-height="height"> 
      <div class="service-info"> 
        <?php

         $lnk = mysqli_connect('localhost','root','') or die(mysql_error());
         mysqli_select_db($lnk,'SeuBanco') or die(mysql_error());


          $Yr16 = mysqli_query($lnk, "Select JAN, FEV, MAR, ABR, MAI, JUN, JUL, AGO, SET, OUT, NOV, DEZ from Yr16 where MMTR = 'Yr16' ");
          $BP17 = mysqli_query($lnk, "Select JAN, FEV, MAR, ABR, MAI, JUN, JUL, AGO, SET, OUT, NOV, DEZ from B917 where MMTR = 'B917' ");
          $Yr17 = mysqli_query($lnk, "Select JAN, FEV, MAR, ABR, MAI, JUN, JUL, AGO, SET, OUT, NOV, DEZ from Yr17 where MMTR = 'Yr17' ");


          $resultYr16 = mysqli_fetch_assoc($Yr16);

          $resultBP17 = mysqli_fetch_assoc($BP17);

          $resultYr17 = mysqli_fetch_assoc($Yr17);

          $ListaYr16 = $resultYr16; 
          $ListaBP17 = $resultBP17; 
          $ListaYr16 = $resultYr17; 
          $ListaYr16Total = array();
          $ListaBP17Total = array();
          $ListaYr17Total = array();

          foreach ($ListaYr16 as $i => $value) {
            array_push($ListaYr16Total, $value);
          }

          foreach ($ListaBP17 as $i => $value) {
            array_push($ListaBP17Total, $value);
          }

          foreach ($ListaYr17 as $i => $value) {
            array_push($ListaYr17Total, $value);
          }


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

              <script type='text/javascript'>
                Highcharts.chart('container-tt-1', {
                  chart: {
                    type: 'column'
                  },
                  title: {
                    text: 'Gráfico de horas'
                  },
                  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: 'Yr16',
                    data: [" . join(", ", $ListaYr16Total) . "]

                  }, {
                    name: 'Yr17',
                    data: [" . join(", ", $ListaYr17Total) . "]

                  } , {
                    name: 'BP17',
                    data: [" .  join(", ", $ListaBP17Total) . "]

                  }]
                  });
              </script>";

            echo $html1;

              ?>                           
      </div>
    </div>
  </div>
</div>
    </body>
</html>

I invented the name of the columns according to what was in the image, but if it is different just change it.

It is advisable that this file is in the main folder of your system, so you can even delete the example folder after that if you want.

You should now have the chart pulling the information from your database.

I hope I have helped.