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:

<com.mindfusion.charting.AxesChart
android:id=”@+id/combi_chart”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
chart:gridType=”horizontal”
chart:titleOffset=”40dp”
chart:titleHeight=”40dp”
chart:labelHeight=”12dp”
tools:context=”.MainActivity” />

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.