CODEWITHSUNDEEP
javascripthtmlgojs
Emm
Emm

Reputation: 2507

Cannot render interactive image using gojs

I would like to create an interactive image using goJs, however when i try and follow the tutorial to create a basic visual the output I get is just a blank box and not an interactive image with the words 'Alpha' and 'Beta' connected by a line.

This is my code:

<!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 src="go.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>

Tutorial: https://www.youtube.com/watch?v=7cfHF7yAoJE#action=share

Upvotes: 0

Views: 130

Answers (1)

Walter Northwoods
Walter Northwoods

Reputation: 4156

You are loading two different versions of the GoJS library. I suggest you remove the line:

<script src="go.js"></script>

EDIT: In addition, there are some typos that I missed before when just reading your code. This actually 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>

Upvotes: 1

Related Questions