We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to create a HTML node dynamically

Platform: jQuery |
Control: ejDiagram

 Create script template at runtime and assign it to HTML node

We can create a HTML node at runtime using add method. Also we have created the script template dynamically and rendered the HTML node.

function createTemplateNode(node) {
            //create an script template
            var script = document.createElement("script");
            //create a name with random id and assign it to the node name and templateId
            var name = node.name + ej.datavisualization.Diagram.Util.randomId() + "_htmlTemplate";
            //set an id to the script template
            ej.datavisualization.Diagram.Util.attr(script, { id:name, type: "text/x-jsrender" });
            //create a div element
            var container = document.createElement("div");
            //set an attribute to div element
            ej.datavisualization.Diagram.Util.attr(container, { "style": "height: auto; width:auto; display: inline-block;" });
            var div = document.createElement("div");
            var height = (100 / node.addInfo.length);
            ej.datavisualization.Diagram.Util.attr(div, { "style": "height: " + height + " %; display: block; border-style:solid;border-width:1px;background-color:lightgrey" });
            var span = document.createElement("span");
            span.appendChild(document.createTextNode("TOTAL COUNTS(SYMBOL)"));
            //append the div element to the script template
            node.height = container.offsetHeight;
            node.width = container.offsetWidth;
            //set an node template
            node.templateId = name;
            return node;
             //define nodeCollectionChange event
            nodeCollectionChange: nodeCollectionChange,
        function nodeCollectionChange(evt) {             
            var node = evt.element;
            node = createTemplateNode(node);
var node = {
            name: "Node1", offsetX: 200, offsetY: 200, type: "html", addInfo: [["Type", "Off", "Enl", "Ciy", "Tot", "CMe", "Oth", "Gtot"]],           
        //render the node at runtime


You must log in to leave a comment
Joseph E Schmalhofer III
Apr 11, 2016
I need to convert data contained in the addInfo block that is already in HTML into something that can be displayed in an ejDiagram node. Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile