Meter with percentage

If you want something quick just to display the information, you can use the Google Chart Gauge Chart, which generates exactly that type of meter. Here is an example:

      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Serviço 1', 80],
          ['Serviço 2', 55],
          ['Serviço 3', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 0, redTo: 70,
          yellowFrom:70, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 1000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 1500);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 1800);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div" style="width: 400px; height: 120px;"></div>

I was trying with Jquery (hide show) but it was breaking the line of the inline element and it was getting very strange, so I decided to use the good old Pure JavaScript and to set the value inside every <p> I used Jquery. Warning beforehand that is not the best solution ( I will refactor this response later using 100% Jquery with a clean code ).

The preview of the answer is without PHP (since I do not know any PHP fiddle), but I'll post a code of how it would look with your PHP in the end.

function mouseIn(star,percentual){
  $(".p-"+star).html(percentual+"%");
}

function mouseOut(star){

$(".p-"+star).html('');
}

.inline {
  margin-left: 10px;
  height: 80px;
  display: inline-block;
}

.percentage {
  margin-left: 12px;
  display: inline;
}

.star {
  background-image: url("https://cdn1.iconfinder.com/data/icons/web-interface-part-2/32/star-512.png");
  width: 50px;
  height: 50px;
  background-size: contain;
  float:initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="inline">
  <div class="text">
    <p class="percentage p-1"></p>
  </div>
  <div onmouseover="mouseIn(1,5)" onmouseout="mouseOut(1)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-2"></p>
  </div>
  <div onmouseover="mouseIn(2,15)" onmouseout="mouseOut(2)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-3"></p>
  </div>
  <div onmouseover="mouseIn(3,10)" onmouseout="mouseOut(3)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-4"></p>
  </div>
  <div onmouseover="mouseIn(4,60)" onmouseout="mouseOut(4)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-5"></p>
  </div>
  <div onmouseover="mouseIn(5,10)" onmouseout="mouseOut(5)" class="star"></div>
</div>

100% PHP code with the / javascript / jquery style entered

<?php

    $_1 = 3;
    $_2 = 5;
    $_3 = 7;
    $_4 = 10;
    $_5 = 15;
    $total = $_1 + $_2 + $_3 + $_4 + $_5;

    if ( $total != 0 )
    {
        // porcentagem
        $porcent_1     = ($_1 / $total) * 100;
        $porcent_2     = ($_2 / $total) * 100;
        $porcent_3     = ($_3 / $total) * 100;
        $porcent_4     = ($_4 / $total) * 100;
        $porcent_5     = ($_5 / $total) * 100;  
    }

echo "
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script>
    function mouseIn(star,percentual){
      $('.p-'+star).html(percentual+'%');
    }

    function mouseOut(star){

    $('.p-'+star).html('');
    }
</script>

<style>
.inline {
  margin-left: 10px;
  height: 80px;
  display: inline-block;
}

.percentage {
  margin-left: 12px;
  display: inline;
}

.star {
  background-image: url('https://cdn1.iconfinder.com/data/icons/web-interface-part-2/32/star-512.png');
  width: 50px;
  height: 50px;
  background-size: contain;
  float:initial;
}
</style>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-1'></p>
  </div>
  <div onmouseover='mouseIn(1,$porcent_1)' onmouseout='mouseOut(1)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-2'></p>
  </div>
  <div onmouseover='mouseIn(2,$porcent_2)' onmouseout='mouseOut(2)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-3'></p>
  </div>
  <div onmouseover='mouseIn(3,$porcent_3)' onmouseout='mouseOut(3)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-4'></p>
  </div>
  <div onmouseover='mouseIn(4,$porcent_4)' onmouseout='mouseOut(4)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-5'></p>
  </div>
  <div onmouseover='mouseIn(5,$porcent_5)' onmouseout='mouseOut(5)' class='star'></div>
</div>
"

?>