Я рисую круговую диаграмму, используя данные из базы данных.
Моя база данных очень проста, но имеет структуру, отличную от всех примеров, которые я проверял. Так это выглядит так:
id | food | tickets
1 | 300 | 50
Я думаю, что столбец id не нужен, потому что больше записей не будет.
data.php
<?php
//setting header to json
header('Content-Type: application/json');
require_once "../polaczenie.php";
//get connection
$mysqli = @new mysqli($host,$db_user,$db_password,$db_name);
if(!$mysqli){
die("Connection failed: " . $mysqli->error);
}
//query to get data from the table
$query = sprintf("SELECT id,food, tickets FROM arch_kategorie ORDER BY id");
//execute query
$result = $mysqli->query($query);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
//free memory associated with result
$result->close();
//close connection
$mysqli->close();
//now print the data
print json_encode($data);
?>
Когда я проверяю результаты по localhost: //data.php, у меня есть это:
[{ «Пища»: «300», «билеты»: «50»}]
А теперь проблемная часть:
app.php
$(document).ready(function(){
$.ajax({
url : "data.php",
type : "GET",
success : function(data){
console.log(data);
var food= [];
var tickets= [];
for(var i in data) {
food.push(data[i].food);
tickets.push(data[i].tickets);
}
var ctx1 = $("#chartcanvas-1");
var data = {
labels : ["food", "tickets"],
datasets : [{
label : "Result",
data : food, tickets
backgroundColor : [
"#DEB887",
"#A9A9A9"],
borderColor : [
"#CDA776",
"#989898"],
borderWidth : [1, 1]
}]
};
var options = {
title : {
display : true,
position : "top",
text : "Pie Chart",
fontSize : 18,
fontColor : "#111"},
legend : {
display : true,
position : "bottom"}
};
var chart1 = new Chart( ctx1, {
type : "pie",
data : data,
options : options
});
});
},
error : function(data) {
console.log(data);
}
});
И конечно же html:
index.html
<style type="text/css">
#chart-container {
width: 80%;
height: auto;
}
</style>
<div class="chart-container">
<div class="chart-container">
<canvas id="chartcanvas-1"></canvas>
</div>
</div>
Задача ещё не решена.
Других решений пока нет …