addToNode(elementId);
elementId. Identifier of the DOM node that houses a dahsboard.
The addToNode method places a dashboard to the specified DOM node.
Executing the example requires a HTML page of the Kap.Dashboard class instance named dashBoard (see Dashboard Constructor). The repository must contain a dashboard with the 826309 key.
In the BODY tag add a button to place the second dashboard and a container that will house 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 to open 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 the body of the onModuleInit function add an event handler of 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 placed on the page, clicking which adds a dashboard to the DOM node with the DashboardBox1 identifier, for example:
See also: