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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Question: Adding a free form drawing tool to the Diagram

Thread ID:





129722 Mar 30,2017 12:46 PM UTC Apr 4,2017 12:17 PM UTC JavaScript 5
Tags: ejDiagram
Robert Mims
Asked On March 30, 2017 12:46 PM UTC

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.

Shyam G [Syncfusion]
Replied On 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 

Robert Mims
Replied On 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.

Shyam G [Syncfusion]
Replied On 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 

Robert Mims
Replied On 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.


Shyam G [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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