Link input field to chart object

Hello all,

is it possible to link the value from an input field to the chart object (chart dataset.)
see my attachment please.


The only way to do this would be to use the Chart.js API (chart.js is the charting library we use internally) and build the dataset dynamically with JavaScript. This can be quite involved and requires a good working knowledge of JS unfortunately.

Is it possible to gave me an example with the information i gave before ?

Here is a simple example

this is the javascript

(function(document) {
	"use strict";
	let element = document.createElement("canvas");
	element.id = 'bar-chart';
	document.getElementById("chart-container").appendChild(element);

	let ready = (callback) => {
		if (document.readyState != "loading") callback();
		else document.addEventListener("DOMContentLoaded", callback);
	};

	ready(() => {
		let myChart = new Chart(document.getElementById("bar-chart"), {
			type: 'bar',
			data: {
				labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
				datasets: [{
					label: "Population (millions)",
					backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
					data: [2478, 5267, 734, 784, 433]
				}]
			},
			options: {
				legend: {
					display: false
				},
				title: {
					display: true,
					text: 'Predicted world population (millions) in 2050'
				}
			}
		});
		
		let form = document.getElementById('addData');
		form.addEventListener('submit', (event) => {
			event.preventDefault();
			let FD = new FormData(form);
			let dataPost = Object.fromEntries(FD.entries());
			myChart.data.labels.push(dataPost.country);
			myChart.data.datasets[0].backgroundColor.push(dataPost.color);
			myChart.data.datasets[0].data.push(dataPost.population);
			myChart.update();
		});
		
	});

})(document); // End of use strict