MindFusion.Pack for WPF 2013.R1

Posted on by

We have just has released MindFusion.Pack for WPF 2013.R1. There are new features in most of the components in the pack. Here are the details:

Support for VisualStudio 2012

The pack installer creates VS2012 toolbox palette for all the components and can optionally install VS2012 sample projects. Toolbox palettes are also created for all .NET target environments supported by the respective Visual Studio versions.

chartMindFusion.Charting

Style and Themes

Styles define the appearance of a given chart element – the axis, the series, the legend. Each ChartTheme is a collection of styles. You can:

• create themes based on the appearance of an existing chart
• create themes with the ThemeEditor tool
• save themes to XML files
• load themes from XML files
• use a number of predefined themes

The green theme

The green theme

Improved Design Time Support

You can now edit all collection properties, including the Series collection, the brushes, strokes, legends and all other collections in design time through the property grid.

Axis Intervals

The new AxisSettings.IntervalCount property lets you specify the exact number of intervals at the axis. In such case the control does not use the Interval property and calculates the value of each interval based on AxisSettings.Min, AxisSettings.Max and AxisSettings.IntervalCount.

A bar chart with two Y-axes.

A bar chart with two Y-axes.

API Changes

diagram16x16MindFusion.Diagramming

Preserve order in tree layout

You can set now the Balance property of the TreeLayout to Preserve if you want to keep the original geometric order of child nodes when arranging them under their parent. This can be used to arrange tree branches in a specific order by first positioning them in increasing horizontal or vertical positions.

The tree layout.

The tree layout.

Selection improvements

  • Set Behavior to SelectOnly to let users select existing items, but not modify them or draw new ones.
  • Use the SetsDirtyFlag property of the Selection class to specify whether the Dirty flag should be set when selection changes.
  • The SelectionStartMoving event is now raised when the user begins moving multiple selected items.
  • Use the ToggleSelection modifier key to select or deselect items by clicking. The key disables selection via lasso rectangle.

Miscellaneous

Container nodes

Container nodes

Report-16x16MindFusion.Reporting

Exporting

You can now use the new PdfExporter and MhtmlExporter, which enable exporting to the PDF and MHTML formats respectively. You can find detailed information about the new exporters in the “Exporting Reports” theme.

Side-By-Side Containers

You can arrange items parallelly by putting them inside the new SideBySideContainer report item. You can use it, for example, to display two (or more) data ranges one next to the other.

A classic report.

A classic report.

Miscellaneous

• New DefaultEncoding property in PdfExporter;
• New Median aggregate function;

Calendar-16x16MindFusion.Scheduling

Improved item presenter

The ItemPresenter class gives you the start and end time of the represented item fragment through the new
StartTime and EndTime properties. In addition, derived classes can override the new OnStartTimeChanged,
OnEndTimeChanged, and OnItemPropertyChanged methods to get notified when the StartTime or EndTime properties change or when any property of the underlying item changes.

Item recurrence

Item recurrence

Improved recurrence

You can validate and customize the occurrences of a recurrence pattern with the new ValidateOccurrence event of the Recurrence class.

You can find more about the new features of the components at the forum. Here is a link to download the trial version:

Download MindFusion.Pack for WPF 2013.R1

About MindFusion.Wpf Pack: A set of advanced WPF components that help you build your business application easy and on time. The tools provide you with a complete set of features to create, edit and render complex flowcharts, charts, diagrams, calendars, schedules, maps and reports. A set of gauges and UI elements is also included. Each component offers various samples, tutorials and detailed documentation. The controls offer simple and intuitive API, completely customizable appearance, numerous input/output options and a rich event set. Each tool has been thoroughly tested to guarantee that you and your application get the high quality and performance you deserve.

You can read more about the capabilities of each component at its features page:

Prices and licenses are explained in details at the buy page. We offer permanent discounts to certain types of commercial as well non commercial organizations – check here if you qualify.

Diagramming for JavaScript 1.6

Posted on by

MindFusion has released a new version of its diagramming library for JavaScript. Here is an overview of
the most important new features in the control:

Node Effects

You can now apply two visual effects to your nodes – the GlassEffect and AeroEffect. In order to apply
an effect, create an instance of the respective class, set its properties and add the instance to the
Effects collection. You can add, remove or modify effects at any time and this will immediately affect the appearance of the diagram. You can apply effects of different types simultaneously.

Visual effects applied on diagram nodes.

Visual effects applied on diagram nodes.

Multiple labels per link

The new LinkLabel class lets you display multiple captions for a single DiagramLink object. You can fully
customize the display and positioning of the link labels. The new LinkLabel.AutoArrange property lets you arrange automatically the labels to avoid overlapping.

Selection of multiple items.

Selection of multiple items.

New events

Miscellaneous

  • The new setVirtualScroll method enables the virtual scrolling mode. In this mode, the canvas stays as big as its containing div, and its content is drawn with a translation bound to the div’s scrollbar positions. This allows displaying large diagrams in browsers and on mobile devices where the size of the HTML canvas elements is limited.
  • resizeToFitText method is added to ShapeNode.
  • Improved support for nested containers.

You can find out more about the new release at the Diagramming News section on our forum. You are welcomed to download the trial version and check yourself the capabilities of the control. Use the link below:

Download MindFusion.Diagramming for JavaScript Library 1.6

We have always taken special effort in providing quality technical support to all our clients and evaluators. 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 features page.

Drill Down Chart in WPF

Posted on by

In this post we discuss how to create a drill down chart with the MindFusion.Charting for WPF tool. Our main chart will be a pie chart, where each peace shows some aggregate data. When clicked, a new chart pops up – a bar chart, which shows details about the clicked piece.

The Data

For the data we use an ObservableCollection called CompanyExpenses. It contains objects of type Expenses. The Expenses class implements INotifyPropertyChanged. Here is a code snippet:

public class Expenses : INotifyPropertyChanged
    {
  public Expenses(string corporationName, double marketing, double salaries, 
            double rawMaterials, double logistics, double administration, double production)
        {
            this.corporationName = corporationName;
            this.marketing = marketing;
            this.salaries = salaries;
            this.rawMaterials = rawMaterials;
            this.logistics = logistics;
            this.administration = administration;
            this.production = production;
          
}

.............
}

We have properties for the various company expenses and a property for the name of the corporation. We have a special Sum property, which gives us the total of all expenses for the corporation. This property will be used by the main chart – the pie chart:

public double Sum
        {
            get { return sum; }
            set
            {
                sum = value;
                OnPropertyChanged("Sum");
            }
        }

The Pie Chart

The pie chart displays the expenses of all 5 corporations – together with their name and their share. We use data binding, the ComapnyExpenses list provides the DataSource:

CompanyExpenses data = new CompanyExpenses();
 pieChart1.DataSource = data;

In order to show the name of the company as an outer label, we must set the OuterLabelType to CustomText and bind Expenses.CorporationName to the OuterLabelPath property. We do this in XAML:

my:PieSeries OuterLabelOffset="30" OuterLabelPath="CorporationName" OuterLabelType="CustomText" DataPath="Sum" InnerLabelType="Percents" Name="pieSeries1" DetachedPiecesList="20"

The Sum property, which we mentioned above, provides data for the chart. The brushes are set with the brush editor in the property grid.

Hit Testing

We use the charting component’s HitTest method to detect when a piece was clicked and to show a bar chart with the respective data. PiePiece.PieceIndex gives us the index of the clicked piece. We use the Control.MouseDown event to detect mouse clicks.

private void pieChart1_MouseDown(object sender, MouseButtonEventArgs e)
        {
            List result = 
                pieChart1.HitTest(e.GetPosition(pieChart1));

            if (result.Count > 0 && result[0] is MindFusion.Charting.Wpf.PiePiece)
            {
                MindFusion.Charting.Wpf.PiePiece piece = 
                    result[0] as MindFusion.Charting.Wpf.PiePiece;

                Details d = new Details(data[piece.PieceIndex]);
                d.Show();
            }
        }

The HitTest method returns a collection of ChartElement objects. In our case we don’t have several ChartElements that overlap each other and might be clicked simultaneously, that’s why we take the first ChartElement.

The Detailed Chart

The detailed chart is a bar chart that displays the data for a single Expenses object. We set the labels at the X-axis to display the type of the expense:

barChart1.XAxisSettings.LabelType = MindFusion.Charting.Wpf.LabelType.CustomText;
            barChart1.XLabels = new List() { "Marketing", "Salaries", "Raw Materials", "Logistics", "Administration", "Production"};
            barChart1.XAxisSettings.LabelRotationAngle = 30;
            barChart1.XAxisSettings.CustomLabelPosition = MindFusion.Charting.Wpf.CustomLabelPosition.ChartDataPoints;

When we create the Details window, we pass as argument the Expenses object the chart refers to:

public Details( Expenses expenses)
{
barSeries1.YData = expenses.ExpensesList;
…
}

The data for the bar chart comes from the list of the expenses, which is a DoubleCollection.

Here is a screenshot of the final drill down chart:

The main pie chart with the bar chart that shows details for the clicked pie piece.

The main pie chart with the bar chart that shows details for the clicked pie piece.

You can download the complete source code for the project from this link:

Download MindFusion.Charting Drill Down Sample

Diagramming for WPF 3.0.1

Posted on by

MindFusion has released a new version of its Diagramming component for Wpf. Most of the new features are requested by customers. Here are details:

Preserve order in tree layout
You can set the Balance property of the TreeLayout to Preserve to keep the original geometric order of child nodes when arranging them under their parent. You can use this to arrange tree branches in a specific order by first positioning them in increasing horizontal or vertical positions.

The tree layout.

The tree layout.

Selection improvements

  • When you set the Behavior property to SelectOnly users can select existing items, but not modify them or draw new ones.
  • Use the SetsDirtyFlag property of the Selection class to specify whether the Dirty flag should be set when selection changes.
  • SelectionStartMoving event is raised when the user begins moving multiple selected items.
  • You can use the ToggleSelection modifier key to select or deselect items by clicking, but selection via lasso rectangle is disabled.
Container nodes

Container nodes

Miscellaneous

You can find details about this release at the news page in the MindFusion forum. A trial version is available for immediate download from the following link:

Download MindFusion.Diagramming for WPF 3.0.1

The download contains all runtime libraries of the control, various samples for different .NET versions, extensive desktop documentation and step-by-step tutorials.

If you face difficulties installing or using Diagramming for Wpf, please contact MindFusion support team per e-mail or phone. You can also use the forum or help desk. All support inquiries are answered within hours of receiving them.

About MindFusion.Diagramming for Wpf: Designed and developed to be easy to integrate, use, and customize, this native WPF component places at your disposal every single feature you’d ever need to create flowcharts, diagrams, graphs, schemes, DB relationships, trees and many more. Its long list of style options gives you complete control over the appearance of the diagram. With a set of eight automatic layouts you are sure to choose the best arrangement for your items and make the diagram easy to comprehend.

The control boasts a long list of events, properties and methods for user interaction, item creation, data input and output. You can read the full features list here. The online demo shows samples that demonstrate various capabilities of the control – click here. The licensing scheme and prices are uploaded at the buy page. Source code is also available.

Custom colors in maps

Posted on by

In a series of blog posts, we will explore various usage scenarios for MindFusion software components, based mostly on technical support questions we are frequently asked. Today’s post shows how to assign colors to map regions, depending on the value of a field in the map’s associated DBF database. This particular example assigns darker shades of red to countries with larger populations.

Let’s load an ESRI map file and its database into the map view’s BaseMap property, which provides a shortcut for setting a map in the first layer of the view:

// load the map file and dbf database
var map = mapView.BaseMap = Map.FromFile(
	"ne_50m_admin_0_countries.shp", true, "NAME");
var db = map.Database;
var layer = mapView.Layers[0];

Next, create an array of population threshold values, which will correspond to different values in the layer’s color palette:

// specify threshold values that trigger more saturated colors
var m = 1000000;
var populationThreshold = new[]
{
	0, 1*m, 5*m, 10*m, 50*m, 100*m, 1000*m
};

int numColors = populationThreshold.Length;

Define the map colors as shades of red:

// set the layer palette with a color for each threshold value
layer.FillColors = new Color[numColors];
layer.FillColors[0] = Color.WhiteSmoke;
for (int i = 1; i < numColors; i++)
{
	layer.FillColors[i] = Color.FromArgb(
		255,
		255 - 255 / (numColors - i),
		255 - 255 / (numColors - i));
}

Iterate over the database records, find their corresponding shape from the ESRI .shp file, and read the population field:

// for each database record, read population field and set color
for (int i = 0; i < db.Rows.Count; i++)
{
	var countryShape = map.Shapes[i];
	var population = float.Parse(db.Rows[i]["POP_EST"]);
	…
}

Finally, determine the shape’s color from the maximal threshold value smaller than the country’s population:

	for (int c = numColors - 1; c >= 0; c--)
	{
		if (population > populationThreshold[c])
		{
			countryShape.Color = c;
			break;
		}
	}

The resulting custom-colored map is shown in this screenshot:

Colored map
Labels for countries are displayed dynamically e.g. they are hidden if space is not enough. In the sample pictured above you will see all labels if you zoom in the map.

A VS2008 solution that includes the full source code and map files can be downloaded here:
https://mindfusion.eu/_samples/ColorCoding.zip

Enjoy!