Going through tutorial, not rendering an interactive chart

GoJS
1

Not sure what I am doing wrong. Trying to follow along with the tutorials on building an interactive graph but only getting a square box as my output.

This is the code I have written

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="go.js"></script>
    <script>
        function init() {
            var $ = go.GraphObject.make;
            myDiagram = $(go.Diagram, "decisionTree");
            var nodeDataArray = [
                { key: "Alpha" },
                { key: "Beta" }
            ];
            var linkDataArray = [
                { to: "Beta". from: "Alpha" }
            ];
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
        }
    </script>
</head>
2

Check the console window. You should have gotten a syntax error about the period following "Beta".

Check that the go.js file in your directory is in fact the library file that we provide.

Do you actually see that 300x300 pixel HTML DIV element empty on your page?

3

I made a few changes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    <script>
        function init() {
            var $ = gp.GraphObject.make;
            myDiagram = $(go.Diagram, "decisionTree");
            var nodeDataArray = [
                { key: "Alpha" },
                { key: "Beta" }
            ];
            var linkDataArray = [
                { to: "Beta", from: "Alpha" }
            ];
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
        }
    </script>
</head>
<body onload="init"()>
    <div id="decisionTree" style="width:300px; height:300px; border:1px solid black;"></div>


</body>

</html>

Yes, I see an empty 300x300 pixel HTML DIV on my page

4

And what do you see in the console when you load this page?

You should see yet another error caused by a typo: gp.GraphObject....

5

Not seeing an error, but have amended that line

6

I do not understand how you could not have gotten an error when loading the page with either of those typos. Try setting a breakpoint in the JavaScript code to make sure the code is being executed.

Are you able to run samples such as Minimal GoJS Sample ? And if you copy that page to load from the same directory as your page, after changing the script tag to load the go.js library file from the same place?

7

I don’t think the javascript code is being executed, not quite sure why

8

Have you disabled JavaScript, either for that page or for all pages?
Are you just opening the page as a file with your browser or are you serving the page on a local web server in localhost:?
Try using a different browser and/or on a different machine.

9

Tried the minimal example and it worked, will try work my way from this to figure out what I did wrong. Thanks

10

I just tried and found a couple more typos that I didn’t catch before. Here’s what works:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    <script>
        function init() {
            var $ = go.GraphObject.make;
            var myDiagram = $(go.Diagram, "decisionTree");
            var nodeDataArray = [
                { key: "Alpha" },
                { key: "Beta" }
            ];
            var linkDataArray = [
                { to: "Beta", from: "Alpha" }
            ];
            myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
        }
    </script>
</head>
<body onload="init()">
    <div id="decisionTree" style="width:300px; height:300px; border:1px solid black;"></div>
</body>
</html>

Your call to init() was wrong – the parens were outside of the attribute value string.

I hope you can figure out how to avoid writing syntactically invalid HTML, CSS, and JavaScript.