chartjs changing time display using select value

[elderwann]

Hello everybody, I try to adapt a simple chartjs code in order to modify time display according to values from a select field OR input field into my html page (I try both). The fact is I don't understand why the values selected is not linked to the graph variable. The select field seems to work correctly. I test with an alert message and it shows me the good value. If I fix the time value, graph display works correctly. But when I change the time value to a variable link to the select field that become wrong... graph display 'Failed to fetch data'.

In the following code, I try to use input data named "startval", pass the value into the const "startInput", in order to use it in the timeRange section. I didn't succeed doing this job... but when I change the start value into the timeRange section, as for example : -1000, it works perfectly.

Here is the code

`

		<div class="container">
			<form id="refresh-form">
				<input type="text" id="endpoint" placeholder="Prometheus endpoint">
				<input type="text" id="query" placeholder="Prometheus query">
				<input type="text" id="startval" placeholder="Start time">
				
<!--				<select id="start_time" placeholder="Prometheus start" >
					<option value=-1000 >1s</option>
					<option value=-10000 >10s</option>
					<option value=-30000 >30s</option>
					<option value=-300000 >5min</option>
					<option value=-3600000 select="selected">1hr</option>
					<option value=-86400000 >1j</option>
				</select>			-->
			  <button>Refresh</button>
			</form>
		</div>

			<div id="myChart">
				<canvas></canvas>
			</div>				

			<br></br>

			<script>
			const form = document.querySelector('form#refresh-form');
			const endpointInput = document.querySelector('form#refresh-form input#endpoint');
			const queryInput = document.querySelector('form#refresh-form input#query');
			const startInput = document.querySelector('form#refresh-form input#startval');
			const ctx = document.querySelector('#myChart canvas').getContext('2d');
			

			
			endpointInput.value = 'http://192.168.1.80:9090/';
			queryInput.value = 'sum by (job) (memory_usage_p)';
			startInput.value = '-10000';
			
			const myChart = new Chart(ctx, {
				type: 'line',
				plugins: [ChartDatasourcePrometheusPlugin],
				options: {
									
					animation: {
						duration: 0,
					},
					scales: {
							y: {
							suggestedMin: 0,
							suggestedMax: 100
						}
					},
					legend: {
							display: true,
							labels: {
									color: 'rgb(255, 99, 132)',
							}
					},
					plugins: {
					
							subtitle: {
								display: false,
								text: 'Title of the Graph',
								color: 'rgb(255, 99, 132)',
							},
					

						'datasource-prometheus': {
							prometheus: {
								endpoint: endpointInput.value,
							},
							//query: ['node_load1', 'node_load5', 'node_load15'],
							query: queryInput.value,
							//query: customReq,
							timeRange: {
								type: 'relative',
								start: startInput.value,
								end: 0,
								step: 2,
								msUpdateInterval: 10000,
							},
							drawActiveElementsOnTop: false,
							tension: 0,  // Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
							fill: {
								target: 'origin',  // coloration under the line
								above: 'rgb(255, 182, 182)',   // Area will be red above the origin
								below: 'rgb(0, 0, 0)',    // And blue below the origin
							},
							

						},
					},
				},
			});
			

			form.addEventListener('submit', (event) => {
				event.preventDefault();
				myChart.options.plugins['datasource-prometheus'].prometheus.endpoint = endpointInput.value;
				myChart.options.plugins['datasource-prometheus'].query = queryInput.value;
				myChart.options.plugins['datasource-prometheus'].timeRange.start = startInput.value;
				myChart.update();
			});
							
			
			</script>

`

Thank you so much for help.