I have created multiple line chart, but the second line incorrectly positioned according X-axis, got the same starting point as first line, but by JsonData it has another starting point. How to fix it? No idea.
enter image description here
Function of creating chart:
function createEmployeeChart(chartId, xValues, datasets) {
var uniqueXValues = Array.from(new Set(xValues));
new Chart(chartId, {
type: "line",
data: {
labels: uniqueXValues,
datasets: datasets,
},
options: {
legend: {
display: false
},
},
});
}
Ajax request:
$.ajax({
type: "GET",
url: "/statistics/handlers/candidates/show_candidates_graph_by_employee.php",
data: {
startDate: startDate,
endDate: endDate,
departments: departments,
stage: stage,
responsible_id: responsible_id,
},
success: function (data) {
var jsonData = JSON.parse(data);
if (responsible_id === undefined) {
var employeeIds = Object.keys(jsonData);
// Initialize startDateArray as an empty array
var startDateArray = [];
// Populate startDateArray inside the map function
var datasets = employeeIds.map(function (employeeId, index) {
var employeeData = jsonData[employeeId];
var firstName = employeeData[0].firstName;
var lastName = employeeData[0].lastName;
// Use push to add elements to the existing array
employeeData.forEach(function (item) {
var parsedStartDate = moment(item.startDate, 'YYYY-MM-DD H:i:s');
var parsedEndDate = moment(item.endDate, 'YYYY-MM-DD H:i:s');
// Check if the time difference is less than one day
var timeDifferenceInDays = parsedEndDate.diff(parsedStartDate, 'days');
var dateFormat = (timeDifferenceInDays < 1) ? 'HH:mm' : 'DD.MM';
var formattedDate = parsedStartDate.format(dateFormat);
startDateArray.push(formattedDate);
});
var stageCountArray = employeeData.map(function (item) {
return parseInt(item.stageCount);
});
return {
label: firstName + ' ' + lastName,
data: stageCountArray,
borderColor: getRandomColor(),
fill: false,
};
});
destroyChart("employeeChart");
if (startDate == endDate) {
$('#employeeChartTitle').text('График по сотруднику: ' + startDate);
} else {
$('#employeeChartTitle').text('График по сотруднику: ' + startDate + ' | ' + endDate);
}
createEmployeeChart("employeeChart", startDateArray, datasets, true);
} else {
// Display data for the selected responsible_id
var startDateArray = jsonData[responsible_id].map(function (item) {
var parsedDate = moment(item.startDate, 'YYYY-MM-DD H:i:s');
var dateFormat = (moment(item.endDate, 'YYYY-MM-DD H:i:s').diff(parsedDate, 'days') <= 0) ? 'HH:mm' : 'DD.MM';
return parsedDate.format(dateFormat);
});
var stageCountArray = jsonData[responsible_id].map(function (item) {
return parseInt(item.stageCount);
});
var firstNameArray = jsonData[responsible_id].map(function (item) {
return item.firstName;
});
var lastNameArray = jsonData[responsible_id].map(function (item) {
return item.lastName;
});
destroyChart("employeeChart");
if (startDate == endDate) {
$('#employeeChartTitle').text('График по сотруднику: ' + startDate);
} else {
$('#employeeChartTitle').text('График по сотруднику: ' + startDate + ' | ' + endDate);
}
createEmployeeChart("employeeChart", startDateArray, [{
label: firstNameArray[0] + ' ' + lastNameArray[0],
data: stageCountArray,
borderColor: 'green',
fill: false,
}], true); // Pass true to indicate that X-axis is startDateArray
}
},
});
Server script:
<?php
include($_SERVER['DOCUMENT_ROOT'].'/common/db_statistics.php');
include($_SERVER['DOCUMENT_ROOT'].'/common/db_auth.php');
$startDate = $_GET['startDate'];
$endDate = $_GET['endDate'];
$departments = $_GET['departments'];
$stage = $_GET['stage'];
$responsible_ids = isset($_GET['responsible_id']) ? explode(',', $_GET['responsible_id']) : [];
$data = array();
if (date('Y-m-d', strtotime($startDate)) == date('Y-m-d', strtotime($endDate))) {
$startDate = date('Y-m-d 00:00:00', strtotime($startDate));
$endDate = date('Y-m-d 23:59:59', strtotime($endDate));
$increment = '+1 hour';
} else {
$increment = '+1 day';
}
$currentStartDate = $startDate;
while ($currentStartDate <= $endDate) {
$startPeriod = date('Y-m-d H:i:s', strtotime($currentStartDate));
$endPeriod = date('Y-m-d 23:59:59', strtotime($startPeriod . $increment));
if (!empty($responsible_ids)) {
foreach ($responsible_ids as $responsible_id) {
$whereClause = " AND date >= '$startPeriod' AND date <= '$endPeriod' AND responsible_id = '$responsible_id'";
$query = "SELECT COUNT(*) as stageCount FROM `bitrix` WHERE departments = '$departments' AND stage = '$stage' $whereClause";
$r_get_created_candidate = mysqli_query($link_bitrix_statistic, $query);
while ($row = mysqli_fetch_assoc($r_get_created_candidate)) {
// Fetch employee information inside the loop
$employeeInfo = mysqli_query($link_auth, "SELECT name, surname FROM users WHERE bitrix_id = '$responsible_id'");
$employeeData = mysqli_fetch_array($employeeInfo);
$firstName = $employeeData['name'];
$lastName = $employeeData['surname'];
$data[$responsible_id][] = [
'firstName' => $firstName,
'lastName' => $lastName,
'startDate' => $startPeriod,
'endDate' => $endPeriod,
'stageCount' => $row['stageCount'],
];
}
}
} elseif (empty($responsible_ids)) {
// If responsible_id is empty, retrieve data for all responsible_id values
$whereClause = " AND date >= '$startPeriod' AND date <= '$endPeriod'";
$query = "SELECT responsible_id, COUNT(*) as stageCount FROM `bitrix` WHERE departments = '$departments' AND stage = '$stage' $whereClause GROUP BY responsible_id";
$r_get_created_candidate = mysqli_query($link_bitrix_statistic, $query);
while ($row = mysqli_fetch_assoc($r_get_created_candidate)) {
// Fetch employee information inside the loop
$employeeInfo = mysqli_query($link_auth, "SELECT name, surname FROM users WHERE bitrix_id = '$row[responsible_id]'");
$employeeData = mysqli_fetch_array($employeeInfo);
$firstName = $employeeData['name'];
$lastName = $employeeData['surname'];
$data[$row['responsible_id']][] = [
'firstName' => $firstName,
'lastName' => $lastName,
'startDate' => $startPeriod,
'endDate' => $endPeriod,
'stageCount' => $row['stageCount'],
];
}
}
$currentStartDate = date('Y-m-d H:i:s', strtotime($startPeriod . $increment));
}
echo json_encode($data);
?>
here’s example of jsonData:
347
:
[{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-06 00:00:00”,…},…]
0
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-06 00:00:00”,…}
1
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-07 00:00:00”,…}
2
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-08 00:00:00”,…}
3
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-09 00:00:00”,…}
4
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-10 00:00:00”,…}
5
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-12 00:00:00”,…}
6
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-13 00:00:00”,…}
7
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-14 00:00:00”,…}
8
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-15 00:00:00”,…}
9
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-16 00:00:00”,…}
10
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-17 00:00:00”,…}
11
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-22 00:00:00”,…}
12
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-23 00:00:00”,…}
13
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-24 00:00:00”,…}
14
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-26 00:00:00”,…}
15
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-27 00:00:00”,…}
16
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-28 00:00:00”,…}
17
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-29 00:00:00”,…}
18
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-11-30 00:00:00”,…}
19
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-12-03 00:00:00”,…}
20
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-12-04 00:00:00”,…}
21
:
{firstName: “Замира”, lastName: “Калиева”, startDate: “2023-12-05 00:00:00”,…}
6521
:
[{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-11-28 00:00:00”,…},…]
0
:
{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-11-28 00:00:00”,…}
1
:
{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-11-29 00:00:00”,…}
2
:
{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-11-30 00:00:00”,…}
3
:
{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-12-01 00:00:00”,…}
4
:
{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-12-03 00:00:00”,…}
5
:
{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-12-04 00:00:00”,…}
6
:
{firstName: “Аида”, lastName: “Жекенова”, startDate: “2023-12-05 00:00:00”,…}
I was trying to fix this issue by changing some option in function of creating chart, I guess there is problem.
