GoJS is not loading at the initial load call

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();

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.

What does load do?
Does it always work after the first call?

Load is just a function to load the graph into myDiagram.model.

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

The first load() function call never loads my model. While the loop() calls the same function call after 5 secs and it just loads the graph. The 5 secs is not important as even at lower intervals its loaded just took 5 secs to make sure the first secs nothing is loading.

The same for the change event listener. The moment i change the selection value it loads my graph.
By the way this was inspired by your sample.

That model has a single node and a single link in it, and the link does not connect with the node. Depending on what your default node template is, you might not see anything.

Your load function doesn’t depend on the activity argument. Even if it did, the point of the loop in the Shop Floor Monitor sample is to update the existing nodes and links in the diagram, not to replace the whole model.

function load(activity) {
    let graph = {};
    switch (activity) {
        case "Running": graph = { "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":"1", "text":"Switch 23", "type":"S2", "loc":"195 225"},
{"key":"2", "text":"Machine 17", "type":"M4", "loc":"183.5 94"},
{"key":"3", "text":"Panel 7", "type":"P2", "loc":"75 211.5"},
{"key":"4", "text":"Switch 24", "type":"S3", "loc":"306 225"},
{"key":"5", "text":"Machine 18", "type":"M5", "loc":"288.5 95"},
{"key":"6", "text":"Panel 9", "type":"P1", "loc":"426 211"},
{"key":"7", "text":"Instr 3", "type":"I1", "loc":"-50 218"} ],
  "linkDataArray": [
{"from":"1", "to":"2"},
{"from":"1", "to":"3"},
{"from":"1", "to":"4"},
{"from":"4", "to":"5"},
{"from":"4", "to":"6"},
{"from":"7", "to":"2"},
{"from":"7", "to":"3"}
 ]}

    myDiagram.model = go.Model.fromJson(graph);
}

Sorry, my actual load function has a switch for changing graph accordingly. There was too much data in it so i didnt dive too deep.
And yes the loop is for the node data updation and link data updation. I was saying the graph is loading just fine but only after either the loop or the change of select option. When I am calling the load(activity); after window.addEventListener('DOMContentLoaded', init); its not loading. I checked the activity variable data it has the value.

This is what happens I load my page

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

This runs but no diagram loads. but i wait 5 secs doing nothing. And then the load(activity) in the loop runs and my diagram appears. I dont intent to put my load in the loop() just tried. But its calling the same load(activity just before the loop();

Im actually using this now in the

            <select class="custom-select" id="activity">
                <option disabled value="">Select an activity</option>
                <option selected value="Running">Running</option>
                <option value="jogging">jogging</option>
                <option value="swimming">swimming</option>
            </select>
load(activities.value);
activities.addEventListener("change", () => {
load(activities.value);});

and not in the loop. The changing the value immediately loads my graph. Here also i call the function in the init(). But only loads after the onchange listener.

Are you sure that the initial value passed to the load function is actually the string “running”? It sure seems to me that the value instead ought to be “Running”, unless your HTML is wrong. Please step through the code to make sure that the Diagram.model is being set to what you want it to be set to initially.

Yes, The value is correct that was a typo i have edited it. The actual values match and the graph appears according to my graph object. But just not on the first call. It should work on the first call itself but my canvas is blank. We can be sure the load function is working since I experimented with the loop() and sat there doing nothing while the loop() called the same function with the same activity value and it loaded the graph this part is what confuses me.

Maybe the first call to loop is happening too early, before the Diagram and its HTMLDivElement have been set up. Check in the debugger at the first call what the size of the Div is – maybe it’s still 0x0 pixels, which is why the user cannot see anything.

Hi Walter,
Thank you so much for your time. That was exactly the issue. I had the display attribute of the element set to ‘none’ and set it to ‘block’ just before the load() call. So it only loaded in the next time it was called. I wanted to show the diagram after the user clicked on one of the dropdown but now i changed my mind and let it be blank canvas untill he chooses an activity. Now its loading initially itself. Thanks again.