addToNode (elementId);
elementId. Identifier of the DOM node that will contain the dashboard.
The addToNode method places a dashboard in specified DOM node.
To execute the example, the HTML page must contain an instance of the Kap.Dashboard class named dashBoard (see Dashboard constructor). The repository must contain a dashboard with the key 826309.
In the BODY tag add a button for placing the second dashboard and a container that will store the second dashboard:
<div id="container" style="width: 100%; height: 50%;"> <!--container for the first dashboard--> <div id="DashboardBox" style="position:absolute;top:0;bottom:50%;left:0;right:100px;"> </div> <div style="position:absolute;top:0;bottom:50%;right:0;width:100px;"> <!--button for opening the second dashboard--> <button id="addToNodeBut">Open the second dashboard</button> </div> <!--container for the second dashboard--> <div id="DashboardBox1" style="position:absolute;top:50%;bottom:0;left:0;right:100px;"> </div> </div>
In body of the onModuleInit function add handler that processes clicking the button with the addToNodeBut identifier:
document.getElementById("addToNodeBut").onclick = function () {
var dashBoard2 = new Kap.Dashboard({ Key: "826309" });
dashBoard2.addToNode("DashboardBox1");
};
After executing the example the Open Second Dashboard button is added to the page. Clicking this button adds a dashboard to the DOM node with the DashboardBox1 identifier:
See also: