function createChart(container, title, data, hasValue2, hasValue3, isPercentage, isReversed) {
const chartId = 'chart_' + container;
console.log('Creating chart with ID:', chartId);
// Call the createChartCard function to wrap the chart in a Bootstrap card
createChartCard(title, chartId);
// Call Highcharts.chart() after appending the chart container to the DOM
console.log('Rendering chart:', chartId);
// Create the Highcharts chart
Highcharts.chart(chartId, {
chart: {
borderColor: '#4572A7',
plotBorderWidth: 2,
//plotBorderColor: '#CCCCCC',
type: 'line',
// width: 400, // Adjust the width as needed
// height: 200, // Adjust the height as needed
},
credits: {
enabled: false
},
title: {
text: title,
style: {
fontSize: '16px', // Set the font size to 10 pixels
},
},
exporting: {
enabled: true, // Enable exporting
chartOptions: {
chart: {
width: 841, // Set the chart width to fit the landscape A4 paper (841mm)
height: 595, // Set the chart height to fit the landscape A4 paper (595mm)
margin: [50, 50, 50, 50], // Set the chart margins (top, right, bottom, left)
},
},
},
legend: {
enabled: hasValue2 || hasValue3, // Show legend if either value2 or value3 is present
itemStyle: {
color: 'transparent', // Make the legend text color transparent
},
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: function () {
// Hide legend entry for "Series3" when chart only has "value1" and "value2"
if (!hasValue3 && this.name === 'Series 3') {
return '';
}
return this.name; // Show other legend entries as usual
},
},
xAxis: {
//lineColor: '#FF0000',
lineWidth: 2,
tickLine: 0,
tickLength: 0,
//lineColor: 'transparent',
type: 'datetime',
//title: {
// text: 'Date',
// },
labels: {
rotation: -90,
y: 10,
formatter: function () {
// Custom formatter function to display the date as "dd/m/yyyy" without leading zeros in the year
// const date = new Date(this.value);
//const day = date.getDate();
// const month = date.getMonth() + 1; // Months are zero-based, so we add 1
// const year = date.getFullYear().toString().slice(-2); // Get the last two digits of the year
// Concatenate the formatted date components
//return day + '/' + month + '/' + year;
return Highcharts.dateFormat('%e %b %y', this.value);
},
style: {
fontSize: '12px', // Set the font size to 10 pixels
},
},
//offset: 0, // Set the offset to move the labels closer to the chart
},
yAxis: {
title: {
text: isPercentage ? 'Percentage' : '',
},
reversed: isReversed,
labels: {
x: -10,
formatter: function () {
if (isPercentage) {
return this.value;
} else if (Math.round(this.value) === this.value) {
return this.value; // Display as a whole number if it is an integer
} else {
return this.value.toFixed(2); // Otherwise, display with 2 decimal places
}
if (isReversed) {
return -this.value; // Reverse the axis values
} else {
return this.value;
}
},
style: {
fontSize: '12px', // Set the font size to 10 pixels
},
},
//offset: 0, // Set the offset to move the labels closer to the chart
max: isPercentage ? 100 : null,
//softMin: isPercentage ? 0 : 0,	   // Set max to 100 if isPercentage is true
},
tooltip: {
formatter: function () {
let tooltip = Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br>';
if (isPercentage) {
tooltip += 'Percentage: ' + (this.y).toFixed(2) + '<br>';
} else if (Math.round(this.y) === this.y) {
tooltip += 'Value: ' + this.y + '<br>';
} else {
tooltip += 'Value: ' + this.y.toFixed(2) + '<br>';
}
if (hasValue2 && this.point.y2 !== undefined) {
if (isPercentage) {
tooltip += 'Percentage 2: ' + (this.point.y2).toFixed(2) + '<br>';
} else if (Math.round(this.point.y2) === this.point.y2) {
tooltip += 'Value 2: ' + this.point.y2 + '<br>';
} else {
tooltip += 'Value 2: ' + this.point.y2.toFixed(2) + '<br>';
}
}
if (hasValue3 && this.point.y3 !== undefined) {
if (isPercentage) {
tooltip += 'Percentage 3: ' + (this.point.y3).toFixed(2) + '<br>';
} else if (Math.round(this.point.y3) === this.point.y3) {
tooltip += 'Value 3: ' + this.point.y3 + '<br>';
} else {
tooltip += 'Value 3: ' + this.point.y3.toFixed(2) + '<br>';
}
}
return tooltip;
},
},
series: [
// Series 1 (value1)
{
name: '',
data: data.map(item => ({
x: Date.parse(item.x),
y: isPercentage ? item.y : parseFloat(item.y),
})),
color: 'black', // Default line color for Value 1
//visible: !hasValue2 && !hasValue3, // Show only if value2 and value3 are false
lineWidth: 4, // Increase the line width for this series
marker: {
enabled: true,
radius: 4, // Increase the marker size for this series
}, 
},
// Series 2 (value2)
hasValue2
? {
name: '',
data: data.map((item, index) => ({
x: Date.parse(item.x),
y: item.y2 !== undefined ? (isPercentage ? item.y2 : parseFloat(item.y2)) : null,
//color: index > 0 && item.y2 < data[index - 1].y2 ? 'red' : 'black',
})),
dashStyle: 'dot', // Set dash style for Value 2
showInLegend: hasValue2,
lineWidth: 3, // Set the line width to 3
color: 'black', 
marker: {
enabled: true,
radius: 4, // Increase the marker size for this series
symbol: 'circle', // Increase the marker size for this series
},
}
: {},
// Series 3 (value3)
hasValue3
? {
name: '',
data: data.map(item => ({
x: Date.parse(item.x),
y: item.y3 !== undefined ? (isPercentage ? item.y3 : parseFloat(item.y3)) : null,
})),
color: 'black', // Default line color for Value 3
dashStyle: 'longdash', // Set dash style for Value 3
showInLegend: hasValue3,
lineWidth: 4, // Increase the line width for this series
marker: {
enabled: true,
radius: 4, // Increase the marker size for this series
symbol: 'circle',// Increase the marker size for this series
}, 
}
: {},
],
});
}
function createChartCard(title, chartId) {
const cardHtml = `
<div class="col-md-6">
<div class="card h-100 w-100">
<div class="card-body" style="height: 100%;">
<div id="${chartId}"></div>
</div>
<div class="card-footer text-muted"></div>
</div>
</div>
`;
$('#chartContainer').append(cardHtml);
}
function processData(data) {
const chartsData = {};
data.forEach((row) => {
const chartname = row.chartname;
const isPercentage = Boolean(parseInt(row.ispercentage)); // Convert '0' to false, '1' to true
const isReversed = Boolean(parseInt(row.isreversed)); // Convert '0' to false, '1' to true
console.log(row.isreversed);
if (!chartsData[chartname]) {
chartsData[chartname] = {
title: row.user + ' - ' + row.jobname + ' - ' + chartname,
data: [],
hasValue2: false,
hasValue3: false,
isPercentage: isPercentage,
isReversed: isReversed,
};
}
const x = row.wedate;
const y = parseFloat(row.value1);
let dataPoint = { x, y };
if (row.value2 !== null) {
dataPoint.y2 = parseFloat(row.value2);
chartsData[chartname].hasValue2 = true;
}
if (row.value3 !== null) {
dataPoint.y3 = parseFloat(row.value3);
chartsData[chartname].hasValue3 = true;
}
chartsData[chartname].data.push(dataPoint);
chartsData[chartname].isPercentage = isPercentage; // Set isPercentage property for the chart
chartsData[chartname].isReversed = isReversed; // Set isReversed property for the chart
});
return Object.values(chartsData);

.highcharts-yaxis .highcharts-axis-line {
stroke-width: 10;
}