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!
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>Ankit Singh
Dynamic pie chart using google chart api
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function() {
drawLeadChart("source", resp.source, 'count');
});
google.charts.setOnLoadCallback(function() {
drawLeadChart("priority", resp.priority, 'count');
});
google.charts.setOnLoadCallback(function() {
drawLeadChart("location", resp.location, 'count');
});
google.charts.setOnLoadCallback(function() {
drawLeadChart("budget", resp.budget, 'count');
});
function drawLeadChart(charClass, apiLeadData, sourceType) {
// Create the data table for Sarah's pizza.
var data = new google.visualization.DataTable();
var obj = [];
$.each(apiLeadData, function(i, ele) {
let innerArr = new Array();
innerArr.push(ele.last_name);
if (sourceType == 'roi') {
innerArr.push(ele.sum / ele.count);
} else {
innerArr.push(ele[sourceType]);
}
obj.push(innerArr);
});
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows(obj);
var options = {
legend: {
position: 'left',
textStyle: {
fontSize: 14
}
},
responsive: true,
chartArea: {
left: 15,
right: 10,
top: 0,
bottom: 20,
width: '100%',
height: '100%'
},
width: '100%'
};
// Instantiate and draw the chart for Sarah's pizza.
var chart = new google.visualization.PieChart(document.getElementById(charClass));
chart.draw(data, options);
}
output This is how it looks
来源：https://stackoverflow.com/questions/35638365/how-to-create-a-google-pie-chart-with-dynamic-data