Develop Reference

not working to update node of network graph

i'm using highchart to draw network graph.
and i want to change node's color.
my code to update node is
highchart.series[0].nodes[5].update({color: '#ff0000'});
it seem to work, but i get error like this.
Uncaught TypeError: Cannot read property 'concat' of undefined
at t.setNodeState [as setState]
i guess it's not working
when i update edge's node(has no "from or to" link) and move mouse on graph.
how i can update node's color?
enter image description here
const graphData = [
{from: 'Root', to: 'Group1'},
{from: 'Group1', to: 'Group1-1'},
{from: 'Group1-1', to: 'file1-1-1'},
{from: 'file1-1-1', to: 'asset1-1-1'},
{from: 'file1-1-1', to: 'asset1-1-2'},
];
const nodeData = [
{ id: 'Root', color: '#000000'},
{ id: 'Group1', color: '#00ff00' },
{ id: 'Group1-1', color: '#00ff00' },
{ id: 'file1-1-1', color: '#0000ff' },
{ id: 'asset1-1-1', color: '#d0d0d0' },
{ id: 'asset1-1-2', color: '#d0d0d0' },
];
const highchart = Highcharts.chart('highchart', {
chart: {
type: 'networkgraph',
plotBorderWidth: 1,
backgroundColor: 'transparent',
},
title: {
text: undefined
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: true,
linkLength: 100,
integration: 'verlet', // "euler"
},
link: {
width: 1,
color: '#B1B1B0',
dashStyle: 'Dash'
},
dataLabels: {
enabled: true,
y: -1,
style: {
fontSize: 10,
fontFamily: 'NotoSans-SemiBold',
textOutline: false
},
inside: false, // text 반전
textPath: {
enabled: false // circle 에 맞춰 text 곡선처리
},
linkTextPath: {
enabled: false
},
linkFormat: '',
},
point: {
events: {
update: function(param){
console.log('update', param)
}
}
}
},
},
tooltip: {
enabled: false
},
series: [{
name: 'Root',
id: 'Root',
allowPointSelect: true,
data: graphData,
nodes: nodeData,
}]
});
$('#btn').on('click', function(){
highchart.series[0].nodes[5].update({marker: {
fillcolor: '#ff0000'
}});
});
#highchart {
width: 500px;
height: 500px;
background: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<button id="btn">update</button>
<div id="highchart"></div>

The update feature doesn't exist for the nodes. It works for the points - https://api.highcharts.com/class-reference/Highcharts.Point#update
However, you can change the point color in this way:
highchart.series[0].nodes[5].graphic.css({
fill: 'red'
})
Demo: https://jsfiddle.net/BlackLabel/0Lwuce7q/

Conditionally change link color?

I am attempting to change link colors in my GoJS tree depending on a key / value pair in my model data (color, in this case). I am attempting to call my method to change the link color by doing the following:
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
$(go.Shape, { strokeWidth: 2, stroke: colors["gray"] },
new go.Binding("geometry", "color", setLinkColor))); // the link shape and color
However, my setLinkColor method is never called. Here it is for reference:
function setLinkColor(color) {
console.log("value of color: ", color);
switch(color) {
case "critical":
link = go.Shape.stroke(colors["orange"]);
break;
default:
link = go.Shape.stroke(colors["white"]);
}
return link;
}
How can I conditionally color my Links depending on the value of color?
UPDATE
I have tried implementing Walter's suggestion as follows:
var linkColors = {true: colors["orange"], false: colors["white"]};
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
myDiagram.model = new go.GraphLinksModel(
[
{ key: 2, geo: "thing1", color: colors["white"], critical: false },
{ key: 3, geo: "thing2", color: "#F47321", critical: true },
{ key: 4, geo: "thing3", color: colors["white"], critical: false },
{ key: 5, geo: "thing4", color: colors["white"], critical: false },
However this still is not coloring the links, what am I doing wrong?

function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
var myColors = { "A": "red", "B": "green", "C": "blue" };
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; }))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2, color: "A" },
{ from: 1, to: 3, color: "B" },
{ from: 2, to: 2 },
{ from: 3, to: 4, color: "C" },
{ from: 4, to: 1, color: "D" }
]);
}
function test() {
myDiagram.model.commit(function(m) {
m.set(m.linkDataArray[0], "color", "B");
});
}
The link template shows one way of binding the link path's stroke color to the value of the link's data.color property lookup of a CSS color in the myColors object.
The test function shows one way of modifying the color of the first link. More discussion is at https://gojs.net/latest/learn/graphObject.html

How to migrate a chart from Highcharts Demo to Highcharts Cloud

Perhaps others have seen the amazing Force-Directed Network Graph demo which I would dearly love to adapt to my own ends. However, simply copying the code over doesn't seem to be enough.
I'm no longer using the inline-defined data but rather data coming from a Google Sheets file. And I've morphed the code so that it contains more columns in the data. Here's a jsfiddle though without the Google Sheets connection.
(I have tried the Google Sheets connection there but it doesn't work -- for reasons yet to be discovered. The connection is public if anyone wants to fiddle.)
So here's the code that I've dumped into the "Custom Code" panel in the "Customize" section of Highcharts Cloud.
Highcharts.addEvent(
Highcharts.seriesTypes.networkgraph, 'afterSetOptions',
function (e) {
var colors = Highcharts.getOptions().colors,
i = 0,
nodes = {};
e.options.data.forEach(function (link) {
if (link[0] === 'Keyword Research') {
nodes['Keyword Research'] = {
id: 'Keyword Research',
marker: { radius: link[2] }
};
nodes[link[1]] = {
id: link[1], marker: { radius: link[2] }, color: colors[i++]
};
}
else if
(nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1], color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) { return nodes[id]; });
}
);
Highcharts.chart('highcharts-container',
{
chart: { type: 'networkgraph', height: '100%' },
title: { text: 'The Indo-European Language Tree' },
subtitle: { text: 'A Force-Directed Network Graph in Highcharts' },
plotOptions: { networkgraph: { keys: ['from', 'to'], layoutAlgorithm: { enableSimulation: true, friction: -0.9 } } },
series: [{
dataLabels: { enabled: true, linkFormat: '' },
"data": {
"googleSpreadsheetKey": "1kQKkN4auaxsgwms057FkJ7l5g3mhBjR5vp5PPpStDBQ",
"dataRefreshRate": false,
"enablePolling": true,
"startRow": "2",
"endRow": "14",
"startColumn": "1",
"endColumn": "3"
}
}]
}
);
It'd be great to find out how to make it work.
LATER
Setup for GoogleDrive included as a comment in the jsfiddle.

I have not solved this 100%, but have fixed one issue which may lead you to get an answer. You have your data element inside series, but when looking at the highcharts api for googleSpreadsheetKey, they have put it outside series. So, try the following. When I do, I get CORS error in the console.
Highcharts.addEvent(
Highcharts.seriesTypes.networkgraph, 'afterSetOptions',
function (e) {
var colors = Highcharts.getOptions().colors,
i = 0,
nodes = {};
e.options.data.forEach(function (link) {
if (link[0] === 'Keyword Research') {
nodes['Keyword Research'] = {
id: 'Keyword Research',
marker: { radius: link[2] }
};
nodes[link[1]] = {
id: link[1], marker: { radius: link[2] }, color: colors[i++]
};
}
else if
(nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1], color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) { return nodes[id]; });
}
);
Highcharts.chart('highcharts-container',
{
chart: { type: 'networkgraph', height: '100%' },
title: { text: 'The Indo-European Language Tree' },
subtitle: { text: 'A Force-Directed Network Graph in Highcharts' },
plotOptions: { networkgraph: { keys: ['from', 'to'], layoutAlgorithm: { enableSimulation: true, friction: -0.9 } } },
series: [{
dataLabels: { enabled: true, linkFormat: '' }
}],
"data": {
"googleSpreadsheetKey": "1kQKkN4auaxsgwms057FkJ7l5g3mhBjR5vp5PPpStDBQ",
"dataRefreshRate": false,
"enablePolling": true,
"startRow": "2",
"endRow": "14",
"startColumn": "1",
"endColumn": "3"
}
});

Highcharts Cloud doesn't support force directed graph for now.
This series requires network graph module (https://code.highcharts.com/modules/networkgraph.js) which is not imported for charts created in Cloud. Here's the list of imported scripts:
var scripts = [
"highcharts.js",
"modules/stock.js",
"highcharts-more.js",
"highcharts-3d.js",
"modules/data.js",
"modules/exporting.js",
"modules/funnel.js",
"modules/solid-gauge.js",
"modules/export-data.js",
"modules/accessibility.js",
"modules/annotations.js"
];

GoJs Is it possible to have multipe layouts in one diagram

I want to have a diagram which has vertical and horizontal layout in the same diagram. How can I achieve this in gojs?

There are many ways in which you can achieve your goal. I can think of three off-hand. In decreasing order of work:
Create a custom Layout that does what you want. This is the most general and can be the most compatible with the data structures that you have used with your two existing diagrams that you want to combine.
In your case you might be able to use the TableLayout that is in the extensions directory: http://gojs.net/latest/extensions/Table.html. You probably could continue to use Groups, but you would set their Group.layout to null so that they are completely ignored when the layout is performed.
Put everything in one of your existing diagrams into a Group and put everything from your other existing diagram into another Group. The Diagram.layout of the first would be the Group.layout of the first group, and the Diagram.layout of the second diagram would be the Group.layout of the second group.
Note that each Diagram can have exactly one Model (the Diagram.model), so for all three techniques you would need to add all of the data into a single model without getting references between them confused. That means you need to make sure the keys for the nodes are all unique.
Here's an example of how you can put two separate diagrams into a single diagram using the third technique. I'll start with two copies of the Minimal sample, http://gojs.net/latest/samples/minimal.html, where the only change is that one has a ForceDirectedLayout and the other one has a LayeredDigraphLayout. So one will be defined:
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
and the other will be defined:
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.LayeredDigraphLayout),
"undoManager.isEnabled": true
});
But otherwise these two diagrams are exactly like the Minimal sample.
Initially each model of Minimal is created by:
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
So, we first need to create a combined model that is the two models added together. One way to put them together is:
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" },
{ key: "Alpha2", color: "lightblue" },
{ key: "Beta2", color: "orange" },
{ key: "Gamma2", color: "lightgreen" },
{ key: "Delta2", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" },
{ from: "Alpha2", to: "Beta2" },
{ from: "Alpha2", to: "Gamma2" },
{ from: "Beta2", to: "Beta2" },
{ from: "Gamma2", to: "Delta2" },
{ from: "Delta2", to: "Alpha2" }
]);
Again, I'll mention that this is work you would need to do no matter which technique you used. Presumably you have already done this and are just wondering how to handle two layouts.
The third technique I suggested uses Groups to encapsulate what had originally been in a whole Diagram. So let us add two groups to the model and assign each of the original nodes to the corresponding group:
myDiagram.model = new go.GraphLinksModel(
[
{ key: "FD", isGroup: true, category: "FD" }, // NEW
{ key: "LD", isGroup: true, category: "LD" }, // NEW
{ key: "Alpha", color: "lightblue", group: "FD" },
{ key: "Beta", color: "orange", group: "FD" },
{ key: "Gamma", color: "lightgreen", group: "FD" },
{ key: "Delta", color: "pink", group: "FD" },
{ key: "Alpha2", color: "lightblue", group: "LD" },
{ key: "Beta2", color: "orange", group: "LD" },
{ key: "Gamma2", color: "lightgreen", group: "LD" },
{ key: "Delta2", color: "pink", group: "LD" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" },
{ from: "Alpha2", to: "Beta2" },
{ from: "Alpha2", to: "Gamma2" },
{ from: "Beta2", to: "Beta2" },
{ from: "Gamma2", to: "Delta2" },
{ from: "Delta2", to: "Alpha2" }
]);
Now we just need to define each group/category/template:
myDiagram.groupTemplateMap.add("FD",
$(go.Group, "Auto",
{ layout: $(go.ForceDirectedLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
myDiagram.groupTemplateMap.add("LD",
$(go.Group, "Auto",
{ layout: $(go.LayeredDigraphLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
For the purposes of this demonstration the details of the visual appearance of each kind of group does not matter, just as the details of the appearances of the nodes and links do not matter. What does matter to you is that one group template uses one layout and the other uses a different one, there are two group data objects, and all the node data is assigned to the appropriate group.
In this case each group template is being used as a singleton, but perhaps your requirements will result in using more than one of any or all of the group templates.
Now you just need to specify the Diagram.layout to control how the two groups are arranged relative to each other. Perhaps the simplest would be to use a GridLayout:
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.GridLayout, { wrappingColumn: 1 }),
"undoManager.isEnabled": true
});
You can of course customize the layout in whatever manner you need, including using a completely different or custom layout.
Here's the complete code. For brevity I have removed a bunch of comments from the original Minimal sample:
<!DOCTYPE html>
<html>
<head>
<title>Combining 2 Diagrams with Different Layouts</title>
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.5/go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.GridLayout, { wrappingColumn: 1 }),
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 3 },
new go.Binding("text", "key"))
);
myDiagram.groupTemplateMap.add("FD",
$(go.Group, "Auto",
{ layout: $(go.ForceDirectedLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
myDiagram.groupTemplateMap.add("LD",
$(go.Group, "Auto",
{ layout: $(go.LayeredDigraphLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
myDiagram.model = new go.GraphLinksModel(
[
{ key: "FD", isGroup: true, category: "FD" },
{ key: "LD", isGroup: true, category: "LD" },
{ key: "Alpha", color: "lightblue", group: "FD" },
{ key: "Beta", color: "orange", group: "FD" },
{ key: "Gamma", color: "lightgreen", group: "FD" },
{ key: "Delta", color: "pink", group: "FD" },
{ key: "Alpha2", color: "lightblue", group: "LD" },
{ key: "Beta2", color: "orange", group: "LD" },
{ key: "Gamma2", color: "lightgreen", group: "LD" },
{ key: "Delta2", color: "pink", group: "LD" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" },
{ from: "Alpha2", to: "Beta2" },
{ from: "Alpha2", to: "Gamma2" },
{ from: "Beta2", to: "Beta2" },
{ from: "Gamma2", to: "Delta2" },
{ from: "Delta2", to: "Alpha2" }
]);
}
</script>
</head>
<body onload="init();">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:600px"></div>
</div>
</body>
</html>

I am new to GoJs but i tried this one.
Hope it helps :)
var $ = go.GraphObject.make;
//model
var myDiagram1 =
$(go.Diagram, "myNormal", {
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
// define a simple Node template
myDiagram1.nodeTemplate =
$(go.Node, "Horizontal",
// the entire node will have a light-blue background
{
background: "#44CCFF"
},
$(go.Picture,
// Pictures should normally have an explicit width and height.
// This picture has a red background, only visible when there is no source set
// or when the image is partially transparent.
{
margin: 10,
width: 50,
height: 50,
background: "red"
},
// Picture.source is data bound to the "source" attribute of the model data
new go.Binding("source")),
$(go.TextBlock,
"Default Text", // the initial value for TextBlock.text
// some room around the text, a larger font, and a white stroke:
{
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
// TextBlock.text is data bound to the "name" attribute of the model data
new go.Binding("text", "name"))
);
var model = $(go.Model);
model.nodeDataArray = [ // note that each node data object holds whatever properties it needs;
// for this app we add the "name" and "source" properties
{
name: "Don Meow",
source: "cat1.png"
},
{
name: "Copricat",
source: "cat2.png"
},
{
name: "Demeter",
source: "cat3.png"
},
{ /* Empty node data */ }
];
myDiagram1.model = model;
// graph link model
var myDiagram2 =
$(go.Diagram, "graphlinksmodel", {
initialContentAlignment: go.Spot.Right,
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{
angle: 90,
layerSpacing: 35
})
});
// the template we defined earlier
myDiagram2.nodeTemplate =
$(go.Node, "Horizontal", {
background: "#44CCFF"
},
$(go.Picture, {
margin: 10,
width: 50,
height: 50,
background: "red"
},
new go.Binding("source")),
$(go.TextBlock, "Default Text", {
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
new go.Binding("text", "name"))
);
// define a Link template that routes orthogonally, with no arrowhead
myDiagram2.linkTemplate =
$(go.Link, {
routing: go.Link.Orthogonal,
corner: 5
},
$(go.Shape, {
strokeWidth: 3,
stroke: "#555"
})); // the link shape
var model = $(go.GraphLinksModel);
model.nodeDataArray = [{
key: "1",
name: "Don Meow",
source: "cat1.png"
},
{
key: "2",
name: "Demeter",
source: "cat2.png"
},
{
key: "3",
name: "Copricat",
source: "cat3.png"
},
{
key: "4",
name: "Jellylorum",
source: "cat4.png"
},
{
key: "5",
name: "Alonzo",
source: "cat5.png"
},
{
key: "6",
name: "Munkustrap",
source: "cat6.png"
}
];
model.linkDataArray = [{
from: "1",
to: "2"
},
{
from: "1",
to: "3"
},
{
from: "3",
to: "4"
},
{
from: "3",
to: "5"
},
{
from: "2",
to: "6"
}
];
myDiagram2.model = model;
//tree model
var myDiagram =
$(go.Diagram, "treemodel", {
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{
angle: 90,
layerSpacing: 35
})
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal", {
background: "#44CCFF"
},
$(go.Picture, {
margin: 10,
width: 50,
height: 50,
background: "red"
},
new go.Binding("source")),
$(go.TextBlock, "Default Text", {
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
new go.Binding("text", "name"))
);
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link, {
routing: go.Link.Orthogonal,
corner: 5
},
$(go.Shape, {
strokeWidth: 3,
stroke: "#555"
})); // the link shape
var model = $(go.TreeModel);
model.nodeDataArray = [{
key: "1",
name: "Don Meow",
source: "cat1.png"
},
{
key: "2",
parent: "1",
name: "Demeter",
source: "cat2.png"
},
{
key: "3",
parent: "1",
name: "Copricat",
source: "cat3.png"
},
{
key: "4",
parent: "3",
name: "Jellylorum",
source: "cat4.png"
},
{
key: "5",
parent: "3",
name: "Alonzo",
source: "cat5.png"
},
{
key: "6",
parent: "2",
name: "Munkustrap",
source: "cat6.png"
}
];
myDiagram.model = model;
<!DOCTYPE html>
<!-- HTML5 document type -->
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
In this case we also add a background color so we can see that area. -->
<div class="container-fluid">
<div class="row">
<div class="col align-self-center" id="myNormal" style="width:400px; height:200px; background-color: #DAE4E4;"></div>
</div>
<div class="row">
<div class="col" id="graphlinksmodel" style="width:600px; height:300px; background-color: rgb(142, 236, 101);"></div>
<div class="col" id="treemodel" style="width:600px; height:300px; background-color: rgb(231, 243, 177);"></div>
</div>
</div>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.21/go-debug.js"></script>
<script src="./base.js"></script>
</body>
</html>

JSON Object Array of Properties

I've been trying to figure out this particular object for quite a while and it's frustrating me endlessly so I was hoping to get it resolved here.
I have an object that looks like this:
options = {
headers: {
rows: [
cols = {
text: "Blah",
span: 12,
color: "#FFF"
}
],
[
cols = {
text: "Blah2",
span: 8,
color: "#FFF"
}
cols = {
text: "Blah2",
span: 4,
color: "#FFF"
}
]
}
}
With the intended result being an object that can be used to populate header rows above a table using a combination of the text, span, and color properties (with a few additions for later) to customize styling it properly.
I'm going for:
var text = options.headers.rows[x].cols[y].text;
Such that a nested loop can generate out the headers. Any help is appreciated!

[See it in action]
var options = {
headers: {
rows: [ // Array
{ // row: 0
cols: [ // Array
{ // col: 0
text: "Blah",
span: 12,
color: "#FFF"
},
{ // col: 1
text: "Blah2",
span: 8,
color: "#FFF"
},
{ // col: 2
text: "Blah2",
span: 4,
color: "#FFF"
}]
},
{ // row: 1
cols: [ // Array
{ // col: 0
text: "Blah",
span: 12,
color: "#FFF"
},
{ // col: 1
text: "Blah2",
span: 4,
color: "#FFF"
}]
}]
}
};