This is a simple example with GoJS API.
If you want to use into website you need to buy the API.
Also you can make a try with this example but will have this text:
<!DOCTYPE html>
<html>
<head>
<script src=”go-debug.js”></script>
<script id=”code” type=”text/javascript”>
function init(){
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, “myDiagram”,
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
“undoManager.isEnabled”: true,// enable Ctrl-Z to undo and Ctrl-Y to redo
initialContentAlignment: go.Spot.Center,
allowZoom: true,
“grid.gridCellSize”: new go.Size(20, 20),
});
var myModel = $(go.Model);
// in our model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
{ key: getRandomColor() },
];
myDiagram.model = myModel;
myPalette =
$(go.Palette, “myPalette”, // must name or refer to the DIV HTML element
{
nodeTemplate: myDiagram.nodeTemplate,
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ key: “Alpha” },
{ key: “Beta” },
{ key: “Gamma” },
{ key: “Delta” }
])
});
} //init
function getRandomColor() {
var letters = ‘0123456789ABCDEF’.split(”);
var color = ‘#’;
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</head>
<body onload=”init()”>
<div style=”width:100%; white-space:nowrap;”>
<span style=”display: inline-block; vertical-align: top; padding: 5px; width:80px”>
<div id=”myPalette” style=”border: solid 1px gray; height: 400px; background-color:#CCCCCC;”></div>
</span>
<span style=”display: inline-block; vertical-align: top; padding: 5px; width:80%”>
<div id=”myDiagram” style=”border: solid 1px gray; height: 400px; background-color:#CCCCCC;”></div>
</span>
</div>
</body>
</html>
The source code will make two areas with four text and the next area will have output of random javascript random function. See this image:
