Google Chart Charts

Question

Google Chart Charts

Navigation

#1 by (0 votes)

0

I want to transform the data from the percentage graph to real numbers, how do I do it? I already tried to read the documentation but I did not find it.

Code:

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      var options = {
        title: 'My Daily Activities'
      };

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));

      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>

</html>

google-charts grafico

asked by anonymous 20.10.2017 / 16:04

1 answer

Error while running the "npm run prod" command in Git Bash to give Build in an Ionic 2 project Bootstrap Plugin Table - Translation for PT-BR

score 0 · Answer 1

You can do with a json answer I'll give you what I have here that is in php + mysql + json change according to your need.

estatistica.php

    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>    
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div" style="width: 100%; height: 800px;"></div>


<script type="text/javascript" language="javascript">
 function drawChart() {
                // call ajax function to get sports data
                var jsonData = $.ajax({
                    url: "dadosestatistica.php",
                    dataType: "json",
                    async: false
                }).responseText;

                var data = new google.visualization.DataTable(jsonData);
                var options = {
         title: 'Título do Gráfico',
         is3D: true,
    };


                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }

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

            google.charts.setOnLoadCallback(drawChart);



    </script>

dataestatistica.php

$sql = "seu sql";


    $retorno = array();



        $res = mysqli_query($conexao,$sql) or die (mysqli_error($conexao));
        if (mysqli_num_rows($res)>0){

            while ($row = mysqli_fetch_assoc($res)) {

                $retorno['cols'][] = array('type' => 'string'); 
                $retorno['rows'][] = array('c' => array( array('v'=> $row['descricao']), array('v'=>(int)$row['contagem'])) );              

            }

            echo( json_encode( $retorno, true ) );
        } else {
            $retorno[] = array(
                    'descricao' => '0',
                    'contagem'  => ''
                );
            echo( json_encode( $retorno, true ) );
        }

This example is relative to PieChart other statistical graphs sometimes require more columns.