Meter with percentage

Question

I have a system of evaluation of the services that my company offers. I need to display a "meter" of the ratings with percentage.

Something like that this draft but I have no idea how front-end. I have the back-end of the percentage already working.

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

Answer 1

If you want something fast just to display the information, you can use the Gauge Chart of Google Chart, which generates exactly this type of meter. Follow 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>
<div id="chart_div" style="width: 400px; height: 120px;"></div>

Answer 2

I was trying with Jquery (Hide show) but it broke element line inline and it was getting very strange, with this I decided to use the good old Javascript Puro and to set the value within each <p> I used Jquery. Warning beforehand that is not the best solution(I will refactor this answer later using 100% Jquery with a code + clean).

The answer preview is without PHP (because I don’t know any PHP fiddle), but I will post a code of how it would look with your PHP at 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>

<div class="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/javascript/jquery style inserted

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

?>