I want to separate two data from one date using Chart JS. For example, I have two data in one date and the bars should not be merged in one date, it should be separate and have the same date.
Because in my case on one line graph the two data is merging on the same date My output There are two data on August 23 and I want to separate the data but needs to have the same date
Fetch Data
<?php
try {
$sql = "SELECT * FROM data.product";
$result = $pdo->query($sql);
if ($result->rowCount() > 0) {
while ($row = $result->fetch()) {
$dateArray[] = $row["item_register"];
$buyArray[] = $row["buy"];
$itemArray[] = $row["item_name"];
$viewArray[] = $row["view"];
}
unset($result);
} else {
echo "No data found";
}
} catch (PDOException $e) {
die("Error" . $e->getMessage());
}
unset($pdo);
// print_r($dateArray);
// print_r($buyArray);
?>
Code
const dateArrayJS = <?php echo json_encode($dateArray); ?>;
const dateChartJS = dateArrayJS.map((day, index) => {
let dayjs = new Date(day);
return dayjs.setHours(0, 0, 0, 0, );
});
const data = {
labels: dateArrayJS,
datasets: [{
label: 'Weekly Sales',
data: <?php echo json_encode($buyArray); ?>,
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
],
borderColor: [
'rgba(255, 26, 104, 1)',
],
hoverBackgroundColor: [
'rgba(255, 26, 104, 1)',
],
borderWidth: 1,
}],
};
const config = {
type: 'bar',
data,
options: {
scales: {
x: {
min: '2022-08-01',
max: '2022-09-10',
type: 'time',
time: {
unit: 'day',
interval: 1,
}
},
y: {
beginAtZero: true
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
function startDateFilter(date) {
const startDate = new Date(date.value);
myChart.config.options.scales.x.min = startDate.setHours(0, 0, 0, 0, );
myChart.update();
}
function endDateFilter(date) {
const endDate = new Date(date.value);
myChart.config.options.scales.x.max = endDate.setHours(0, 0, 0, 0, );
myChart.update();
}