Dynamicallly change div and diagram name

GoJS
1

Dear Friends,

iam using below code to load a chart in a div. I want to change div name, diagram name and data’s dynamically in more than one div in the same page. pls guide me to do this. find below my code to create a chart.

var diagram =$$(go.Diagram, “myDiagramDiv”,
{
“ViewportBoundsChanged”: recenterRoot,
“ChangedSelection”: ChangedSelection,
“panningTool.isEnabled”: false
});
);

//---------------------------------------------------------------------------
var dataToDraw = { “class”: “GraphLinksModel”,
“nodeDataArray”: [
{“key”:“e1”, “category”:“eventRectangle”, “text”:“Top Event”, “loc”:“0 0”, “movable”:false, “uid”:“0”},
{“key”:“layer_1”, “category”:“bgLayer”, “loc”:“0 0”, “layerColor”:“rgba(197,239,255,0.7)”},
{“key”:“C_1”, “category”:“controlRectangle”, “text”:“C1”, “loc”:“0 0”, “movable”:false, “subObj”:2, “statusTxt”:“Status: Draft”, “preProb”:“Pre Prob: OCC”, “preSev”:“Pre Sev: CRI”, “riskClass”:“Risk Class: B”, “uid”:“0”, “seviority”:“normal”, “color”:“white”, “sevThick”:2, “sevColor”:“black”, “riskBg”:“white”, “riskTextColor”:“black”, “visible”:true},
{“key”:“out_1_1”, “category”:“successRectangle”, “text”:“Outcome 1_1”, “loc”:“0 0”, “movable”:false, “probTxt”:“Probability”, “sevTxt”:“Severity”, “conTxt”:“Consequence”, “uid”:“0”, “showBorder”:false, “visible”:true},
{“key”:“out_1_2”, “category”:“failureRectangle”, “text”:“Outcome 1_2”, “loc”:“0 0”, “movable”:false, “probTxt”:“Probability”, “sevTxt”:“Severity”, “conTxt”:“Consequence”, “uid”:“0”, “showBorder”:false, “visible”:true}
],
“linkDataArray”: [
{“from”:“e1”, “to”:“out_1_1”, “fromSpot”:{“class”:“go.Spot”, “x”:0.5, “y”:1, “offsetX”:0, “offsetY”:0}, “toSpot”:{“class”:“go.Spot”, “x”:0.5, “y”:0, “offsetX”:0, “offsetY”:0}, “toArrow”:"", “strokeWidth”:2, “strokeColor”:“black”},
{“from”:“e1”, “to”:“out_1_2”, “fromSpot”:{“class”:“go.Spot”, “x”:0.5, “y”:1, “offsetX”:0, “offsetY”:0}, “toSpot”:{“class”:“go.Spot”, “x”:0.5, “y”:0, “offsetX”:0, “offsetY”:0}, “toArrow”:"", “strokeWidth”:2, “strokeColor”:“black”}
]}

var jsonToLoad = JSON.stringify(dataToDraw);
var prevNumber=0;
for (var k in dataToDraw.nodeDataArray){
if(dataToDraw.nodeDataArray[k].category==“controlRectangle”){
var split1= dataToDraw.nodeDataArray[k].key.split("")
if(split1.length==2)
{
var split2=Number(dataToDraw.nodeDataArray[k].key.split("")[1]);
if(prevNumber<split2)
{
mainCtrlInc = split2
prevNumber=split2;
}
}
}
}

load();

function load() {
diagram.model = go.Model.fromJson(jsonToLoad);
diagram.initialContentAlignment = go.Spot.Top;
}

2

Could you please describe what the problem is?

3

Dear Mr.Walter,

Thanks for ur reply.

I want to load 3 charts in same html page with 3 different datas, 3 different div name and 3 different diagram. But all the charts has same functionalities. so I have to use one main js as common. but load in 3 diffent divs. if I click and do some activities in one chart it should reflect only in that particular chart.

Thanks and Regards,
Syed Abdul Rahim

4

For each DIV, you must have a separate instance of Diagram. And for each Diagram you want to have a separate Model.

Here are 100 Diagrams each with 100 nodes and 99 links: 100 GoJS Diagrams

5

A post was split to a new topic: Diagrams in tabs