Chart numbers from Google Charts

Asked

Viewed 414 times

0

I want to turn the percentage graph data into real numbers, how do I do it?
I tried to read the documentation but could not find.

Code: 

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="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 graphic

1 answer

0

You can do with a reply json I will pass you what I have here which is in php + mysql + json change according to your need.

php statistic.

    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>    
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<div id="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>

dadosestatistica.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 with respect to Piechart other statistical charts sometimes need more columns.

Browser other questions tagged google-charts graphic

You are not signed in. Login or sign up in order to post.