Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – chartjs changing time display using select value

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here the code, not working but better :

            <div class="container">
            <form id="refresh-form">
                <input type="text" id="endpoint" placeholder="Prometheus endpoint">
                <input type="text" id="query" placeholder="Prometheus query">
                <select id="start_time" onchange="run()" >
                    <option value=-10000 >10s</option>
                    <option value=-3600000 select="selected">1hr</option>
                </select>
              
              
              <button>Refresh</button>
            </form>
        </div>

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

            <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 ctx = document.querySelector('#myChart canvas').getContext('2d');
            
            
            endpointInput.value = 'http://192.168.1.80:9090/';
            queryInput.value = 'sum by (job) (memory_usage_p)';
            
            
            const start = -1 * 60 * 60 * 1000;
            
            const myChart = new Chart(ctx, {
                type: 'line',
                plugins: [ChartDatasourcePrometheusPlugin],
                options: {
                    animation: {
                        duration: 0,
                    },
                    scales: {},
                    plugins: {
                        'datasource-prometheus': {
                            prometheus: {
                                endpoint: endpointInput.value,
                            },
                            // query: ['node_load1', 'node_load5', 'node_load15'],
                            query: queryInput.value,
                            // query: customReq,
                            timeRange: {
                                type: 'relative',
                                start: start,
                                end: 0,
                                msUpdateInterval: 10000,
                            },
                        },
                    },
                },
            });
            

            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 = -10000;
                myChart.update();
            });
                            
            
            </script>

    So in this code the form part works, changing Job name into the input field. The select field I want isn't working, but the display seems ok when I click on the refresh buton. However the start-time value is not taken in account into the " myChart.options.plugins['datasource-prometheus'].timeRange.start = -10000 " line. Here I put a fix value : -10000 just to know if it works and yes the value is display into the graph...

    Conclusion, I don't know why the start_time value is not transmit to the chart. If you have some advise, thank you so much.


  2. 0

    You are setting value to the variable start_value but it isn’t used as the config for the chart.

    You should probably:

    function run() {
    var start_value = document.getElementById("start_time").value;
    alert(start_value);

    myChart.options.plugins['datasource-prometheus'].timeRange.start = start_value;

    myChart.update();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search