Szymon Wojciechowski

Idea for adding context menu in node drag chart for specific node

Recommended Posts

Hello everyone,

I will be implementing Drag Node Chart for my clients. They want to have context menu on each node so it will be easier for them to add Node and/or connector to specific node they click. 

I couldn't find this in documentation.

Is there any ideas for work around this if there is no native implementation for this?

I will present it here:

image.png.5e8fd47f6d396f21e3f84074e9cb20c0.png
 

best regards!

Share this post


Link to post
Share on other sites

Hi,

Apologies for the delay.

Yes you could add the context menu on clicking an entity on the drag node chart, please refer to the demo : https://www.fusioncharts.com/charts/drag-node-charts/add-remove-nodes-from-chart?framework=javascript (please tap & hold on the entity block to see the menu)

For more reference please check out this link: https://www.fusioncharts.com/dev/chart-guide/standard-charts/drag-node-chart#add-and-edit-nodes

Share this post


Link to post
Share on other sites

Thank you for your response!

In deed, the link to the demo you provided works fine.

However, I wonder if the menu that popup (after you tap & hold on the entity block) can be customized? Can I prepare my own React component that will popup after tapping & holding on the entity block?

Thanks!

Share this post


Link to post
Share on other sites
On 12/30/2020 at 11:06 PM, Szymon Wojciechowski said:

Thank you! That's a solving my challenge.

Can you send some recommendable example how it was implemented in other projects?

 

Do you need a dataPlotClick event sample?

Share this post


Link to post
Share on other sites
9 hours ago, Gonzalo Alberto Castillo said:

 

Will you have an example of a custom menu to add nodes and connectors on a specific node?

The custom menu is not possible as of now, you can use the drag-node chart popup window to add nodes, labels, connectors at the runtime
https://www.fusioncharts.com/dev/chart-guide/standard-charts/drag-node-chart

Share this post


Link to post
Share on other sites

Unfortunatelly guys I don't see option of editing my post. I have another question to the chart.

Is there any possibility to add icons / new HTML elements to the nodes. We want to add icon to the specific nodes to show to the client which node is marked as "action needed".

Here example:

image.png.3e51fefd65aabaf80564a251dffb7112.png

Share this post


Link to post
Share on other sites
41 minutes ago, Szymon Wojciechowski said:

Unfortunatelly guys I don't see option of editing my post. I have another question to the chart.

Is there any possibility to add icons / new HTML elements to the nodes. We want to add icon to the specific nodes to show to the client which node is marked as "action needed".

Here example:

image.png.3e51fefd65aabaf80564a251dffb7112.png

You can create another shape (entity) inside it using the x & y values, for adding icons please refer to this demo : https://www.fusioncharts.com/charts/drag-node-charts/network-visualization?framework=java

Share this post


Link to post
Share on other sites
10 minutes ago, Gonzalo Alberto Castillo said:
Perfect, but if I have the custom window, how can I manipulate the actions of adding node, connectors etc to a specific node? I suppose that I take the dataPlotClick event, raise a modal and want to add a node, thanks, I hope and my doubt.

For adding nodes at the runtime you need to use FusionCharts UI to update it

Share this post


Link to post
Share on other sites
21 hours ago, Ayan Bhadury said:

You can create another shape (entity) inside it using the x & y values, for adding icons please refer to this demo : https://www.fusioncharts.com/charts/drag-node-charts/network-visualization?framework=java

That's not exactly solve my problem. I want to use shape and color of entity in the standard way not image (there will be many colors of entities). So the thing that will change in some entities will be the icon that will be stick to the entity. 

However if there is the way to use in entity as a new component (react / HTML), but not image that would be great.

Or maybe there is an other way to mark it.

Thanks!

Share this post


Link to post
Share on other sites

 

 

Hello, good afternoon, is there a way that when adding connectors to a specific node it is accommodated as follows?

nodos.PNG.06dbf9cd930c3b1fcabe6ae27bfaf743.PNG

2. Is it possible to have draggable nodes on the outside and to be able to drag and drop within the diagram area?

 

nodo2.png.f66d2f1b0b6611b62cf37aaef1f142d9.png

Edited by Gonzalo Alberto Castillo

Share this post


Link to post
Share on other sites
On 1/9/2021 at 3:43 AM, Gonzalo Alberto Castillo said:

 

 

Hello, good afternoon, is there a way that when adding connectors to a specific node it is accommodated as follows?

nodos.PNG.06dbf9cd930c3b1fcabe6ae27bfaf743.PNG

2. Is it possible to have draggable nodes on the outside and to be able to drag and drop within the diagram area?

 

nodo2.png.f66d2f1b0b6611b62cf37aaef1f142d9.png

1  - Possible create two node (entities) hide the nodes then add the connector.
 

2 - Not possible from outside, it should be within the same canvas.

Share this post


Link to post
Share on other sites
On 1/8/2021 at 4:02 PM, Szymon Wojciechowski said:

That's not exactly solve my problem. I want to use shape and color of entity in the standard way not image (there will be many colors of entities). So the thing that will change in some entities will be the icon that will be stick to the entity. 

However if there is the way to use in entity as a new component (react / HTML), but not image that would be great.

Or maybe there is an other way to mark it.

Thanks!

You can either add icon (images) or the supported shapes: rectangle, circle or polygon

Share this post


Link to post
Share on other sites

Thank for your answer!

#1.Unfortunately the client didn't agreed with that solution. It supposed to be icon next to node. I was thinking about use event where I before render the icon I will move it. Any ideas?

#2. Another thing that comes out is connector. Is any possibility to provide 2 connectors between to the same nodes? Client wants to have something like in the pic below:

 

image.png.7829ed38a0b7147b7044ea0bc0c72fd7.png

Share this post


Link to post
Share on other sites
On 1/13/2021 at 10:19 PM, Szymon Wojciechowski said:

Thank for your answer!

#1.Unfortunately the client didn't agreed with that solution. It supposed to be icon next to node. I was thinking about use event where I before render the icon I will move it. Any ideas?

#2. Another thing that comes out is connector. Is any possibility to provide 2 connectors between to the same nodes? Client wants to have something like in the pic below:

 

image.png.7829ed38a0b7147b7044ea0bc0c72fd7.png

1 - You can add an icon in the form of an image and drag it.

2 - If you need two-way communication check out Sankey diagram : https://www.fusioncharts.com/charts/sankey-diagram/simple-sankey-diagram?framework=javascript

Share this post


Link to post
Share on other sites

1. Could you elaborate on this one? What API method/ property are you referring to?

2. Thank for suggestion. We already using Sankey FushionChart for different  visualization. I was thinking the node drag chart has API property that you can provide your own connector component / image.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now