Гистограмма Google из базы данных Mysql
У меня есть MySQL базы данных с 3 полями регион (vachar), new_customers (int) и old_customers (int).
Я пытаюсь создать гистограмму с диаграммами Google и PHP, но это не работает. Я думаю, что я делаю что-то не так на эхо.
Вот мой код:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawMaterial);
function drawMaterial() {
var data = google.visualization.arrayToDataTable([
['Region', 'New Customers', 'Old Customers'],
<?php
$query = "SELECT sum(new_customers) AS new, sum(old_customers) AS old, region FROM daily GROUP BY region";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".$row['region']."',";
echo "['".$row['new']."',";
echo "['".$row['old']."',";
}
?>
]);
var options = {
title: 'Country wise new and returned visitors',
bars: 'horizontal'
};
var material = new google.charts.Bar(document.getElementById('barchart'));
material.draw(data, options);
}
</script>
Решение
Проблема в том, что диаграмма не принимает три параметра в переменной данных.
На данный момент у вас это выглядит так: ['Region', 'New Customers', 'Old Customers'],,
Измените это на: ['Region', 'New Customers'],.
в while loop, PHP не распознает ни один столбец с именем $row['new'] или же $row['old'], Вместо этого используйте индексы и измените свое эхо на:
echo "['".$row[2]." [".$row[0]."]', ".$row[1]."],«;
Я бы также порекомендовал вам иметь запрос SQL вне функции и иметь только итерацию по результатам SQL ( while loop с echo).
Кроме того, вы не загружали графики должным образом. Вы забыли добавить слово «диаграммы»:
google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMaterial);
Это окончательное решение:
<?php
include("YOUR PHP CONNECT FILE");
$query = "SELECT sum(new_customers) AS new, sum(old_customers) AS old, region FROM daily GROUP BY region";
$exec = mysqli_query($YOURCONNECTIONVARIABLE ,$query);
?>
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMaterial);
function drawMaterial() {
var data = google.visualization.arrayToDataTable([
['Region', 'New Customers'],
<?php
while($row = mysqli_fetch_array($exec)){
echo "['".$row[2]." [".$row[0]."]', ".$row[1]."],";
}
?>
]);
var options = {
title: 'Country wise new and returned visitors',
bars: 'horizontal'
};
var material = new google.charts.Bar(document.getElementById('barchart'));
material.draw(data, options);
}
</script>
</head>
<body>
<div id="barchart" style="width: 100%; height: 40em;"></div>
</body>
</html>
Дайте знать, если у вас появятся вопросы.
Другие решения
Других решений пока нет …