Adding labels for edge dimensions of a rectangle on the fly

[Tezcan Cirakoglu]

Hi there,

When we want to draw a rectangle we use this code; 

var rectObject = {

type: ej.datavisualization.Diagram.Shapes.Basic,

shape: "rectangle",

fillColor: "#fcbc7c",

borderColor: "#f89b4c",

labels: [

            {

       "text": "0 cm",

       readOnly: true,

       offset: { x: 0.5, y: 0},

       margin: { top: -20 }

            },

            {

                "text": "0 cm",

                readOnly: true,

                offset: { x: 0.5, y: 1 },

                margin: { top: 20 }

            },

            {

                "text": "0 cm",

                readOnly: true,

                offset: { x: 0, y: 0.5 },

                margin: { left: -20 }

            },

            {

                "text": "0 cm",

                readOnly: true,

                offset: { x: 1, y: 0.5 },

                margin: { right: -20 }

            },

]

};

After then,

var diagram = $("#diagram").ejDiagram("instance");

//JSON to create a rectangle

diagram.model.drawType = rectObject;

//To draw an object once, activate draw once

diagram.update({

   tool: ej.datavisualization.Diagram.Tool.DrawOnce,

});

What we need to do is, when the user is going on drawing rectangle and not finished yet, we want to update all four labels with the length of four lines of rectangle. Can we do this via api?

best regards

[Shyam G]

Hi Tezcan,

If you need to update the label before the object adds into the diagram, then you can use nodeCollectionChange event to achieve your requirement. Also if you need to update the label once the drawing(drawing rectangle object) completed, then you can use updateLabel method to achieve your requirement. please refer to the code example and JSPlayground link below.

Code example:
$("#diagram").ejDiagram({

            //define nodeCollectionChange event
            nodeCollectionChange:nodeCollectionChange,
});

function nodeCollectionChange(args) {            

            if (args && args.element) {

                for (i = 0; i < args.element.labels.length; i++) {

                    args.element.labels[i].text = "1 cm";

                }

            }

        }

function updateLabel() {

            var diagram = $("#diagram").ejDiagram("instance");

            var node = diagram.model.selectedItems.children[0];

            if (node) {

            //update the label at runtime

                diagram.updateLabel(node.name, node.labels[0], { text: "2cm" });

            }
        }

JSPlayground link:http://jsplayground.syncfusion.com/oujc30b3

Regards,
Shyam G