Creating diagram inside an iframe

GoJS
#1

Is there any way to create gojs diagram by passing the whole element instead of just id inside this code

1
11305×492 41.3 KB

Explanation

I have an iframe (id=“salesforce_iframe”) which further contains an div (id=“div_gojs_chart_depedency_map”). Now i want to create gojs diagram on "divmydiagram "

To access a div inside iframe I have to use this code

    var iframe = document.getElementById("salesforce_iframe");
    var element_diagram = $(iframe.contentWindow.document.querySelectorAll("#div_gojs_chart_depedency_map"))

GOJS documentation tell that you need to pass id to create a diagram I just cannot pass id because it is inside an iframe and throws me an error = “Error handling response: Error: Invalid DIV id; could not get the element with id: div_gojs_chart_depedency_map”

How do I pass this element variable element_diagram instead of div “div_gojs_chart_depedency_map” or is there any other way

#2

Pass the reference to the HTMLDivElement directly, not its id.
You can pass it either as the second argument to go.GraphObject.make, or as the value when setting the Diagram.div property.

#3

Thanks, Walter

Can you please give me an example? If this is my code , what and where i have to change

 var iframe = document.getElementById("salesforce_iframe");
    var element_diagram = $(iframe.contentWindow.document.querySelectorAll("#div_gojs_chart_depedency_map"))

  var  diagram = $(go.Diagram, "div_gojs_chart_depedency_map",  // id of DIV
        {
            // Automatically lay out the diagram as a tree;
            // separate trees are arranged vertically above each other.
            layout: $(go.TreeLayout, {
                nodeSpacing: 25,
                angle: 0,
                layerSpacing: 250,
                layerStyle: go.TreeLayout.LayerUniform
            }),
            initialContentAlignment: go.Spot.Left,
            initialAutoScale: go.Diagram.LayerUniform,
            isReadOnly: false,  // do not allow users to modify or select in this view
            allowSelect: true,
            allowZoom: true,
            scale: 0.60,
            hoverDelay: 200,
            allowDrop: true,
            "undoManager.isEnabled": true,
            "animationManager.duration": 800,
            "draggingTool.isGridSnapEnabled": true,
        });
#4

I’m not sure about your code, but I would guess that instead of passing "divmydiagram", try passing element_diagram[0], or something like that.

Just make sure that the reference (i.e. pointer) is to the HTMLDivElement that you want to host the diagram.

#5

Walter,

I tried passing HTMLDivElement object while creating diagram but it gives me an error
Error handling response: Error: Trying to set undefined property “align” on object: Diagram ""

> var iframe = document.getElementById("salesforce_iframe");
>     var element_diagram = jQuery(iframe.contentWindow.document.querySelectorAll("#div_gojs_chart_depedency_map"));
> 
> var _HTMLDivElement=element_diagram[0];
> **which is  <div id="div_gojs_chart_depedency_map" style="height: 100%; width: 100%; background-color: #fff;"></div>**
> 
>  var  diagram = $(go.Diagram, _HTMLDivElement,
>         {
>             layout: $(go.TreeLayout, {
>                 nodeSpacing: 25,
>                 angle: 0,
>                 layerSpacing: 250,
>                 layerStyle: go.TreeLayout.LayerUniform
>             }),
>         });

1
11877×153 23.8 KB

#6

What is the value of “$” throughout your quoted code?

#7

I console $ value and it gives me

2
21579×821 138 KB

3
31255×78 4.93 KB

#8

The error message is correct: the Diagram class does not define an align property.
But I do not see your code where you are setting that property.