I am trying to make a cost chart for my school project that measures planned and actual costs of projects, I got local storage working in a normal bar chart thanks to another post on here but cant get it working on a this chart as it requires two datasets.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LS&INPUTS - Colum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<p class="chart-heading">Job progress</p>
<div class="container">
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<div class="inputs-container">
<div class="input-title">
<p>Job</p>
<p>Job progress(%)</p>
</div>
<!-- Input 1 -->
<div class="inputfield">
<input class="labelinput" type="text" id="input1text" onkeyup="updateLabel()" maxlength="10">
<input class="plannedcost" type="number" id="plannedinput1" onchange ="updatePC()">
<input class="actualcost" type="number" id="actualinput1" onchange ="updateAC()">
</div>
<!-- Input 2 -->
<div class="inputfield">
<input class="labelinput" type="text" id="input2text" onkeyup="updateLabel()" maxlength="10">
<input class="plannedcost" type="number" id="plannedinput2" onchange="updatePC()">
<input class="actualcost" type="number" id="actualinput2" onchange ="updateAC()">
</div>
<!-- Input 3 -->
<div class="inputfield">
<input class="labelinput" type="text" id="input3text" onkeyup="updateLabel()" maxlength="10">
<input class="plannedcost" type="number" id="plannedinput3" onchange="updatePC()">
<input class="actualcost" type="number" id="actualinput3" onchange ="updateAC()">
</div>
<!-- Input 3 -->
<div class="inputfield">
<input class="labelinput" type="text" id="input4text" onkeyup="updateLabel()" maxlength="10">
<input class="plannedcost" type="number" id="plannedinput4" onchange="updatePC()">
<input class="actualcost" type="number" id="actualinput4" onchange ="updateAC()">
</div>
<!-- Input 5 -->
<div class="inputfield">
<input class="labelinput" type="text" id="input5text" onkeyup="updateLabel()" maxlength="10">
<input class="plannedcost" type="number" id="plannedinput5" onchange="updatePC()">
<input class="actualcost" type="number" id="actualinput5" onchange ="updateAC()">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
let labelData = loadLabelFromLocalStorage();
let plannedCostData = loadPCFromLocalStorage();
let actualCostData = loadACFromLocalStorage();
setUILabel(labelData);
setUIPCData(plannedCostData);
setUIACData(actualCostData);
const ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelData,
datasets: [{
data: actualCostData,
backgroundColor: "#2E9CCA",
},{
data: plannedCostData,
backgroundColor: "#AAABB8",
}]
},
options: {
plugins: {
legend: {
display: false,
}
},
scales: {
y: {
beginAtZero: true,
min: 0,
}
}
}
});
// add label
function addLabel(chart, data) {
chart.data.labels.forEach((dataset) => {
dataset.data = [...data]
});
chart.update();
}
function updateLabel(event) {
if (event) event.preventDefault();
labelData = getUILabel();
saveLabelToLocalStorage(labelData);
addLabel(myChart, labelData);
}
//Updating chart with values
function setUILabel(data) {
document.querySelectorAll('.labelinput').forEach((el, i) => el.value = data[i] || '');
}
function getUILabel() {
return Array.from(document.querySelectorAll('.labelinput'))
.map(el => String(el.value));
}
function saveLabelToLocalStorage(labelData) {
localStorage.setItem('Label', JSON.stringify(labelData));
}
function loadLabelFromLocalStorage() {
return JSON.parse(localStorage.getItem('Label') || '[]');
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//add "planned cost" data
function addPC(chart, data) {
chart.data.datasets.forEach((dataset) => {
dataset.data = [...data]
});
chart.update();
}
//Calling input values to update chart
function updatePC(event) {
if (event) event.preventDefault();
plannedCostData = getUIPCData();
savePCToLocalStorage(plannedCostData);
addPC(myChart, plannedCostData);
}
//Updating chart with values
function setUIPCData(data) {
document.querySelectorAll('.plannedcost').forEach((el, i) => el.value = data[i] || '');
}
function getUIPCData() {
return Array.from(document.querySelectorAll('.plannedcost'))
.map(el => Number(el.value));
}
function savePCToLocalStorage(plannedCostData) {
localStorage.setItem('number2', JSON.stringify(plannedCostData));
}
function loadPCFromLocalStorage() {
return JSON.parse(localStorage.getItem('number2') || '[]');
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//add actual cost
function addAC(chart, data) {
chart.data.datasets.forEach((dataset) => {
dataset.data = [...data]
});
chart.update();
}
//Calling input values to update chart
function updateAC(event) {
if (event) event.preventDefault();
actualCostData = getUIACData();
saveACToLocalStorage(actualCostData);
addAC(myChart, actualCostData);
}
//Updating chart with values
function setUIACData(data) {
document.querySelectorAll('.actualcost').forEach((el, i) => el.value = data[i] || '');
}
function getUIACData() {
return Array.from(document.querySelectorAll('.actualcost'))
.map(el => Number(el.value));
}
function saveACToLocalStorage(actualCostData) {
localStorage.setItem('number3', JSON.stringify(actualCostData));
}
function loadACFromLocalStorage() {
return JSON.parse(localStorage.getItem('number3') || '[]');
}
body {
background-color:#25274D;
}
.container {
flex: 0 0 auto;
width: 100%;
box-sizing: border-box;
display: block;
max-width: 100%;
}
.card {
width: 57.5rem;
height: 18rem;
background-color: white;
border-radius: 4px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.inputfield {
display: flex;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
border-radius: 4px;
width: 0.5rem;
}
.inputs-container {
display: grid;
gap: 0.65rem;
}
.chart-heading {
text-align: left;
padding: 1.2rem 0 1.2rem 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
width: 100%;
}
.input-title {
display: flex;
gap: 8rem;
}
.plannedcost {
width: 3.5rem;
}
.actualcost {
width: 3.5rem;
}
I tried the code above but when increasing the value of planned cost bar the adjacent value actual cost bar increases aswell.