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
close icon

Adding labels for edge dimensions of a rectangle on the fly

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





1 Reply

SG Shyam G Syncfusion Team January 18, 2016 11:56 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon