Я пытаюсь отобразить данные из базы данных с несколькими записями с помощью круговой диаграммы Google, но для каждой диаграммы требуется уникальный идентификатор, и, следовательно, только первая запись визуализируется на круговой диаграмме. для каждой записи в базе данных?
ниже мой код
<body>
<table border="1px" style="width:600px; line-height:40px;">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>FT</th>
<th>ST</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<td>
<?php echo $row['name'];?>
</td>
<td>
<?php echo $row['email']; ?>
</td>
<td>
<div class="chartpie" id='mypiechart'></div>
<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([
['Category', 'Score'],
<?php
echo "['Mind',".$row['m']."],";
echo "['Will',".$row['w']."],";
echo "['Emotion',".$row['e']."],";
?>
]);
var options = {
legend: {
textStyle: {
color: '#000000'
}
},
backgroundColor: 'transparent',
'width': 550,
'height': 470,
colors: ['#808080', '#FF0000', '#0000FF']
};
var chart = new google.visualization.PieChart(document.getElementById('mypiechart'));
chart.draw(data, options);
}
</script>
</td>
<td>
<div id='piechart'></div>
<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([
['Category', 'Score'],
<?php
echo "['Reformer',".$row['p']."],";
echo "['Server',".$row['s']."],";
echo "['Teacher',".$row['t']."],";
echo "['Encourager',".$row['ex']."],";
echo "['Giver',".$row['g']."],";
echo "['Administrator',".$row['a']."],";
echo "['Compassion',".$row['c']."],";
?>
]);
var options = {
backgroundColor: 'transparent',
'width': 550,
'height': 400,
colors: ['#c78626', '#7c499e', '#8690c2', '#e6e62e', '#4075c9', '#558a48', '#ad4a31']
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
$(document).ready(function() {
$(".chartpie").click(function() {
var ChartID = $(this).prop('id').replace("Image", "");
// you can directly use value imgID variable if its same. or you
//can use from ItemID inner html
var yourValue = $("#ItemID" + ChartID).html();
alert(yourValue);
})
});
</script>
</td>
<tr>
<?php } ?>
</tbody>
</table>
</body>