New Release for the Free JS Chart Library

MindFusion Free JS Chart has a new release with the following new features:

– All Series can accept now simple JavaScript array-s as arguments instead of Collections.List instances
– The ToolTip class is greatly extended with many new properties that allow you to customize the apparance and position of tooltips
– The Color.knownColors field lists all standard CSS color names
– Brush and Pen instances can be created with simple strings that specify the HTML code of the color as argument instead of Color objects.
– The yLabelAlignment property of BiaxialChart specifies horizontal alignment of Y-axis labels.
– Texts are now properly underlined when FontStyle.Underline is set.

Free JS Chart is MindFusion charting library that is offered free of charge for commercial use. No attribution is required.

More about MindFusion Free JS Chart at https://mindfusion.eu/free-js-chart.html

Binding the Java Planner to Microsoft SQL Server Using JDBC

In this blog post we will bind to an MS SQL database called bookings. There we will select all data from a table named booking_data. The data is DateTime values. We will use the values to change the background of corresponding calendar cells in a simple Java application. The Java application renders a single-month calendar built with MindFusion Scheduler for Java library.

I. MS SQL EXPRESS Server Configuration

We download and install MS SQL EXPRESS server from https://www.microsoft.com/en-us/sql-server/sql-server-downloads. The installation also includes an application called “Sql Server Configuration Manager”. We start that application and click on the “SQL Services” tab. There we need to make sure that two services are running:

  • SQL Server
  • SQL Server Browser

You start these services by pressing the arrows in the toolbar at the top. If you cannot do this you need to change the Start Mode for this service. Double click it and in the Properties dialog that appears click on the “Service” tab. There you will find the “Start Mode” property and change it to “Manual”. Once you’ve done this you can start, stop or pause the service from the toolbar icons.

SQL Server Config Manager: Services

In order to start an SQL Server Service you might have to change its Start Mode to “Manual”.

Then we click on the “SQL Native Client” node and we select the “Client Protocols” tab. We make sure the TCP/IP Protocol is enabled.

SQL Server Config Manager: Enable TCP/IP

Make sure the TCP/IP protocol is enabled for the JDBC connection to succeed

The next step is to download Microsoft SQL Server Management Studio from https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-2017

Once we install it and start it we can create a new database called bookings. We right click on the Databases menu and choose “New Database”. We call it “bookings”. Then we expand the tree under “bookings” and right click on the “Tables” node. A window opens where we can define the columns for our new table. We add two columns:

  • id of type integer, which we set at primary key by right-clicking on it.
  • booked_date of type DateTime which will hold the dates that are booked.
Create a new table using MS SQL Server Management Studio

MS SQL Server management Studio: the dialog for defining a new table

After we are done we choose save and at this point we can provide a name for our table. We call it booking_data. With the table defined we right-click on it and choose “Edit Top 200 Rows”. There we add just three days (Jan 16th, Jan 22nd, Jan 26th) all of which in the current month. The data is auto-saved.

MS SQL Server management Studio: Table Edit

MS SQL Server Management Studio: here is how you edit the table data

The next step is to create a new user that will connect to this database. We click the “Security” node on the navigation tree and then “Logins”. Right-click and we choose “New Login”. In the dialog that opens we provide username and password. In order to do that we need to have the Login method set to “SQL Server authentication”. In the next tab “Server Roles” the new user must have “public” role. Then in “User Mapping” we tick the “bookings” database. In the Securables tab in the “Grant” grant column for the user we tick the “Connect SQL” permission. Then we close the dialog.

Grant SQL Connect to a DB User

Grant the new user the right to perform an SQL connection.

We get back to the bookings database and right-click on it. We choose “Properties” and from the dialog we click on the “Permissions” menu. There we select the user we’ve just created and in the Grant column of the underlying table we grant her the “Select” permission.

Granting User Permissions

Grant the DB user ‘Select’ permission to perform the required SQL query

With that the setup of our server and user is ready.

II. JDBC Driver & MS SQL Express Connection Properties

We download Microsoft’s JDBC Driver for MS SQL Server from this link: https://docs.microsoft.com/en-us/sql/connect/jdbc/microsoft-jdbc-driver-for-sql-server?view=sql-server-2017 and extract it. Next we create a new Java project. For this project we’ve used IntelliJ IDEA but any other Java IDE will do. In the project tree to the right we create a subfolder that we call “libs”. There we copy the jar of JDBC driver from the folder where we extracted it. Microsoft provides two versions of the driver depending on the JRE that you use. In our case we choose the version for JRE 10, which is called mssql-jdbc-7.0.0.jre10.jar. Next we right-click on the name of our project and select “Open Module Properties”. In the dialog we choose the “Modules” menu and there we click on the “Dependencies” tab and select the mssql-jdbc-7.0.0.jre10.jar module.

Configuring IntelliJ Project Modules

Configuring the IntelliJ Project to include the JDBC driver module

We click on the src folder of the project and add a new class, which we call MainWindow.java. In it we write the method establishConnection. This method is responsible for connecting to the MS SQL database “bookings”. Here is the code that makes the connection:

private void establishConnection() throws ClassNotFoundException
{

Connection conn = null;
PreparedStatement pst;

try {
// db parameters
String sql = "SELECT booked_date FROM booking_data";

String userName = "mindfusion";
String password = "mf123";

String url = "jdbc:sqlserver://DESKTOP-NV9S0TU\\SQLEXPRESS;databaseName=bookings;";

Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
conn = DriverManager.getConnection(url, userName, password);

pst = conn.prepareStatement(sql);
ResultSet rs = pst.executeQuery();

If you’ve followed strictly the steps we’ve outlined so far at this point you would successfully connect to your MS SQL Server with the credentials you’ve set up following the guide so far.

III. The Schedule Application

We download MindFusion Java Swing Scheduler from https://mindfusion.eu/java-scheduler.html and unzip it. We copy JPlanner.jar in the libs folder of the project and add it as a project dependency from the “Open Module Settings” menu. Then we define a Calendar variable and assign it to a new instance of the Calendar class.

public MainWindow() throws ClassNotFoundException
{
setDefaultCloseOperation(EXIT_ON_CLOSE);
setSize(368, 362);
setTitle("MindFusion.Scheduling Sample: Minimal Application");

calendar = new Calendar();
calendar.setTheme(ThemeType.Light);
..................
..................
..................

establishConnection();
}

private Calendar calendar;

At the end of the method we call establishConnection and connect to the MS SQL Server.

IV. Styling the Calendar Dates

The aim of our sample application shall be to color those cells of the calendar that correspond to the dates we’ve read from the database. In order to do this we use the DateStyle class that sets some useful appearance properties to a range of cells that are specified with the setFrom and setTo methods. We use setBrush to change the background of the cell.

while (rs.next()) {
System.out.println(rs.getString("booked_date"));
Date date = rs.getDate("booked_date");

DateStyle dStyle = new DateStyle();
dStyle.setFrom(new DateTime(date));
dStyle.setTo(new DateTime(date));
Style style = new Style();
style.setBrush(new SolidBrush(Color.pink));
dStyle.setStyle(style);

calendar.getDayStyles().add(dStyle);

}

Finally we add the style to the DayStyles collection of the calendar.

Here is the final application:

Scheduling application in Java Swing with MS SQL Server JDBC Connection

MindFusion Java Swing application with the Scheduling library and MS SQL Server

You can download the project together with the MS SQL Server JDBC driver library and the scheduling library from this link:

Download JPlanner Sample Application That Uses MS SQL Server JDBC Connection

About MindFusion Scheduling for Java Swing: The library provides extensive feature-set for creating and customizing all sorts of calendars, task lists, time-management tables, resource allocation tables and other. It boasts various options for customizing appearance and numerous events for handling user actions. The distribution archive includes a lot of samples and extensive documentation. Learn more at https://mindfusion.eu/java-scheduler.html

JavaScript Chart Library, V1.1 Released

The new version of the JavaScript Chart library contains the following new features:

FunnelChart

Funnel charts are often used to represent stages in a sales process and show the amount of potential revenue at each stage. In MindFusion.Charting for JavaScript funnel charts can be created by utilizing the FunnelChart or FunnelRenderer classes. FunnelChart inherits from the base Chart class and offers additional customization through its segmentSpacing and bottomBase properties.

Funnel chart in JavaScript

Funnel chart in JavaScript

Theme XML serialization
Themes now can be serialized to and from XML through the use of the respective loadFrom and saveTo methods.

Miscellaneous

Download the latest version directly from here:

Download JavaScript Chart Library, V1.1 Trial

Technical support is available at the JS Chart forum, per email at support@mindfusion.eu or at the HelpDesk. Either way MindFusion attentive support team would be glad to answer your questions.

About MindFusion JavaScript Chart Library: MindFusion JS Chart is an interactive library for charts and gauges written purely in JavaScript. It supports all common chart types, multiple series, custom data,financial charts, funnel charts, a large selection of gauges and rich styling capabilities. The elegant architecture of the library allows you to create dashboards, charts with multiple different types of series in a single plot, unlimited number of axes, reusable styling themes, various oval and linear gauges. The innovative approach to data lets you define your own data classes by implementing a single interface.
The library also boasts a rich event set, zoom, pan, dragging of the legend and a set of many popular gauges. It is designed and implemented to provide JS developers with the perfect tool to create beautiful, interactive dashboards fast and easy. Download trial directly at http://mindfusion.eu/JavaScript.Chart.zip Get your license today at http://www.javascript-chart-buy.html

JavaScript Diagram Library, V2.8 Released

The new JavaScript library has been released with the following new features:

Fluent API

Builder objects with property setters and shortcut methods for font and brush creation add support for fluent programming style. Static With and instance init methods in DiagramItem, Style and Layout -derived classes return a builder instance that can be used to set up respective new or existing objects.

DiagramLink improvements

  • HeadStroke, HeadStrokeThickness and HeadStrokeDashStyle properties let you customize arrowhead strokes independently of line segments strokes.
  • The AllowSelfLoops property of Diagram class controls whether users are allowed to draw self-loop links.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points.
The new JS Diagram boasts improved DiagramLink-s.

The new JS Diagram boasts improved DiagramLink-s.

Miscellaneous

A trial version is available for download here:

Download MindFusion Diagram Library for JavaScript, V2.8

About Diagramming for JavaScript Library: Written 100% in JavaScript, this tool is a dynamic, browser based visualization library that uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and allows you to integrate interactive diagrams for JavaScript and HTML into any web application. This MindFusion graphing library 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 library boasts an elegant API, which is documented in details, numerous step-by-step guides and tutorials. The Diagramming API also provides TypeScript definitions. Various samples are provided to let you learn quickly how to use the most important features of the library – check them here. The JavaScript diagram builder 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.

Diagram Library for Java Swing, V4.3

We have released the new version of the Java Diagram library. Here is a brief summary of the new features:

Fluent API

Builder classes in com.mindfusion.diagramming.builders package add support for fluent programming style. Static with and instance init methods in DiagramItem, DiagramItemStyle and Layout -derived classes return a builder instance that can be used to set up respective new or existing objects.

DiagramLink improvements

  • The component no longer keeps a separate segmentCount field, removing a common source of errors. The SegmentCount property now calculates its value from ControlPoints elements. The updateFromPoints(updateGroups, updateSegments) overload has been removed too.
  • SegmentCount setter no longer refuses changing number of segments if auto-routing is enabled or the link is a self-loop.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points:
Java Diagram Library: Spline Links

Java Diagram Library: Spline Links

Enum types

Old-style enumeration classes with static finals have been replaced by enum types, improving type checking and auto-completion support. This change will not affect your code if only passing enum members to methods from the API. If storing them in fields on the other hand, you must change the field type from int to respective enum type.

Several bug fixes
We have fixed a setLicenseKey problem and a bug with the SvgExporter.

You can find details about the new release at the official announcement page here.

The trial version is available for download from the following link:

Download MindFusion.Diagramming for Java Swing, V4.3 Trial Version

Technical support
MindFusion puts special effort in providing high quality technical support to all its current and future clients. You can post your questions about Diagramming for Java at the forum, help desk or at support@mindfusion.eu. All support inquiries are usually answered within hours of being received.

About Diagramming for Java Swing: MindFusion.Diagramming for Java Swing provides your Java application with all necessary functionality to create and customize a diagram. The library is very easy to integrate and program. There are numerous utility methods, rich event set, more than 100 predefined shapes. The tool supports a variety of ways to render or export the diagram, advanced node types like TreeView nodes, hierarchical nodes, tables, container nodes and many more. There are 15 automatic layouts, various input / output options and fully customizable appearance. A detailed list with JDiagram’s features is uploaded here. You can check the online demo to see some of the functionality implemented.

Diagramming for Java Swing is royalty free, there are no distribution fees. Licenses depend on the count of developers using the tool – check here the prices.

Diagramming for Windows Forms, V6.4.2

We have released version 6.4.2 of FlowChart.NET. It contains several customer-requested features and improvements:

Fluent API
Extension methods in MindFusion.Diagramming.Fluent and MindFusion.Diagramming.Layout.Fluent namespaces add support for fluent programming style:

using MindFusion.Diagramming.Fluent;
using MindFusion.Diagramming.Layout.Fluent;
//...

diagram.Factory
	.CreateShapeNode(10, 10, 20, 20)
		.Brush(Color.LightGray)
		.Font("Arial", 12)
		.EnableStyledText(true)
		.Text("Task <i>1</i>")
		.ToolTip("This is the task");

new TreeLayout()
	.LevelDistance(20)
	.NodeDistance(20)
	.LinkStyle(TreeLayoutLinkType.Cascading3)
	.Arrange(diagram); 

DiagramLink Improvements

  • The component no longer keeps a separate segmentCount field, removing a common source of errors. The SegmentCount property now calculates its value from ControlPoints elements. The UpdateFromPoints(updateGroups, updateSegments) overload has been removed too.
  • SegmentCount setter no longer refuses changing number of segments if auto-routing is enabled or the link is a self-loop.
  • The new Spline element of LinkShape enumeration draws links as interpolating splines that pass through all of their control points:
WinForms Diagram Control: Spline Links

WinForms Diagram Control: Spline Links

Miscellaneous

  • The ModifierKeyAction.ExtendSelection mode selects items within the lasso without deselecting old ones.
  • The Visio Stencils import API provides access to BeginArrow and EndArrow values.
  • The Visio Stencils import API provides access to Connection elements defined for a shape.
  • It is now enough to set EnableStyledText to enable styled-text mode without having to also enable PolygonalTextLayout.
  • Fixed bug where ItemAdded event wasn’t raised for interactively drawn items.
  • Miscellaneous UI control assemblies (NodeListView, LayerListView, Ruler, etc) have been merged into a single MindFusion.Diagramming.WinForms.Controls.dll.

A direct link to download the trial version follows:

Download MindFusion WinForms Diagram Component, V 6.4.2

Updated assemblies are also available as MindFusion.Diagramming NuGet package.

About MindFusion.Diagramming for WinForms: A programming component that provides any WinForms application with a full set of features for creating and customizing all types of diagrams, flowcharts, schemes, hierarchies, trees, graphs etc. The control provides numerous ways to save and load a diagram, six auxiliary controls and more than 12 automatic graph layout algorithms. Diagram elements include scrollable tables, container nodes, multi-segment arrows, custom diagram item types and many more. Further details here.

Diagramming for WinForms is a royalty-free component, clients get 12 month upgrade subscription when buying a license. The source code is also available for purchase. Visit the buy page for a list with the current license prices.

MindFusion Releases Xamarin Charts

MindFusion Xamarin Chart has been released with the complete set of features needed to create and customize a wide selection of charts. The control boasts a variety of chart types like radar, polar, line, bubble, bar, column, doughnut, step, scatter etc. Part of the library are also a dashboard component and a component for financial charts.

3D Xamarin Chart

3D Xamarin Chart

Each chart type exposes numerous options to be customized in order to answer fully the requirements of the user. The control is packed with many samples that demonstrate different aspects of a chart type and offer ready-to-use code. The API is documented in details, with helpful tutorials and guides.

The chart component supports flexible data interface, which allows any data source to be used as a provider of chart data as long as it implements the Series interface. Predefined are a set of the most common data sources like XML, numeric lists, DateTime values, SQL database fields.

The innovative approach to styling lets developers control each aspect of the chart’s looks. They can alter the styling on the tiniest elements or concentrate on the bigger picture and create a global theme which can be reused.

Xamarin Bubble Chart

Xamarin Bubble Chart

The component is free to try without feature restrictions for a period of 60 days. Each license includes 12 month upgrade subscription. You can find out more about MindFusion Xamarin chart component at http://mindfusion.eu/xamarin-chart.html

About MindFusion: MindFusion has provided quality software tools for thousands of organizations and individuals for over a decade. With focus on lean software design and excellent technical support, MindFusion has been preferred by many Fortune 500 companies and world-known names from all industries and fields of business. MindFusion programming components are easy to use, with plenty of options to be customized and make development much faster and successful.

Design custom shapes with WPF Diagram

Watch here the video for this tutorial.

This tutorial will run you through the process of creating custom WPF diagram shapes using the built-in Shape Designer. Keep in mind that the Designer is intended as a sample and is limited in terms of functionality. The designer is available inside the installation of MindFusion.Diagramming for WPF but is also included in this tutorial for convenience. For the purposes of this tutorial, we will create an ‘AND Gate’ circuit diagram shape as illustrated by the following image:

Circuit shapes

Run the Shape Designer application through the ShapeDesign.exe. The Shape Designer opens up with a single rectangular shape ready to be modified.

Diagramming WPF Circuit Shapes 1

The Shape Designer does not currently support shape renaming (remember, it’s just a sample), therefore create a new shape through the Shapes menu and name it ‘AndGate’.

Diagramming WPF Circuit Shapes 2

Select the newly created shape from the list on the left. In the editor select the right segment of the shape’s rectangle and press the DEL button on the keyboard. This will delete the segment and make the shape triangular.

Diagramming WPF Circuit Shapes 3

Adjust the end points of the shape segments so that it gets deflated on both sides. To adjust a segment, hover it with the mouse (so that its adjustment handles appear), then drag the handles.

Diagramming WPF Circuit Shapes 4

Select the arc primitive from the list on the right side of the screen. Drag this primitive over the top segment of the shape (until it gets highlighted in red) then drop.

Diagramming WPF Circuit Shapes 5

This will replace the line segment with an arc. Repeat the same process for the bottom segment of the shape.

Diagramming WPF Circuit Shapes 6

Adjust the middle point of both segments so that the shape looks protruded. Then drag three line primitives from the list on the right to the editor pane. Be careful not to drop the primitives over existing elements because this will replace the elements.

Diagramming WPF Circuit Shapes 7

Align the newly created line primitives with the existing shape.

Diagramming WPF Circuit Shapes 8

From the list with anchor points at the right side of the application, drag two anchor points from the first kind (input only) and one anchor point from the second kind (output only) and drop them inside the editor. Align the anchor points with the end points of the line segments created in the previous step.

Diagramming WPF Circuit Shapes 9

This will conclude the creation of the ‘AND Gate’ shape. You can test the shape in the preview diagram at the bottom of the screen.

Diagramming WPF Circuit Shapes 10

Save the shape library. Using the same approach, recreate the other circuit shapes from the image above. The following screenshot illustrates the complete library.

Diagramming WPF Circuit Shapes 11

The shape designer along with the shape library containing the circuit shapes can be downloaded from the link below:

Design Circuit Shapes

You are welcome to ask any questions about the WpfDiagram control at MindFusion discussion board or per e-mail at support@mindfusion.eu.

Click here here to visit the official page of the control.

We hope you find this tutorial useful and thank you for your interest in MindFusion developer tools.

MindFusion ASP.NET Diagram Control, V5.6

MindFusion is proud to present you with the new version of its ASP.NET diagram control.

Below you can read about the recently added features. As always, your questions are welcome. Use the technical support e-mail or MindFusion ASP.NET diagram forum.

Free-form nodes

A FreeFormNode collects all points from users’ mouse or touch input and displays them as node’s outline. To let users draw free-form nodes interactively, set Behavior to DrawFreeForms or LinkFreeForms.. Use the Points property of FreeFormNode to get or set outline points programmatically. If the Closed property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than AutoCloseDistance, the node’s Closed property is automatically set to true. AutoCloseDistance  default value is float.MaxValue, so free-form nodes are always closed.

Free form nodes allow the user to draw diagram shapes with the mouse of the finger

Free form nodes allow the user to draw diagram shapes with the mouse of the finger

Convert free-form drawings to ShapeNodes

Additional drawing modes, convenient for touch input, convert FreeFormNode objects drawn by user to ShapeNode objects with matching shapes. To enable them, set Behavior to DrawFreeShapes or LinkFreeShapes. The shapes against which the user’s input is matched are set via diagram’s FreeFormTargets property. By default it contains Rectangle, Decision and Ellipse shapes.

Miscellaneous

  • NodePastedScript and LinkPastedScript client-side events raised when items are pasted from the clipboard.
  • PdfExporter now creates page hyperlinks if HyperLink is set to a value in “page://{number}” format, e.g. set “page://1” to open the second PDF page when the item is clicked
  • TypeScript definitions for the client-side Diagramming API are now provided in jsdiag.d.ts file.

Fixed bugs

  • CanvasVirtualScroll mode fixed for parent div size specified in percent units.
  • Fixed bug where the ExpandOnIncoming property specifying link direction for collapse/expand actions did not work correctly.
  • Removed several global JavaScript variables created inadvertently by the control.
  • Fixed bug where ShapeNodes’ Image did not zoom correctly in ImageMap mode for some ImageAlign values.

Installer for the latest version can be downloaded here, or from the clients area on our site:

Download MindFusion ASP.NET Diagram Control, V5.6 Trial

Updated assemblies and script files are also available as MindFusion.Diagramming.WebForms NuGet package.

About MindFusion ASP.NET Diagram Control: This is a reusable ASP.NET control that provides your WebForms application with the complete functionality to create, style and present flowcharts, hierarchies, trees, graphs, schemes, diagrams in the browser. You can leverage the large set of utility methods, path finding capabilities and cycle detection to build the perfect interactive diagram that supports plenty of UI features like tool tips, multiple selection, copy/paste to/from Windows clipboard and many more.

MindFusion ASP.NET control offers you more than 100 predefined node shapes, scrollable tables, 13 automatic layout algorithms, rich choice of pen and brushes and a long list of other options that will greatly shorten the time needed for developing an online business application that must implement diagramming features. MindFusion has built many different samples and tutorials that demonstrate the features of the control and give you abundance of sample code to copy and study. You can read more about the Diagram Control for ASP.NET here.

MindFusion JavaScript Diagram Library V2.6

MindFusion JavaSript Diagram Library has a new version. Here is an overview of the new features:

Free-form nodes

The new version lets you use a special, new type of nodes called FreeFormNode. In this case the control collects all points from users’ mouse or touch input and displays them as node’s outline. In order to allow users to draw free-form nodes interactively, set Behavior to DrawFreeForms or LinkFreeForms. The Points property of FreeFormNode allows you to get or set outline points programmatically. If the Closed property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line.

Free form nodes allow the user to draw diagram shapes with the mouse of the finger

FreeFormNodes allow the user to draw diagram shapes with the mouse or the finger

Convert free-form drawings to ShapeNodes

This release introduces additional drawing modes, convenient for touch input. They convert FreeFormNode objects drawn by the user to ShapeNode objects with matching shapes. To enable them, set Behavior to DrawFreeShapes or LinkFreeShapes. The shapes against which the user’s input is matched are set via diagram’s FreeFormTargets property. By default it contains Rectangle, Decision and Ellipse shapes.

Miscellaneous

  • TypeScript definitions for the Diagramming API are now provided in jsdiag.d.ts file.
  • nodePasted and linkPasted events are now raised when new DiagramNode and DiagramLink instances are created from clipboard contents.
  • VirtualScroll mode fixed for parent div size specified in percent units.
  • Removed several global variables created inadvertently by the control.

A trial version is available for download here:

Download MindFusion Diagram Library for JavaScript, V2.6

About Diagramming for JavaScript Library: Written 100% in JavaScript, this tool is a dynamic, browser based visualization library that uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and allows you to integrate interactive diagrams for JavaScript and HTML into any web application. This MindFusion graphing library 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 library boasts an elegant API, which is documented in details, numerous step-by-step guides and tutorials. The Diagramming API also provides TypeScript definitions. Various samples are provided to let you learn quickly how to use the most important features of the library – check them here. The JavaScript diagram builder 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.