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

Question: Adding a free form drawing tool to the Diagram

I've been asked to provide the ability for the user to draw free form lines within the diagram in order to annotate topographic anomalies within the physical environment being represented.

To my question:

Are there any plans to introduce a drawing tool to the diagram? 

If not, I plan to proceed to introduce the functionality as follows:

1. Add mouse capture events to the diagram canvas and a tool state to the diagram for the purpose of building up the path for the free form line
2. Use the resultant path to add a node (of type Path) to the diagram - it needs to be image exportable.

Any suggestions or insight in to the road-map would be appreciated.

Thank you.

5 Replies

SG Shyam G Syncfusion Team March 31, 2017 04:08 AM UTC

Hi Robert, 

Please use polygon tool to achieve your requirement. Please refer to the code example and JSplayground link. 

Code example: 
function drawpolygon() { 
            var diagram = $("#diagram").ejDiagram("instance"); 
//draw polygon points dynamically 
            diagram.model.drawType = { type: "basic", shape: "polygon" }; 
            var tool = diagram.tool(); 
            diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce }) 

Shyam G 

RM Robert Mims March 31, 2017 11:25 AM UTC

Thank you, Shyam, I believe that gives me a good start.

The nuance in the request relative to this is that a polygon is a closed shape whereas the types of lines they are after are not.

SG Shyam G Syncfusion Team April 3, 2017 12:22 PM UTC

Hi Robert, 

We don’t have option to draw an straight connector with intermediate segments using tools(drawing tools). Please check the below sample and confirm us whether it satisfies your requirement? 

In the above sample, we draw the polygon shape using drawing tools, After completion of polygon shape, we get the polygon points and add it to segments collection and render it as a connector. Please refer to the video below. 

If you are not satisfied with our requirement, we will consider it as a feature and will draw the polyline using tools(drawing tools) as shown in the below video. 

Shyam G 

RM Robert Mims April 3, 2017 12:44 PM UTC


Thank you for the clever idea, however, I believe the best solution is what you pictured in the video where there isn't the remnant segment while drawing.

Please consider this as a feature request for the JavaScript implementation of the Diagram.

Thank you.


SG Shyam G Syncfusion Team April 4, 2017 12:17 PM UTC

Hi Robert, 
We considered this “Need to provide polyline support in our diagram control ” as an usability feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon