Hope you have a great time and also hope that you can help me.
I'm trying to code a Doughnut Chart with ChartJS. I have a database in which I have a table called "Signal Quality". In this table I will have five ocurrences: N/A, Excellent, Good, Average, Bad signal. So first, I create an index for each and count how many there are and then store them in an array and for each index will have a label. Here is what I have as an array :
$dataPoints = array(
array("label" => "Excellent ", "value" => $lqi_excellent),
array("label" => "Good ", "value" => $lqi_good),
array("label" => "Average ", "value" => $lqi_average),
array("label" => "Limit ", "value" => $lqi_limit),
array("label" => "N/A ", "value" => $lqi_na)
);
Here is my script code :
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById("MyChart"), {
type: 'doughnut',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [1,2,3,4,5]
}
]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
</script>
My goal would be to be able to replace the labels and data by the values of the array. How can I do it please?
use foreach to create two array
$labelArray = array();
foreach ($dataPointsas as $key => $val) {
$labelArray[$key] = $val['label'];
}
$valueArray = array();
foreach ($dataPointsas as $key => $val) {
$valueArray[$key] = $val['value'];
}
then use
labels: $labelArray
and
data: $valueArray