Search code examples
javascriptdynamicchartsgoogle-visualizationpie-chart

How to create a Google Pie Chart with dynamic data?

I'm struggling to get the below google pie chart to reflect dynamic data found within a html table on the same page.

<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([
      ['Answer', 'Percentage'],
      ['Yes',     10], //This static data needs to reflect dynamic data from html table
      ['No',      3], //This static data needs to reflect dynamic data from html table
      ['Maybe',  7], //This static data needs to reflect dynamic data from html table
    ]);

    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>

HTML Table:

<table border="1" id="results">
    <td>Result</td>
    <td> <?php echo $q['answer']; ?> </td>
</table>

The html table displays its data with this line:

<td><?php echo $q['answer']; ?></td>

The 'answer' can be yes, no or maybe which is defined through analysis elsewhere seen here:

function findAnswer($question) {
    $results=array();
    foreach($question['answer'] as $q) {
            $answer=$API->Analysis($answer['text']);
            if($answer!=false) {
                $results[]=array(
                    'answer'=>$answer,
                    );
            }
        }     
    }

I need the pie chart to reflect the answers yes, no or maybe to summarize the html table.

How can I get the pi chart to reflect something like this (below) where answers can change every time the the query is resubmitted?:

$q['answer']=='yes'
$q['answer']=='no'
$q['answer']=='maybe'

Thanks in advance, been trying different methods for absolutely ages!

Solution

  • Here's one way...

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

function drawChart() {
  // init google table
  var dataTable = new google.visualization.DataTable({
      cols: [
        { label: 'Answer', type: 'string' },
        { label: 'Result', type: 'number' }
      ]
  });

  // get html table rows
  var results = document.getElementById('results');
  Array.prototype.forEach.call(results.rows, function(row) {
    // exclude column heading
    if (row.rowIndex > 0) {
      dataTable.addRow([
        { v: (row.cells[0].textContent || row.cells[0].innerHTML).trim() },
        { v: 1 }
      ]);
    }
  });

  var dataSummary = google.visualization.data.group(
    dataTable,
    [0],
    [{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
  );

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

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(dataSummary, options);
}
    table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid black;
  padding: 4px 4px 4px 4px;
  text-align: center;
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<table id="results">
  <thead>
    <tr>
      <th>Answer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Yes</td>
    </tr>
    <tr>
      <td>No</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
    <tr>
      <td>Maybe</td>
    </tr>
  </tbody>
</table>