Hi everyone,
I tried to find my answer but couldn’t see anything helfull.
I’m working on a line chart that displays fermentation status of a wine. On the Y axis is the amount of sugar left and on the X axis is the date of the mesurment.
If the sugar drops by 10% the first 24h and then an other 10% in the next 48h the curve angle should be different because fermentation went 2 time slower… It should display that the fermentation is slowing down, wich is the goal of this chart…
But the tool is not taking into acount that in between reading one and two there is 24h and between reading 2 and 3 there is 48. It just display between each readings the sugar droped by 10%.
Is there a way to fix that? (I already tried creating a colum of days since the foirst reading but it doesn’t work either)
The Chart:
The Data:
Thanks for you help!
Yohann
Do you mean it should be something like this?
Yes exactly, that’s what il talking about.
Il guessing the tool you used is not through glide?
Sorry to insist but is there any way to have a chart behaving as the one [ThinhDinh] showed?
Thank you for your help,
Yohann
It’s a React chart that Claude AI generated. I think this is doable using Chart.js, I’ll see if that works.
Here’s a video.
Here’s the code used in the JS column.
function customChart(data) {
let chartData = typeof data === 'string' ? JSON.parse(data) : data;
let dates = chartData.map(item => new Date(item.Date));
let densities = chartData.map(item => item.Densite);
let html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fermentation Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
</head>
<body>
<canvas id="fermentationChart" style="width: 100%; height: 400px;"></canvas>
<script>
const dates = ${JSON.stringify(dates)};
const densities = ${JSON.stringify(densities)};
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('fermentationChart').getContext('2d');
const data = {
labels: dates,
datasets: [{
label: 'Densité',
data: dates.map((date, index) => ({x: date, y: densities[index]})),
borderColor: '#27AAE1',
backgroundColor: '#27AAE1',
tension: 0.4,
pointRadius: 4,
pointHoverRadius: 6,
cubicInterpolationMode: 'monotone'
}]
};
const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'd MMM'
}
},
title: {
display: false
},
grid: {
color: 'rgba(0, 0, 0, 0.1)'
}
},
y: {
title: {
display: false
},
suggestedMin: Math.min(...densities) - 50,
suggestedMax: Math.max(...densities) + 50,
grid: {
color: 'rgba(0, 0, 0, 0.1)'
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
return 'Densité: ' + context.parsed.y;
}
}
}
}
};
new Chart(ctx, {
type: 'line',
data: data,
options: options
});
});
</script>
</body>
</html>
`;
let uri = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
return uri;
}
return customChart(p1)
3 Likes
this very cool
Do you have any additional recommendations? If I want to make a Gantt Chart
By the value p1 =
[
{"task": "Task_1", "startdate": "2024-10-28", "enddate": "2024-10-30"},
{"task": "Task_2", "startdate": "2024-11-01", "enddate": "2024-11-10"},
{"task": "Task_3", "startdate": "2024-11-20", "enddate": "2024-11-24"}
]
I tried adjusting the code from your guide. It looks like it’s possible for what I need, and here’s some sample code.
function customChart(data) {
let chartData = typeof data === 'string' ? JSON.parse(data) : data;
const dates = chartData.flatMap(task => [new Date(task.startdate), new Date(task.enddate)]);
const minDate = new Date(Math.min(...dates));
const maxDate = new Date(Math.max(...dates));
minDate.setDate(minDate.getDate() - 3);
maxDate.setDate(maxDate.getDate() + 3);
let html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gantt Chart</title>
<script src="https://cdn.jsdelivr.net/npm/frappe-gantt@0.6.1/dist/frappe-gantt.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt@0.6.1/dist/frappe-gantt.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
body, .gantt .bar-label, .gantt .lower-text, .gantt .upper-text {
font-family: 'Noto Sans', sans-serif;
}
.gantt .bar-wrapper {
cursor: default;
}
.view-mode-buttons {
margin-bottom: 15px;
}
.view-mode-buttons button {
margin-right: 8px;
padding: 8px 15px;
font-family: 'Noto Sans', sans-serif;
font-size: 14px;
color: black;
background-color: #EEEDEB;
border: none;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.view-mode-buttons button:hover {
background-color: #FF7D29;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.view-mode-buttons button:focus {
outline: none;
}
.view-mode-buttons button:active {
transform: translateY(1px);
}
</style>
</head>
<body>
<div class="view-mode-buttons">
<button onclick="changeViewMode('Day')">Day</button>
<button onclick="changeViewMode('Week')">Week</button>
<button onclick="changeViewMode('Month')">Month</button>
</div>
<div style="overflow-x: auto;">
<svg id="gantt"></svg>
</div>
<script>
let gantt;
document.addEventListener('DOMContentLoaded', function () {
const tasks = ${JSON.stringify(chartData)};
const formattedTasks = tasks.map((task, index) => ({
id: task.task,
name: task.task,
start: task.startdate,
end: task.enddate,
progress: 0
}));
gantt = new Gantt("#gantt", formattedTasks, {
view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
bar_height: 20,
arrow_curve: 5,
padding: 18,
view_mode: 'Day',
date_format: 'YYYY-MM-DD',
start_date: new Date('${minDate.toISOString().split('T')[0]}'),
end_date: new Date('${maxDate.toISOString().split('T')[0]}'),
custom_popup_html: null,
on_click: function(task) {
},
on_date_change: function(task, start, end) {
return false;
},
on_progress_change: function(task, progress) {
return false;
},
on_view_change: function(mode) {
return true;
}
});
});
function changeViewMode(mode) {
if (gantt) {
gantt.change_view_mode(mode);
}
}
</script>
</body>
</html>
`;
let uri = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
return uri;
}
return customChart(p1);
I’m going to try changing the Quickchart display to this new one instead. 
1 Like
So it already works for you? Can you share the final result 
