'GoJS Diagram not loading at initial 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();
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.
Solution 1:[1]
I found the solution to be the problem to be the load function initially being called before the div element is available. After adding a window.addEventListener('DOMContentLoaded', init); it is working fine now.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | abhishek gopinath |
