Я пытаюсь перерисовать круговую диаграмму в зависимости от выбранной опции, но я не знаю, как использовать для этой цели ajax с такой диаграммой.
Диаграмма должна отображать тип страховки иденьги за каждого из них.Я уже мог сделать круговую диаграмму с данными из моей базы данных MYSQL с помощью этого кода:
SELECT from Index.php
<select id="insurance" class="col-md-5" onChange="drawChart(this.value);" >
<option value="0">Choose type of insurance</option>
<option value="ALL">ALL</option>
<option value="LIFE">Life</option>
<option value="PERSONAL">Personal</option>
<option value="PROPERTY">Property</option>
<option value="FIRE">Fire</option>
</select>
Div для круговой диаграммы
<div id="piechart" style="width: 900px; height: 500px;"></div>
Запрос для приведенного ниже сценария
$query = "SELECT INSURANCE, SUM(MONEY) AS number FROM insurance_money group by INSURANCE";
$result = mysqli_query($connect, $query);
Скрипт для круговой диаграммы
<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([
[ 'INSURANCE', 'MONEY'],
<?php
while($row = mysqli_fetch_array($result))
{
echo "['".$row["INSURANCE"]."', ".$row["number"]."],";
}
?>
]);
var options = {
title: 'Percentage',
width: '100%',
//is3D:true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
Прямо сейчас на круговой диаграмме отображаются все значения правильно, но она не изменяется при выборевариант, поэтому, когда я выбираю опцию «Все» прямо сейчас, это правильно, но с опцией «Жизнь» нужно только показать общую сумму денег от страхования жизни.Как я могу это сделать?