I have been trying to load a graph from a default selected value in a drop down list. This is the html for the select element.

            <select class="custom-select" id="activity">
                <option disabled value="">Select an activity</option>
                <option selected value="Running">Running</option>
            </select>

And then the javascript goes like this.

   function loop() {
        setTimeout(function () {
            load(activities.value);
            loop();
        }, 5000);
    }



    var activities = document.getElementById("activity");

    load(activities.value);

I tried this and the graph just dows not not load up. But then i tried this

   function loop() {
        setTimeout(function () {
            load(activities.value);
            loop();
        }, 5000);
    }



    var activities = document.getElementById("activity");
    load(activities.value);
    loop();

function load(activity){
    graph= {"class": "go.GraphLinksModel",
                "nodeDataArray": [{}],
                "linkDataArray": [{}]
                 }
    myDiagram.model = go.Model.fromJson(graph);
}

And the initial function call just before loop() does not load the graph. But after 5 seconds once the loop kicks in the graph loads up. And every 5 seconds it keeps loading up just like it should. I also tried adding a onchange event listener to the drop down with 2 more options and added.

    activities.addEventListener("change", () => {
        load(activities.value);});

and once i changed back and forth the graphs load up.

I also tried the myDiagram.requestUpdate(); right after the load(activities.value);.

Where an going wrong? What am i doing wrong?. Appreciate all advices and questions for any more clarification and ofcourse some answers if anyone can help.