Custom items in WPF Calendar

Posted on by

Expanding on the previous post we will now modify the appearance of the calendar items through the use of a custom item presenter. To define the new presenter, simply create a new Style resource with TargetType set to ItemPresenter and place this Style somewhere in the resource look-up path – for example in the application’s or the window’s resource dictionaries. The Style must contain a setter for the Template property that defines the appearance of the item:

<style targettype="{x:Type planner:ItemPresenter}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type planner:ItemPresenter}">
        <Grid>
        ...
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</style>

In this particular case the presenter represents a grid with two rows. The top row contains an icon and the header text of the item. The bottom row contains the description text. Note, that the TextBlock displaying the header text of the item has a name – HeaderBlock. The element with this name defines the position of the TextBox when the item is in-place edited.

Various appearance properties are also customized – such as FontFamily, Background and BorderBrush, by assigning new values to the respective properties of the Calendar.ItemSettings.CalendarStyle object:

calendar.ItemSettings.CalendarStyle.FontFamily = new FontFamily("Segoe UI");
calendar.ItemSettings.CalendarStyle.Background = Brushes.White;
calendar.ItemSettings.CalendarStyle.BorderBrush = Brushes.SlateGray;

Finally, the size of the calendar lanes is increased to accommodate the new appearance of the items:

calendar.ResourceViewSettings.LaneSize = 54;

The final result is displayed below.

scheduling-customitems

The complete sample project is available for download here:
https://mindfusion.dev/_samples/WpfPlannerCustomItems.zip

You can get the trial version of MindFusion.Scheduling for WPF from this link:
https://mindfusion.dev/WpfPlannerTrial.zip

Enjoy!

PERT network charts in WPF

Posted on by

In this post we show how to build a PERT network chart using MindFusion.Diagramming for WPF.

First, create a new WPF project and add a mindfusion.diagramming.wpf.dll reference. Add the appropriate Xaml namespace to the window Xaml file:

xmlns:diag="http://mindfusion.dev/diagramming/wpf"

Add a ScrollViewer and Diagram to the window markup:

<scrollviewer>
	<diag:diagram x:name="diagram">
</diag:diagram></scrollviewer>

There are two conventions for drawing PERT networks: activity on arrow and activity on node. Activity on arrow shows activity information on arrows, and the nodes they connect represent project milestones. Activity on node shows activity information on nodes and the arrows between them display relationships. We will use the first convention.

Let’s define a model class to hold activity data:

public class Activity
{
	// activity name
	public string Name { get; set; }

	// start milestone name
	public string From { get; set; }

	// end milestone  name
	public string To { get; set; }

	// time in months
	public int Time { get; set; }
}

Define a simple PERT project consisting of five milestones and six activities:

var network = new[]
{
	new Activity { Name = "A", From = "10", To = "30", Time = 3 },
	new Activity { Name = "B", From = "10", To = "20", Time = 4 },
	new Activity { Name = "C", From = "20", To = "50", Time = 3 },
	new Activity { Name = "D", From = "30", To = "40", Time = 1 },
	new Activity { Name = "E", From = "30", To = "50", Time = 3 },
	new Activity { Name = "F", From = "40", To = "50", Time = 3 }
};

Create a diagram node for each milestone in the project:

// create diagram nodes for each milestone
foreach (var activity in network)
{
	if (diagram.FindNodeById(activity.From) == null)
	{
		var node = diagram.Factory.CreateShapeNode(bounds, Shapes.Ellipse);
		node.Id = node.Text = activity.From;
	}

	if (diagram.FindNodeById(activity.To) == null)
	{
		var node = diagram.Factory.CreateShapeNode(bounds, Shapes.Ellipse);
		node.Id = node.Text = activity.To;
	}
}

Create a diagram link for each activity and display the activity name and estimated time as link labels:

// create a diagram link for each activity
foreach (var activity in network)
{
	var link = diagram.Factory.CreateDiagramLink(
		diagram.FindNodeById(activity.From),
		diagram.FindNodeById(activity.To));

	var label1 = link.AddLabel(activity.Name);
	label1.RelativeTo = RelativeToLink.Segment;
	label1.Index = 0;
	label1.VerticalOffset = -20;
	label1.TextBrush = new SolidColorBrush(Colors.Red);

	var label2 = link.AddLabel(string.Format("t={0}mo", activity.Time));
	label2.RelativeTo = RelativeToLink.Segment;
	label2.Index = 0;
	label2.VerticalOffset = 10;
	label2.TextBrush = new SolidColorBrush(Colors.Blue);
}

Use automatic graph layout algorithm to arrange the PERT network chart:

// arrange the diagram from left to right
var layout = new LayeredLayout();
layout.Margins = new Size(100, 100);
layout.EnforceLinkFlow = true;
layout.Orientation = Orientation.Horizontal;
layout.Arrange(diagram);

The final result is displayed below.
PERT network chart

For more information on the PERT methodology, see this Wikipedia article:
http://en.wikipedia.org/wiki/PERT

The complete sample project is available for download here:
https://mindfusion.dev/_samples/PertNetwork.zip

All MindFusion.Diagramming libraries expose the same programming interface, so most of the sample code shown above will work with only a few modifications in Windows Forms, ASP.NET, Silverlight and Java versions of the control.

Enjoy!

Diagramming for ActiveX 4.7

Posted on by

MindFusion has released a beta version of its Diagramming for ActiveX component. Here is an overview of the new features:

Glass and Aero Effects

You can now apply Glass and Aero visual effects to nodes with the AddGlassEffect and AddAeroEffect methods, which are added to the Box, Table and Flowchart classes. You must be in the GDI+ mode to use effects.

Here is an overview of the four glass-reflection effects, which you can apply with AddGlassEffect:

The various types of glass effects.

The various types of glass effects.

The AddAeroEffect method aplies semi-transparency to nodes and emphasizes their outline by adding a shade and an inner stroke.

The aero effect.

The aero effect.

Miscellaneous

  • The new SelectionOptions.FramePadding property specifies the distance between the selected items and the selection frame.
  • SelectionOptions.ShowItemHandles property specifies whether handles for individual items are drawn in a multiple selection.
  • Arrow.Segments can be set even on self-loop arrows or when auto routing is enabled.
  • You can set custom shapes for self-loop arrows.
  • and more.

You can read further details about the new features and this release of FlowChartX at the news section of the forum. The trial version of the control is available for download from here:

Download FlowChartX 4.7 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.dev. 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.

Line Chart with DateTime Data in ASP.NET

Posted on by

In this post we demonstrate how to use MindFusion.Charting for ASP.NET component to create a line chart that shows the number of unique visitors to a store/website in a period of 6 weeks.

Data

The data for the X-axis are DateTime values. We create an array with the DateTime values that we’ll use and add it to the XData property of our chart. Before that we have to delete the predefined array that is added when the control is dropped at the form:

DateTime dt1 = new DateTime(2013, 6, 14);
DateTime dt2 = new DateTime(2013, 6, 7);
DateTime dt3 = new DateTime(2013, 5, 31);
DateTime dt4 = new DateTime(2013, 5, 24);
DateTime dt5 = new DateTime(2013, 5, 17);
DateTime dt6 = new DateTime(2013, 5, 10);

ArrayList data = new ArrayList() { dt1, dt2, dt3, dt4, dt5, dt6 };
LineChart1.XData.Clear();
LineChart1.XData.Add(data);

Next, we must make some adjustments in the settings for the X-axis to tell the control that DateTime data is used. We set the DataFormat property to DateTime and we specify the time range for the axis. This is how we do this:

LineChart1.XAxisSettings.DataFormat = MindFusion.Charting.DataFormat.DateTime;

LineChart1.XAxisSettings.StartDateTime = new DateTime(2013, 5, 3);
LineChart1.XAxisSettings.EndDateTime = new DateTime(2013, 6, 20);
//set the interval to one week - 7 days
LineChart1.XAxisSettings.TimeSpan = new TimeSpan(7, 0, 0, 0);

The data for the Y-axis are numbers. We can set them through the property grid or set them in code.

LineChart1.YData.Clear();
ArrayList data1 = new ArrayList() { 56, 13, 45, 17, 82, 22 };
LineChart1.YData.Add(data1);

The X-axis

First, we must change the LabelType property of XAxisSettings from “ChartData”, which is the default to “AutoScale”. This will make the axis show the time range we’ve set in code above. Then, we change how the DateTime values will be formatted. The Default DateTimeFormat shows the full time and date and is not suitable. We change it to “LongDate”, which does not draw any time.

XAxisSettings-DateTimeFormat="LongDate" 
XAxisSettings-DrawTicksUniformly="False" XAxisSettings-DrawZero="True" 
XAxisSettings-LabelBrush="s:#FF696969" XAxisSettings-LabelOffset="10" 
XAxisSettings-LabelType="AutoScale" XAxisSettings-TitleLabel="Week" 
XAxisSettings-TitleLabelBrush="s:#FF696969" XAxisSettings-TitleLabelOffset="10"

We type “Week” as TitleLabel for the axis and set the DrawZero property to true to show the first label, which is otherwise omitted.

Upon preview we notice that the labels are too close to the axis, that’s why we use LabelOffset and TitleLabelOffset to add some space before them. Finally, we change the color of the labels, to make them dark gray rather than black.

The Y-axis

Customizing the Y-axis is rather simple. We change the interval with AxisDelta to 5 and increase the MaxValue to 100. We don’t need decimal fractions for the labels, that’s why we change the NumberFormat. We add a TitleLabel and change its orientation with TitleLabelOrientation. Finally we use LabelBrush and TitleLabelBrush to change the colors of the labels – we use the same brushes as for the X-axis.

YAxisSettings-AxisDelta="5" 
YAxisSettings-LabelBrush="s:#FF696969" 
YAxisSettings-MaxValue="100" YAxisSettings-NumberFormat="Fixed_point_0Digits" 
YAxisSettings-TitleLabel="Unique Visitors" 
YAxisSettings-TitleLabelBrush="s:#FF696969" 
YAxisSettings-TitleLabelOrientation="BottomToTop"

The Grid

Initially the chart shows no grid – but we want to show a grid. That’s why we change GridType to “Crossed” and set a GridPen. The dark gray background of the plot area together with its outlining are set with PlotAreaOutlinePen and PlotAreaBrush.

GridPen="n:0/#FFE1E1E1/0/0/0//0/0/10/" GridType="Crossed" PlotAreaBrush="s:#FFC0C0C0" 
PlotAreaOutlinePen="n:0/#FF787878/0/0/0//0/0/10/"

This is the code that was generated by the designer because we set the properties through the property grid. If we set them with code, it will be:

LineChart1.GridPen = new MindFusion.Drawing.Pen(Color.FromArgb(225,225,225));
LineChart1.GridType = MindFusion.Charting.GridType.Crossed;
LineChart1.PlotAreaBrush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(192, 192, 192));
LineChart1.PlotAreaOutlinePen = new MindFusion.Drawing.Pen(Color.FromArgb(120, 120, 120));


The Line Series

We want scatters at data points and we want to show labels above those scatters. The LabelType property lets us set the type to be both line and scatters:

LineChart1.LineType = MindFusion.Charting.LineTypes.Line | MindFusion.Charting.LineTypes.Scatter;

This is the default type, so you don’t need to set it if you have not changed it before. We use ShapeBrushes, ShapePens and ShapeSizes to set the brushes and size of the scatters. We can do this in the property grid or in code. Finally, we want to show labels above scatters. We use LabelType and LabelFormat to set what kind of labels are drawn and since our labels are numbers – how they are formatted.

LabelBorder="RoundedRect" LabelBorderBackground="s:#FFFFFFE0" LabelBorderOutline="n:0/#FF787878/0/0/0//0/0/10/" LabelFormat="Fixed_point_0Digits" LabelType="Data"

In code you write:

LineChart1.LabelBorder = MindFusion.Charting.Border.RoundedRect;
LineChart1.LabelBorderBackground = new MindFusion.Drawing.SolidBrush(Color.FromArgb(255, 255, 224));
LineChart1.LabelBorderOutline = new MindFusion.Drawing.Pen(Color.FromArgb(120, 120,120));
LineChart1.LabelFormat = MindFusion.Charting.NumberFormat.Fixed_point_0Digits;
LineChart1.LabelType = MindFusion.Charting.LabelType.Data;

Here is the final chart:

Line chart with DateTime values in ASP.NET

Line chart with DateTime values in ASP.NET

You can download the sample from this link:

Download Line Chart for ASP.NET Sample

The trial version of the component is available from here:

MindFusion.Charting for ASP.NET Trial Version Download

Charting for Silverlight 1.2

Posted on by

We have released Charting for Silverlight 1.2 with the following new features:

Styles and Themes

The appearance of each chart element – axis, legend, series – is defined by a style. Each ChartTheme is a collection of styles. Charting for Silverlight 1.2 lets you:

  • 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.

You can read detailed instructions on how to save, load and edit themes in the “Working with Themes” tutorial.

The green theme applied at a bar chart in Silverlight.

The green theme applied at a bar chart in Silverlight.

Better Design Time Support

Charting for Silverlight lets you now edit all collection properties – like series, legends and brushes – in the property grid. In addition we have added converters that let you edit label and data collection in XAML.

Axis Intervals

The new AxisSettings.IntervalCount property lets you specify the count of intervals at the numeric axis. When IntervalCount is set, the Interval property is not considered and the axis is calculated 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

There are a number of changes in the control’s API mainly the type of some properties that were collections is changed to accommodate the new design-time features. Check the “What’s New in This Release” section in the control’s documentation for further details.

You can find out more about the new release at the news page in the Charting for Silverlight section on our forum. The trial version is available for download from here:

Charting for Silverlight 1.2 Trial Version Download

You are welcome to contact us with any questions, problems or inquiries about the control or any other of our products. You can use the discussion board, the help desk or the contact form. MindFusion has always put special emphasis on providing excellent customer support and we usually answer your questions within hours of receiving them.

About MindFusion.Charting for Silverlight: A programming component that combines powerful charting capabilities with a simple API and easy use. Among the features of the control are fully customizable grid, multiple legends, positive and negative values on all chart axes, second X and second Y axis, gauges and many more – read them here.

The control provides detailed documentation and many different samples that show how to customize it. It supports all major chart types – bar, line, radar and pie, as well different modifications of them – column, doughnut, polar, area charts etc. Licenses are counted per user, distribution is royalty free. Each license guarantees full technical support. The source code is also available.