I am currently working on developing a dynamic bar graph using JSON data that changes based on the applied filter.
The objective is to display the TYPE associated with the PERIOD in the graph, but only if it exists. If not, then nothing should be shown.
Although I managed to create the graph as per this helpful discussion on Stack Overflow, it requires all data options to be available, which is not always the case.
One issue I encountered is that if a certain TYPE is missing for a particular PERIOD, it shifts that TYPE back into the previous PERIOD, which is not the desired behavior.
Two examples are provided below:
- Two months featuring two types, but only 3 values (appears correct)
[
{
"Period": "2023-12",
"Total": 2238.86,
"Type": "Drinks"
},
{
"Period": "2023-12",
"Total": 4672.35,
"Type": "Food"
},
{
"Period": "2024-01",
"Total": 1166.5,
"Type": "Drinks"
}
]
- Three months with three types and 4 values (data from second period shifted to the first period)
[
{
"Period": "2023-11",
"Total": 2782.13,
"Type": "Other"
},
{
"Period": "2023-12",
"Total": 2238.86,
"Type": "Drinks"
},
{
"Period": "2023-12",
"Total": 4672.35,
"Type": "Food"
},
{
"Period": "2024-01",
"Total": 1166.5,
"Type": "Drinks"
}
]
Data from second period shifted to the first period
Despite spending days researching and experimenting with various approaches, no solution seems to work.
Below is the code snippet used based on the aforementioned topic:
jQuery.ajax({
url: "../../ajax/barGraph.php?period=<?= $period; ?>",
type: "GET",
dataType: 'json',
success: function(soldeInfo) {
let labels = [...new Set(soldeInfo.map((x) => x.Period))];
let datasets = soldeInfo.reduce(function (acc, cur) {
let Type = acc.find((x) => x.label == cur.Type);
if (Type == null) {
let color = '';
switch (cur.Type) {
case 'Food':
color = 'red';
break;
case 'Drinks':
color = 'green';
break;
default:
color ='gray';
}
Type = {
label: cur.Type,
data: [cur.Total],
backgroundColor: color,
borderColor: color,
borderWidth: 1,
};
acc.push(Type);
} else {
Type.data.push(cur.Total);
}
return acc;
}, []);
var soldeInfo = {
type: 'bar',
data: {
labels: labels,
datasets: datasets,
},
};
const soldeChart = document.getElementById('chartSolde');
new Chart(soldeChart, soldeInfo);
}
});
Thank you!