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

[Szymon Wojciechowski]

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:

 

best regards!

[Ayan Bhadury]

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

[Szymon Wojciechowski]

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!

[Ayan Bhadury]

You can use the dataPlotClick event of FusionCharts and show a custom modal component as per your requirements.

[Szymon Wojciechowski]

Thank you! That's a solving my challenge.

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

 

[Gonzalo Alberto Castillo]

 

Hello, how are you, notice that I try to access the link you put but it sends an error, could you add it again? thanks

[Ayan Bhadury]

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?

[Gonzalo Alberto Castillo]

 

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

[Ayan Bhadury]

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

[Szymon Wojciechowski]

On 1/5/2021 at 10:33 AM, Ayan Bhadury said:

Do you need a dataPlotClick event sample?

Yes, that would be nice

[Szymon Wojciechowski]

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:

[Ayan Bhadury]

3 hours ago, Szymon Wojciechowski said:

Yes, that would be nice

http://jsfiddle.net/ehunfL1r/

[Ayan Bhadury]

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:

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

[Gonzalo Alberto Castillo]

2 hours ago, Ayan Bhadury said:

http://jsfiddle.net/ehunfL1r/

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.

[Ayan Bhadury]

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

[Szymon Wojciechowski]

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!

[Gonzalo Alberto Castillo]

 

 

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

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

 

Edited January 8, 2021 by Gonzalo Alberto Castillo

[Ayan Bhadury]

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?

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

 

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.

[Ayan Bhadury]

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

[Szymon Wojciechowski]

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:

 

[Ayan Bhadury]

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:

 

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

[Szymon Wojciechowski]

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.

[Ayan Bhadury]

1 - refer to the demo: https://www.fusioncharts.com/charts/drag-node-charts/network-visualization?framework=javascript

2 - Two nodes can have one connector in the drag-node chart, for multiple connectors use Sankey chart