ASP.NET Visual diagram\ flowchart control - c#

I am looking for a diagram\ graph\ flowchart user control for web application preferably ASP.NET.
My wish would be to pass a Graph object that contains a collection of nodes and edges and the capabilities that i would look for are:
Add a new node.
Connect two nodes together with an edge.
Delete nodes and edges
Automatic layout algorithm to minimize crossing of layers and edges
I found parts of the solution that will help me to create such a component such as:
JSPlumb or Raphael to draw the graph on the clients.
GLEE\ MSAGL to automatically order the graph in visual terms.
All of these will allow me to construct a component but i was wondering if anyone have already seen something that is web based and could do the task?
hopefully its open source :)

Have you considered Dracula Graph Library? It looks like it would handle part 4 very well. You would only have to wire up some edit controls for the user.

From this SO question apart from Raphael there is jointjs.com worth checking out

Related

WPF C# runtime graphical editor on form. Easiest solution

I am trying to find a solution to creating a graphical designer that will allow users to modify objects using a graphical editor in runtime.
The idea is to create a type of network diagram that displays how network devices are connected. I would like a user to connect objects together on here and allow the diagram to display connection arrows that are automatically drawn based on the number of connections etc.
I would like configuation in my editor to be saved in my database and I am using Entity Framework. So I will probably add rows for each object and reference a child object's ID to show that it has something connected to it.
This is what I was thinking:
What would be the least time consuming (easiest) way to achieve this? Is there a framework or API available that someone could suggest?
There's a series of codeproject articles could be interesting to get you started:
https://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part
https://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part-4
( I've not tried the code or looked at it in depth. )

Surface offline maps

I'm developing Surface application, but I came across a problem. I need to develop a control with next abilities:
World map on background (should display only continents).
I need a way to find out on which continent user touched(interactive background map).
Any controls can be added on the top of the map control (for an example video-player control for different regions of the map).
Map control should works in offline mode only (without any
connection to internet).
I can't find any frameworks that would meet my goals.
So, anyone know something projects/code samples that can help me to achieve my goals
Offline mapping could be done in many ways, one of them would be download / get shapefile for continents. (You can search for that). Later you can use SharpMap to display that shapefile in WPF application. SharpMap is a .Net framework based open source application which enables reading multiple geospatial formats.
Another option to read geo-spatial data is DotSpatial.

Best C# UI component for displaying entities and its relationships

I am creating a UI rich application in C# forms (.net 4.5) for managing/displaying family tree. I tried using many already available products. But none of the free products available have the feature to display and print the complete family tree in a screen. So I have decided to write one myself.
Now I have decided to use graph for the UI and a node will be created depicting each person in the database. I am planning to parse through the complete database in the step 1 and create a logical graph. Step 2 is to display the logical graph with a rich UI. I am planning to have simple features like, when we right click on the appropriate node, we must get the option to update their information.
So my question now is, to cater the above requirement; what is the best component could be used.
Thanks in advance,
S.Sudharsan
Graph# is an open-source C# component for displaying graphs. It requires a little bit of work because it hasn't been maintained in a long time but still very useful.
I had the same problem some time ago.
The final solution was to design each graph node as a user control (so you can customize all the visual properties) and use GraphViz (in my case DOT algorithm) to calculate node positioning.
If you don't want to use any third party framework, you should do some research about graph layout (especially the Sugiyama algorithm).

Visualize bipartite graph

Can someone recommend a library or code to visualize bipartite graphs in C#?
Graph# seems not to support this kind of graph directly (but has
some support to disentangle vertices).
I want to create some graphic like this bipartite graph with some text in the nodes. Nodes being same width and height would be ideal.
A WPF control would be perfect, as it exists for graph#.
Perhaps even a XAML definition exists?
As an alternativ: a report window can also be very good.
Probably someone with more experience in Graph# can provide hints on how to do this
utilizing Graph#.
Tried around a bit with NodeXL but that seems not to be the perfect solution,
as the nodes seems not be that much modifiable. Perhaps someone can provide
a better solution. Have played with the NetworkView provided by Soroush.
At the moment this comes closest to what I want.
-update-
Tried out NetworkView shared by Soroush Falahati. This seems to be a good base,
but is not yet that flexible as I need it. I have problems to believe that there
is no library out there that can do those things out of the box.
(NetworkView has the excellent feature to set connections / edges in the control
which gives it an extra boost over the NodeXL). Perhaps Graph# can do even more,
but at the moment I just have tried those two.
You can approximate your bipartite graph visualization in NodeXL, and even improve on it by removing edge crossings. I took your sample bipartite graph, and in the image below I colored the nodes by their side (u or v). They are laid out using the Sugiyama algorithm that minimizes edge crossings. I did this in the interactive NodeXL template for Excel 2007--2013, but all these features should be available as the standalone NodeXL C# and WPF class libraries. The current libraries as of this post are available to download here.
I also tried NodeXL's group-in-a-box layout to separate the groups and display them each individually in a grid, with marginal results.
Disclaimer: I'm an advisor for the NodeXL project.
Actually if you could use client side jquery .. iwoul strongly recommend jqPlumbs..
http://www.jsplumb.org/jquery/demo.html
Ok, As you want,
Here is an example/library that let you create graphs and flowcharts easily,
http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a
It has actually very good features.
yFiles WPF is an extensive .NET class library for Windows Presentation Foundation (WPF) applications.
Its first-class UI controls for viewing and editing diagrams allow you to automatically arrange complex graphs, diagrams, and networks with the click of a button.
Our diagramming library crafted for Windows Forms-based applications is yFiles.NET
Graph# is a graph layout framework.
It contains some layout algorithms and a GraphLayout control for WPF applications.
Using WPF to Visualize a Graph with Circular Dependencies
If you can do it in Windows Forms, you can use NShape. Since the source is available, you could probably port it to WPF if you needed to. It might beat writing it from scratch. Or perhaps you could host a WinForms control to get the functionality you need. Not as nice as a pure WPF solution, though.
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as CSS3, HTML5 and SVG. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.
http://d3js.org/
http://mbostock.github.com/d3/talk/20111116/force-collapsible.html

A "Google wonder wheel" or "visualthesaurus" like diagram control for .net?

I'm looking for a graph control that works just like Google wonder wheel or Thinkmap visual thesaurus. I don't know what do these types of diagrams called. Any help would be appreciated.
I have a series of non-hierarchical related data entities (should be shown as big and small circles) and I want to show their relation (lines between the circles).
I think you are after this effect, i also dont know if it has a specific name:
http://www.dotnetsolutions.co.uk/successes/wikiexplorer/
http://www.dotnetsolutions.co.uk/assets/images/screenshots/we1.png
thats in wpf so maybe there is source floating around for it - or maybe .net reflector can help you work out how it is done.
I have not seen any components that do this automatically, your best bet is to use one of the many graph libraries on codeplex.com to create a graph like data structure and display it - they have integrated visualisation and graph layout tools included within them.
A few links from my notebook:
http://quickgraph.codeplex.com/
possible component set:
http://visualstudiogallery.msdn.microsoft.com/en-us/494E7990-2722-4A4E-B0E3-AE1F2A831B7E
http://opendiagram.codeplex.com/
http://graphsharp.codeplex.com/
http://research.microsoft.com/apps/dp/search.aspx?q=GLEE#p=1&ps=36&so=1&sb=&fr=&to=&fd=&td=&rt=&f=&a=&pn=GLEE&pa=&pd=
http://wpfgraph.codeplex.com/
http://mgdisplay.codeplex.com/
i'm afraid i've not used any of them in depth so cant recommend one over the other - also be careful as some of them are released under different licenses.
hope this helps
David

Categories