Combine layout algorithms

Apply FractalLayout and SpringLayout to generate a tag cloud

In a series of posts we’ll explore ways to combine graph layout algorithms for various purposes, such as improving layout speed or achieving specific layout constraints.

In this topic we’ll show how to create a tag cloud using FractalLayout and SpringLayout algorithms from MindFusion diagramming API. You can download the complete project here:

TagCloud.zip

The sample code will show several features of the Diagram control:

  • FractalLayout
  • SpringLayout
  • custom node placement
  • text-only nodes

We assume words frequencies are already counted and listed as “word: frequency” entries in a sorted file. The example uses tags extracted from the contents of Wikipedia’s Tag cloud page. Let’s start by parsing the file and creating a node for each word. We’ll assign the word frequency to the Weight property of nodes for future reference. Weight is also used by some layout algorithms (such as TreeMapLayout for creating tree maps) that could visually represent word frequencies as well:

RectangleF defaultBounds = new RectangleF(0, 0, 10, 20);
ShapeNode root;
		
private void MainForm_Load(object sender, EventArgs e)
{
	// read the tags file
	var reader = new StreamReader("words.txt");
	string line;
	while ((line = reader.ReadLine()) != null)
	{
		// each line contains "word: frequency" entries
		var parts = line.Split(new[] { ':' });
		var word = parts[0];
		var frequency = int.Parse(parts[1]);

		// create a diagram node for each word in the file
		var node = diagram.Factory.CreateShapeNode(defaultBounds);
		node.Weight = frequency;
		node.Text = word;

		// set font size corresponding to frequency
		node.Font = new Font(
			"Arial",
			8 + (float)Math.Log(node.Weight, 1.15),
			GraphicsUnit.Point);

		// resize the node to fit text
		var size = TextRenderer.MeasureText(node.Text, node.Font);
		node.Resize(
			2 + (float)MeasureUnit.Pixel.Convert(size.Width, diagram.MeasureUnit, null),
			2 + (float)MeasureUnit.Pixel.Convert(size.Height, diagram.MeasureUnit, null));

		// show only text, hide geometry
		node.Transparent = true;
	}
}

Next, let’s build a tree that will distribute largest nodes roughly uniformly when arranged by FractalLayout, where larger parent nodes are circled by their smaller child nodes:

while ((line = reader.ReadLine()) != null)
{
	// ...
	if (diagram.Nodes.Count == 1)
	{
		// save reference to the first node
		root = node;
	}
	else
	{
		// build a tree where each node has up to six children
		diagram.Factory.CreateDiagramLink(
			diagram.Nodes[diagram.Nodes.Count / 6],
			node);
	}
}

// use FractalLayout for initial placement. if the file entries are sorted, each circular
// branch will contain larger parent node centered between its smaller children
new FractalLayout().Arrange(diagram);

If you run the application now, you should see the following layout:

a tree arranged using fractal layout

FractalLayout allocates some space for links, and we’ll reclaim it by deleting the links and compressing the initial layout of nodes:

// remove the links
while (diagram.Links.Count > 0)
	diagram.Links.RemoveAt(diagram.Links.Count - 1);

// pull all nodes towards the root to eliminate empty space that was occupied by links
var center = root.GetCenter();
foreach (var node in diagram.Nodes.Where(n => n != root))
{
	var relativePos = new Vector(center, node.GetCenter());
	var newPos = center + relativePos / 10;
	node.Move(
		newPos.X - node.Bounds.Width / 2,
		newPos.Y - node.Bounds.Height / 2);
}

Now apply SpringLayout to make distances between closely placed nodes more uniform, running only a few iterations to complete faster:

// run SpringLayout to distribute nodes more uniformly
var sl = new SpringLayout();
sl.Randomize = false;
sl.SplitGraph = false;
sl.NodeDistance = 3;
sl.IterationCount = 40;
sl.Arrange(diagram);

Run the following method to remove any overlaps remaining after SpringLayout. RemoveOverlaps works by starting from specified node and offsetting any nodes that overlap it, continuing by spiraling away while processing other nodes. This method could also be useful in an interactive application if you want to disperse overlapping nodes introduced by the user when they move a node:

void RemoveOverlaps(DiagramNode modifiedNode, float minDist)
{
	var queue = new Queue<DiagramNode>();
	queue.Enqueue(modifiedNode);

	while (queue.Count > 0)
	{
		var node = queue.Dequeue();
		var nodeCenter = node.GetCenter();
		var overlaps = FindOverlaps(node, minDist);
		foreach (var overlap in overlaps)
		{
			var ovrCenter = overlap.GetCenter();
			var ovrBounds = overlap.Bounds;
			var dx = ovrCenter.X - nodeCenter.X;
			var dy = ovrCenter.Y - nodeCenter.Y;
			if (Math.Abs(dx) > Math.Abs(dy))
			{
				// offset horizontally
				if (dx < 0)
					ovrBounds.X = node.Bounds.Left - ovrBounds.Width - minDist;
				else
					ovrBounds.X = node.Bounds.Right + minDist;
			}
			else
			{
				// offset vertically
				if (dy < 0)
					ovrBounds.Y = node.Bounds.Top - ovrBounds.Height - minDist;
				else
					ovrBounds.Y = node.Bounds.Bottom + minDist;
			}

			// shifting the node might introduce new overlaps, continue processing
			overlap.Bounds = ovrBounds;
			queue.Enqueue(overlap);
		}
	}
}

List<DiagramNode> FindOverlaps(DiagramNode modifiedNode, float minDist)
{
	var bounds = modifiedNode.Bounds;
	bounds.Inflate(minDist - 1, minDist - 1);

	var overlaps = new List<DiagramNode>();
	foreach (var node in diagram.Nodes)
	{
		if (modifiedNode == node)
			continue;
		if (bounds.IntersectsWith(node.Bounds))
			overlaps.Add(node);
	}
	return overlaps;
} 

Finally run a few more iterations of SpringLayout to equalize distances again and zoom the diagram to show the whole tag cloud:

// remove any remaining overlaps
RemoveOverlaps(root, 0.1f);
sl.Arrange(diagram);

// show everything inside view
diagram.ResizeToFitItems(5);
diagramView.ZoomToFit();

If you run the application now, you should see the following image:

tag cloud generated using MindFusion diagram control

The code above uses MindFusion’s .NET API and can be used with Windows Forms, WPF, Silverlight and ASP.NET diagramming components. The Java API for Android and desktop Swing application will look similar, with setter method calls instead of property assignments.

You can download the trial version of any MindFusion.Diagramming component from this page.

Enjoy!

MindFusion.WebForms Pack, 2015.R1

MindFusion announceс а неш release of our WebForms suite of components. Here is an overview of the most important new features:

Licensing

We no longer make separate trial build of the control assemblies. Instead there is a new LicenseKey property, which disables a component’s evaluation mode. If your application contains more than one control by MindFusion, you could call MindFusion.Licensing.LicenseManager.AddLicense(key) to specify the key once instead of setting it per each control. License key strings are listed on the Keys & Downloads page at MindFusion’s customer portal.

Zoom control

The ZoomControl class from MindFusion.Common.WebForms lets users change interactively the current zoom level and scroll position of a DiagramView or a MapView. To set it up, add a ZoomControl element to the page and set the control’s TargetId property to the id of the view. The control has numerous properties for customizing its appearance.

ASP.NET Diagrammer: The Zoom control

ASP.NET Diagrammer: The Zoom control

Visual Studio 2015 Toolbox Support

MindFusion.WebForms components can now be installed automatically into Visual Studio 2015 toolbox palette.

chartMindFusion.Charting

Custom Formatting of Labels for Line charts

Line charts now support custom formatting of labels. To use custom formatting, set LabelFormat to NumberFormat.Custom and use LabelCustomFormat.

Sorted Bars

The algorithm for sorting of bars has been improved. Bars in a series or in clusters can be sorted in ascending or descending order – use the SortOrder property. You can also sort each series/cluster with the SortSeriesBy property. Bar can be sorted with their colors preserved if SortColor is set to true.

ASP.NET Chart: The Bar chart control

ASP.NET Chart: The Bar chart control

MindFusion WebForms DiagrammerMindFusion.Diagramming

Canvas mode improvements

  • Shape property of TableNode and ContainerNode is now supported in Canvas mode.
  • CellFrameStyle and EnableStyledText properties of TableNode are now supported in Canvas mode.
  • CellTextEditedScript event raised when users edit the text of table cells.
  • CreateEditControlScript event lets you create custom DOM element or fragment to use as in-place text editor.
  • NodeListView raises nodeSelected event when the user selects a node.
  • Load XML files from client side by calling loadFromXml method of Diagram class.
  • as well many more new properties and events.

Styled text in Canvas mode

The EnableStyledText property of ShapeNode allows using HTML-like formatting tags to apply various attributes to the node’s text. At this time the component supports the following formatting tags:

<b> specifies bold text
<i> specifies italic text
<u> specifies underlined text
<color=value> specifies text color
<br /> specifies line break

Zoom control

(not available in JavaApplet mode)
The ZoomControl class lets users change interactively the current zoom level and scroll position of a DiagramView. To set it up, add a ZoomControl element to the page and set the control’s TargetId property to the id of a DiagramView. The control offers numerous customization properties like ZoomStep, ScrollStep and various appearance setting properties such as Fill, BorderColor, CornerRadius and TickPosition.

WebForms Gauge Control by MindFusionMindFusion.Gauges

Linear and oval gauge controls have been added to MindFusion.WebForms pack. The gauges are drawn on client side using HTML Canvas API. Users can change gauge values interactively by dragging their elements.

The ASP.NET Gauge control

The ASP.NET Gauge control

WebForms Scheduler by MindFusionMindFusion.Scheduling

Horizontal Timetable view

Horizontal layout has been added to the Timetable view. The horizontal timetable view displays a collection of rows where each row represents the allotment of resources to distinct hours of a day; the rows in this view represent dates, tasks, locations, contacts or resources.

ASP.NET UI Suite of controlsMindFusion.UI

The bundled jQuery version has been upgraded to 1.11.2.

You can read further details about the release at the announcement page at MindFUsion discussion board.

The trial version of the new MindFusion.WebForms Pack is available for direct download from this link:

Download MindFusion ASP.NET Pack 2015.R1

About MindFusion.WebForms Pack: A set of WebForms components that add great variety of features to your ASP.NET application with a few mouse clicks. The pack contains advanced components for diagramming, scheduling, charting and UI (Accordion, ColorPicker, TabControl, Window, WindowHost, DockControl, Button, Slideshow, Zoom and more). Each tool boasts easy to learn and use API and is quickly integrated into any web application that targets the ASP.NET platform. The controls support numerous options for styling, data import / export, user interaction and offer rich event set. There are plenty of samples and step-by-step tutorials as well detailed documentation.

Use the features page for each of the tools to find out more about its capabilities and the numerous ways it can boost your performance and speed up the development of your application:

Visit the buy page for details on the licensing scheme and prices. If you have questions please contact us. We shall be happy to assist you.

MindFusion.Reporting for WinForms, V2.3 Is Released

MindFusion is happy to announce the new release of its WinForms reporting control. Here is an overview of the new features:

Support for Visual Studio 2015

MindFusion.Reporting now supports Visual Studio 2015 as well. You can tell the installer to create VS2015 toolbox palette for the component.

Licensing

There is no separate trial build of the control assemblies anymore. Instead, you must set the LicenseKey property of the component to disable the evaluation mode and stop displaying trial messages. If your application contains more than one control by MindFusion, you can call MindFusion.Licensing.LicenseManager.AddLicense(key) to specify the key once instead of setting it per each control. License key strings are listed on the Keys & Downloads page at MindFusion’s customer portal.

Barcodes

Use the new Barcode report item to display UPC-A, UPC-E, EAN-8, EAN-13, and QR barcodes in your WinForm reports. A new sample demonstrates how to implement the feature.

MindFusion WinForms Reporter: Bar Codes

MindFusion WinForms Reporter: Bar Codes

The component is available for direct download from here:

Download MindFusion Reporter for WinForms, V2.3

Don’t forget that the reporting tool is also available on Nuget. To install the component, run the following command in the Package Manager Console:

PM&gt; Install-Package MindFusion.Reporting

Additional information about the library can be found in the online documentation:
http://www.mindfusion.eu/onlinehelp/mindfusionreporting/index.htm

Technical support is available at the Reporting for WinForms section of MindFusion discussion board, at the Help Desk or per e-mail at support@mindfusion.eu. Either way, MindFusion competent and friendly support team is pleased to assist you with any questions or inquiries you might have about the product.

About Reporting for WinForms: Enhance your business application with the complete set of features to create impressive, user-friendly reports that present important data in an easy-to comprehend look. Enjoy the rich report design capabilities that let you integrate charts, customize fonts and use easy WinForms component as a report item.
Bind our report to any .NET data source or work in an unbound mode. Choose among various output options among which XML, PDF and HTML files. Get inspired, get moving – MindFusion Reporting for WinForms is designed and developed to help you acheive best possible results in little time and with little effort. Read more about the tool here…

Diagramming for ASP.NET, V5.4.2

The new version 5.4.2 of Diagramming for ASP.NET offers web developers a setoff useful new features. Here are the details:

Canvas mode improvements

  • Shape property of TableNode and ContainerNode is now supported in Canvas mode.
  • CellFrameStyle and EnableStyledText properties of TableNode are now supported in Canvas mode.
  • CellTextEditedScript event raised when users edit the text of table cells.
  • CreateEditControlScript event lets you create custom DOM element or fragment to use as in-place text editor.
  • NodeListView raises nodeSelected event when the user selects a node.
  • Load XML files from client side by calling loadFromXml method of Diagram class.
  • Fixed setZoomFactorPivot bug in virtual scroll mode.
MindFusion ASP.NET Diagram Control: Table Nodes

MindFusion ASP.NET Diagram Control: Table Nodes

Miscellaneous

  • NodeTextEdited, LinkTextEdited and CellTextEdited server-side events.
  • createThickness method added to ScriptHelper.
  • Sample projects have been improved and extended.
MindFusion ASP.NET Diagram Control: Container Nodes

MindFusion ASP.NET Diagram Control: Container Nodes

Here is a direct link to download the trial version:

Download MindFusion.Diagramming for ASP.NET, V5.4.2 Trial Version

Technical support
MindFusion support team is happy to assist you with any questions you might have about Diagramming for ASP.NET or any other of our products. You can leave a message at the discussion board, use the help desk or e-mail support@mindfusion.eu.. We strive to provide competent and detailed answers to your questions within hours of receiving them.

About Diagramming for ASP.NET: An advanced WebForms programming component that offers all the functionality that is needed for creating, styling and presenting attractive flowcharts, hierarchies, trees, graphs, schemes, diagrams and many more. The control offers numerous utility methods, path finding and cycle detection, rich event set and many useful user interaction features like tool tips, multiple selection, copy/paste to/from Windows clipboard and many more.

NetDiagram offers more than 100 predefined node shapes, scrollable tables, 13 automatic layouts and many
more. You can check the online demo to see some of the features in action. The control includes many samples, detailed documentation and step-by-step tutorials. Every features is duly documented and there’s plenty of code to copy. The component is not only powerful and scalable, but easy to learn and fun to use.

Diagramming for ActiveX V4.9.1 Released!

MindFusion is proud to announce the new release of its ActiveX Diagramming control. Here is an overview of the new features:

Highlight table rows
You can use the new HighlightedRow property of a Table to the index of a row that should be drawn highlighted. You can set the background of highlighted rows’ with RowHighlightColor. With the new AutoHighlightRows property, a row will be highlighted automatically when clicked.

Tables in the diagramming for ActiveX component.

Tables in the diagramming for ActiveX component.

Miscellaneous

  • VisioImporter, VisioExporter and SvgExporter has been merged into the main flowchartx.dll library file, and can now be used with its 64-bit version.
  • Set the BackColor property of ArrowLabel to fill the background of link labels.
  • Link segments now connect to the base of arrowhead shapes instead of going all the way through them, letting you use transparent and semi-transparent fill color for arrowheads without seeing segment ends inside.
  • Fixed crash in 64-bit SaveToBitmap function.

The trial version of the control is available for download from here:

Download FlowChartX 4.9.1 Trial Version

Technical support
MindFusion puts special effort in providing excellent customer support to all developers who use our components. You can write at the forum, help desk or use e-mail support@mindfusion.eu. All questions are usually answered within hours of being received.

About MindFusion.Diagramming for ActiveX: An ActiveX programming component that lets you create with ease every type of diagram, flowchart, scheme, chart, hierarchy, tree etc. The control supports rich user interaction model with advanced features like tool tips, grid alignment, docking points for nodes, scrolling and zooming and many more. FlowChartX implements 7 automatic layouts as well arrow routing. The appearance if each flowchart is completely customizable. Nodes can hold both images and text, their Z-order can be changed and there are tens of predefined shapes to choose from. Nodes support aero and glass visual effects.

The control also includes detailed documentation and many samples for a variety of languages and
platforms. You can find more about the features of the tool at the features page or check the licensing scheme and the prices here.

Diagramming for ASP.NET MVC, V2.5

MindFusion is pleased to announce the new release of Diagramming for ASP.NET MVC. It includes:

Appearance improvements

  • You can use the new Shape property of tables and containers to RoundedRectangle to render them with rounded corners.
  • Now it is possible to hide the frames of table cells by setting the CellFrameStyle property to None.
  • You can set the EnableStyledText property of TableNode class to render styled text in tables.
ASP.NET MVC Diagram Control:  Container Nodes

ASP.NET MVC Diagram Control: Container Nodes

New events

  • The control raises cellTextEdited event when users edit the text of table cells.
  • The createEditControl event lets you create custom DOM element or fragment to use as in-place text editor.
  • NodeListView raises nodeSelected event when the user selects a node.

Miscellaneous

  • Width and Height properties and the corresponding setter methods for DiagramView, NodeListView, Overview and ZoomControl are now obsolete. You can use new helper methods of the controls to pass an HTML attributes object, containing dimensions and other style data.
  • You can now prevent the control from automatically adding references to script files by disabling the AddScriptReferences property.
  • The loadFromXml(url) method of Diagram class lets you load XML files from client side.
  • We have fixed a setZoomFactorPivot bug in virtual scroll mode.

The trial version is available for direct download from the link below:

Download MindFusion.Diagramming for ASP.NET MVC, V2.5

MindFusion support team is happy to assist you with any questions you might have about Diagramming for ASP.NET MVC or any other of our products. You can leave a message at the discussion board, use the help desk or e-mail support@mindfusion.eu.. We strive to provide competent and detailed answers to your questions within hours of receiving them.

About Diagramming for ASP.NET MVC Control: It is a multi-purpose diagramming tool that consists of two parts: a .NET class library running on the server and a client side control implemented in JavaScript. The server side .NET library implements a flow-diagramming object model that lets you define structures such as trees, flowcharts and graphs. Every element in the diagram is easily accessible and the whole diagram is rendered as part of an HTML page by just calling the DiagramView extension method.

On the client the diagram is rendered by a DiagramView JavaScript control that draws its content on an HTML Canvas. The user is able to add nodes and links simply by drawing them with the mouse. There is also a NodeListView control, which lets users create new nodes via drag and drop.

MvcDiagram also supports various automatic layout algorithms that will make every diagram easy to understand and nice to look at. The diagram can also be easily serialized in binary or XML format. Exporting is done in a variety of formats including Pdf, Svg, Visio and more. You can read details about the components at the MvcDiagram features page.

Create a Dialogue Editor using MindFusion Diagram

In this post we’ll demonstrate how to create a graphical interface for editing dialogues using MindFusion diagramming API. The sample could be used as a module in different kinds of applications, such as software for creating and conducting surveys, editing interactive voice response systems, designing NPC dialogues in game development tools. You can download the complete project here:

DialogueEditor.zip

The sample code will show several features of Diagram control:

  • TableNode API
  • in-place edit
  • work with groups
  • graph traversal

Questions or IVR messages and their possible answers / responses will be displayed respectively in caption area and cells of TableNode objects. Helper nodes at table bottom will let users add or remove rows. DiagramLink objects connecting table rows to other tables will define the dialogue flow, i.e. what next question / message to display after user selects option from current message.

Let’s start by creating a new .NET Windows Forms project. If you have installed MindFusion diagram control and selected toolbox integration from setup wizard screen, you should now see a Diagram component and DiagramView control in the toolbox. If they are not available, right click and select Choose Items, navigate to installation folder and select the mindfusion.diagramming and mindfusion.diagramming.winforms assemblies. Now drag a Diagram component to the form, and set its name to “diagram”. This automatically adds a diagramming.dll reference to the project. Drag a DiagramView (which add diagramming.winforms reference) and name it diagramView. Set its Diagram property to “diagram”, selecting it from the drop-down in property grid.

We will allow creation only of tables and links, so let’s set DiagramView.Behavior property to LinkTables. Now if users draw on the diagram canvas, the component will create TableNode if the mouse pointer is over unoccupied part of the diagram, or a DiagramLink if the mouse points a table. If we wanted to support more type of nodes, we could add their prototypes to a NodeListView instance and let users create new instances via drag-and-drop.

Add the following fields and constructor code to set up appearance and behavior of diagram elements.

public MainForm()
{
	InitializeComponent();

	// set up initial table appearance
	diagram.TableNodeStyle.Brush = new MindFusion.Drawing.SolidBrush(Color.LightGray);
	diagram.TableRowCount = 1;
	diagram.TableColumnCount = 1;
	diagram.TableCaption = "question";
	diagram.NodeEffects.Add(new GlassEffect());

	// highlight a row when clicked
	diagram.AutoHighlightRows = true;

	// find link routes automatically
	diagram.RouteLinks = true;

	// allow edit texts by double click
	diagramView.AllowInplaceEdit = true;

	// row anchor points
	rightOutput = new AnchorPattern("Right");
	rightOutput.Points.Add(new AnchorPoint(100, 50, false, true));

	// table anchor points
	input = new AnchorPattern("Input");
	input.Points.Add(new AnchorPoint(50, 0, true, false));
	input.Points.Add(new AnchorPoint(50, 100, true, true));
}

AnchorPattern rightOutput;
AnchorPattern input;

Select the diagram component in form editor and double click its NodeCreated event to add event handler. NodeCreated is raised when the user draws a new node. Add following code to associate a question / IVR message with the table, and initialize some default texts. The BeginEdit method automatically opens in-place editor to let user edit caption text immediately after drawing. We also create + and – ShapeNodes that will act as button widgets attached to the table’s bottom-right corner.

private void OnNodeCreated(object sender, MindFusion.Diagramming.NodeEventArgs e)
{
	var table = e.Node as TableNode;
	if (table != null)
	{
		int tableId = (1 + diagram.Nodes.Count / 3);
		table.Id = tableId;
		table.RowAnchorPattern = rightOutput;
		table.AnchorPattern = input;
		table.ConnectionStyle = TableConnectionStyle.Both;
		table[0, 0].Text = "option 1";
		table.Caption = "question " + tableId;
		diagramView.BeginEdit(table);

		// create + button for adding new rows
		var r = table.Bounds;
		var p = new PointF(r.Right - 14, r.Bottom - 8);
		var s = new SizeF(6, 6);
		var plus = diagram.Factory.CreateShapeNode(p, s, Shapes.Cross);
		plus.Brush = new MindFusion.Drawing.SolidBrush(Color.Green);
		plus.AttachTo(table, AttachToNode.BottomRight);
		plus.Tag = "+";

		// create - button for deleting selected row
		p.X += 7;
		p.Y += 2;
		s.Height -= 4;
		var minus = diagram.Factory.CreateShapeNode(p, s, Shapes.Rectangle);
		minus.Brush = new MindFusion.Drawing.SolidBrush(Color.Red);
		minus.AttachTo(table, AttachToNode.BottomRight);
		minus.Tag = "-";

		plus.Locked = minus.Locked = true;
		table.SubordinateGroup.AutoDeleteItems = true;
	}
}

Now add a NodeClicked handler that adds or deletes rows. If the + button is clicked, the code inserts a new row before current highlighted row. If the – button is clicked, the handler deletes current highlighted row.

private void OnNodeClicked(object sender, NodeEventArgs e)
{
	if ("+".Equals(e.Node.Tag))
	{
		var table = (TableNode)e.Node.MasterGroup.MainItem;
		if (table.HighlightedRow == -1)
			table.RowCount++;
		else
			table.InsertRow(table.HighlightedRow);
	}

	if ("-".Equals(e.Node.Tag))
	{
		var table = (TableNode)e.Node.MasterGroup.MainItem;
		if (table.HighlightedRow != -1)
			table.DeleteRow(table.HighlightedRow);
	}
}

Finally, lets create export function that will traverse the dialogue graph and export it to a custom-format XML file, which could then be passed on to a system processing the dialogues, such as IVR service.

private void btnExport_Click(object sender, EventArgs e)
{
	var fileDlg = new SaveFileDialog();
	if (fileDlg.ShowDialog() == DialogResult.OK)
	{
		var doc = new XmlDocument();
		var root = doc.CreateElement("Dialogue");
		doc.AppendChild(root);

		foreach (var node in diagram.Nodes)
		{
			var table = node as TableNode;
			if (table != null)
			{
				var questionElement = doc.CreateElement("Question");
				root.AppendChild(questionElement);

				int id = (int)table.Id;
				questionElement.SetAttribute("Id", table.Id.ToString());
				questionElement.SetAttribute("Text", table.Caption);

				for (int r = 0; r < table.Rows.Count; r++)
				{
					string answer = table[0, r].Text;
					var answerElement = doc.CreateElement("Answer");
					questionElement.AppendChild(answerElement);
					answerElement.SetAttribute("Text", answer);
					if (table.Rows[r].OutgoingLinks.Count > 0)
					{
						var link = table.Rows[r].OutgoingLinks[0];
						var nextQuestion = (TableNode)link.Destination;
						answerElement.SetAttribute("Text", answer);
						answerElement.SetAttribute("NextId", nextQuestion.Id.ToString());
					}
				}
			}
		}

		doc.Save(fileDlg.FileName);
	}
}

If you run the application now and draw several tables and links, you should see a similar screen:

dialogue editor created with mindfusion diagram control for .NET

The code above uses MindFusion’s .NET API and can be used with Windows Forms, WPF, Silverlight and ASP.NET diagramming components. The Java API for Android and desktop Swing application will look similar, with setter method calls instead of property assignments.

You can download the trial version of any MindFusion.Diagramming component from this page.

Enjoy!

Diagramming for JavaScript, V2.4

The new version of Diagramming for JavaScript library is out! Here is an overview of the new features:

Appearance improvements

  • You can now set the Shape property of tables and containers to RoundedRectangle and render them with rounded corners.
  • It is possible to hide the frames of table cells by setting the CellFrameStyle property to None.
  • You can now set the EnableStyledText property of TableNode class to render styled text in tables.
JavaScript Diagram Library: Table Nodes

JavaScript Diagram Library: Table Nodes

New events

  • The control raises cellTextEdited event when users edit the text of table cells.
  • The createEditControl event lets you create custom DOM element or fragment to use as in-place text editor.
  • NodeListView raises nodeSelected event when the user selects a node.

Miscellaneous

  • jQuery mode is now the default and all sample projects have been updated to use jQuery. To continue using the Microsoft Ajax library, set MindFusionImpl = “MsAjax” before loading Diagramming.js
  • the loadFromXml method of Diagram class lets you load XML files created by MindFusion diagram controls for other platforms.
  • fixed setZoomFactorPivot bug in virtual scroll mode.

Registered customers with an active upgrade subscription can download the licensed version from the clients area on our site.

A trial version is available for direct download from the following link:

Download MindFusion Diagramming Library for JavaScript, V2.4

We are glad to receive any comments, suggestions and feedback. You can write us at e-mail support@mindfusion.eu or use the help desk. You can use the JsDiagram section on MindFusion forum to post questions about the tool.

About Diagramming for JavaScript Library: Written 100% in JavaScript, this tool uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and integrate into any web application. JsDiagram supports a variety of predefined node shapes, customizable links, rich event set and many appearance options.

The user interaction model includes resizing / moving / selecting and modifying any diagram element. The tool boasts an elegant API, which is documented in details as well numerous step-by-step guides and tutorials. Various samples are provided to let you learn quickly how to use the most important features of the library – check them here. JsDiagram is not only the perfect choice for creating any type of diagram in the browser – it can also arrange it the way you wish with a mouse click using one of its automatic graph layout algorithms. For more details about the features of the component, please visit the Diagram for JavaScript page.

Combination Chart in Android

This post is a step-by-step tutorial in how to create a combination chart in android with the Charting for Android library.

I. Project configuration

Let’s create a new project. In Eclipse, we choose File -> New -> Android Application Project. We write “CombinationChart” as an application name. The package is called com.mindfusion.combinationchart. The other settings remain unchanged.

II. Adding the jar file.

With project created, it’s time to add the libraries. Copy the droidchart.jar from the libs directory of the sample project (download file here) to the libs directory of your project. Then right-click on your project and choose Properties -> Java Build Path -> Libraries -> Add JARs. Navigate to the libs folder and add the droidchart.jar.

Adding a JAR library to an Android application project

Adding a JAR library to an Android application project

III. Declaring the chart

Time to declare the chart in the layout of the application. We build a simple application, where the chart will be the only thing that shows. So, we edit the activity_main.xml file, which is found in res -> layout folder in the project tree for the CombinationChart application.

We change the layout to Linear and we introduce a new xml node – chart. The chart node refers to a class found in the com.mindfusion.charting namespace.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:chart="http://schemas.android.com/apk/lib/com.mindfusion.charting"
...

Then we declare the chart:


We name it combi_chart. This is important because we’ll use the name to retrieve the chart object in the next step.

IV. General chart settings.

In this step we’ll set the general chart settings. First, we get the chart object, which is declared in the layour (see previous step).


private AxesChart chart;
....
chart = (AxesChart)findViewById(R.id.combi_chart);

Then we set the title and the offset of the title e.g. the space between the title and the plot are for the chart. We also set the height of the font for the title labels and the other labels at the chart.


chart.setTitle("Visitors in Paradise Hotels");
chart.setTitleOffset(50f);
chart.setTitleHeight(30f);
chart.setLabelHeight(20f);

V. The grid.

Our chart has a crossed grid with light gray grid stripes. This is set with the following code:


ArrayList gridStrokes = new ArrayList();
gridStrokes.add(Color.rgb(207, 207, 207));
chart.setGridStrokeColors(gridStrokes);

chart.setGridType(GridType.Crossed);

VI. The axes.

The X-axis has 10 intervals. Each division has its own label. We set the label type to custom text, specify the labels and customize the min and max numbers to be shown:


chart.xAxisSettings.setMin(0f);
chart.xAxisSettings.setMax(10f);
chart.xAxisSettings.setInterval(1f);
chart.xAxisSettings.setLabelType(AxisLabelType.Custom);

ArrayList xLabels = new ArrayList();
Collections.addAll(xLabels, "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014");
chart.xAxisSettings.setLabels(xLabels);

The Y-axis has no custom labels, it just shows the value intervals. But it has a title. Here is how we set it:


chart.yAxisSettings.setMin(0f);
chart.yAxisSettings.setMax(30f);
chart.yAxisSettings.setInterval(10f);
chart.yAxisSettings.setLabelType(AxisLabelType.Scale);
chart.yAxisSettings.setTitle("in thousands");

VII. The bar series.

The first series is a bar series. We create a new instance of the BarSeries class and add 10 x and y float numbers, which will be used to calculate the size and location of the bars:


BarSeries series1 = new BarSeries();

ArrayList xData = new ArrayList();
for(int i = 0; i < 10; i++)
xData.add((float)i);
series1.setXData(xData);

ArrayList yData1 = new ArrayList();
Collections.addAll(yData1, 15f, 17f, 18f, 19f, 18.4f, 16.4f, 12f, 17f, 18.7f, 19.1f );
series1.setYData(yData1);

The next thing to do is to specify the colors for the bars and their outlining. The library has the FillColors and StrokeColors property, which we use:


ArrayList fillColors1 = new ArrayList();
fillColors1.add(Color.rgb(174, 200, 68));
series1.setFillColors(fillColors1);

ArrayList strokeColors1 = new ArrayList();
strokeColors1.add(Color.rgb(115, 133, 45));
series1.setStrokeColors(strokeColors1);

Let’s not forget to add the ready series to the collection of series.


chart.addSeries(series1);

VIII. The line series with scatters.

The line series is an instance of the LineSeries class, where we set the ScatterType and LineType properties:


LineSeries series2 = new LineSeries();
series2.setScatterType(ScatterType.Circle);
series2.setLineType(LineType.Line);
series2.setScatterSize(20f);
...
chart.addSeries(series2);

The ScatterFillColors and ScatterStrokeColors are used for setting the colors of the scatters. The properties for the line are the same as with the bar series: StrokeColors.

IX The area series.

The area series has a different line type than the scatter series. We don’t set the scatter type here since its set to “None” by default.

The data in both line series is set in the same way as in the bar series and we don’t cite it again.


LineSeries series3 = new LineSeries();
series3.setLineType(LineType.Area);
...
chart.addSeries(series3);

Here is the final chart:

An elegant combination chart for Android mobile devices.

An elegant combination chart for Android mobile devices.

The sample is available for download from here:

Download Android Combination Chart Sample

Read more about MindFusion Charting for Android library here.

Scheduling for WinForms, V5.6

We are excited to announce the new release of MindFusion.Scheduling for WinForms. The new version includes:

Visual Studio 2015 Support

The installer of the Scheduling control can create VS2015 toolbox palette for its components.

Interactive Recurrence Rescheduling

You can now reschedule recurrences interactively by holding down the RescheduleRecurrenceKey while dragging a recurrent item. As a truly smart control, MindFusion.Scheduling tries to preserve the current pattern of the recurrence when possible. Otherwise, the recurrence may be modified to accommodate to the new start and end times of the modified item. Note that interactive rescheduling is not registered in the undo history.

New Theme

Bring a touch of fresh spring air to your calendars with the new built-in Light theme. It is available through the ThemeType enumeration.

The new 'Light' theme

The new ‘Light’ theme

New Properties

Scheduling for WinForms offers a few new properties:

  • The new HScrollBarHeight and VScrollBarWidth properties in the ControlStyle class allow you to modify the size of the scrollbars.
  • The RescheduleRecurrenceKey property in the Calendar class can be used to modify recurrences interactively.
  • The RotateGroupHeaderTexts property in the ListViewSettings class can be used to rotate the resource names in the group headers.
  • GroupHourCount, HourFormat and TimelinePadding added to the TimetableSettings class.

MindFusion.Scheduling as a NuGet Package

The component is also available on Nuget. To install the component, run the following command in the Package Manager Console:

PM> Install-Package MindFusion.Scheduling

The trial version of the control is available from the link below:

Download MindFusion.Scheduling for WinForms 5.6

If you have questions about the component, please use the support e-mail or the help desk. MindFusion takes special efforts in providing fast and competent answers to all support inquiries we receive.

About MindFusion.Scheduling for WinForms: MindFusion.Scheduling for WinForms is a programming component that adds to your .NET application powerful features for creating and customizing any type of schedule, calendar, time table, resource table and many more. The tool supports six data views, input/output from/to a variety of data sources and rich user interaction model. Scheduling for WinForms offers various auxiliary forms for creating and editing appointments, tasks and events. A theme editor for creating custom themes is also available. The control features a rich variety of predefined themes and various item effects.

You can read more about Scheduling for WinForms at its features page. Visit the gallery page to see screenshots of various calendars and schedules created with the tool. For more information about licenses and prices go to the buy page.