I try to adapt a simple chartjs code in order to modify time display according to values from a select field into my html page. 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. The alert message shows me the good value.
The graph display works correctly, if I fix the time value. But when I change the time value to a variable link to the select field that become wrong…
Here is the code :
<div id="mastercenter_graph">
<select id="start_time" onchange="run()" >
<option value=-10000 >10s</option>
<option value=-3600000 select="selected">1hr</option>
</select>
<div id="myChart">
<canvas></canvas>
</div>
<script>
const form = document.querySelector('form#refresh-form');
const ctx = document.querySelector('#myChart canvas').getContext('2d');
var start_value = -260000;
var selectElmt = document.getElementById("start_time");
function run() {
var start_value = document.getElementById("start_time").value;
alert(start_value);
myChart.update();
}
const myChart = new Chart(ctx, {
type: 'line',
plugins: [ChartDatasourcePrometheusPlugin],
options: {
animation: {
duration: 0,
},
scales: {},
plugins: {
'datasource-prometheus': {
prometheus: {
endpoint: 'http://192.168.1.80:9090/',
},
// query: ['node_load1', 'node_load5', 'node_load15'],
query: 'sum by (job) (memory_usage_p)',
// query: customReq,
timeRange: {
type: 'relative',
start: start_value,
end: 0,
msUpdateInterval: 10000,
},
},
},
},
});
</script>
thank you for help.