Tag Archives: winforms

Scatter Line Chart in WinForms with a Custom Legend

Posted on by

In this post we show you how to build a multi-series scatter chart with a legend and a separator. We use MindFusion.Charting tool for WinForms.

The Data

The properties that specify data in the control are XData and YData. We add three series to each one for the three series that we want to show. Before that, we clear the arrays, to make sure no previously added data shows on the chart:

 lineChart1.XData.Clear();
 lineChart1.XData.Add(new List{3,4,5,6,7,8,9});
 lineChart1.XData.Add(new List{1,2,3,4,5,6,7,8});
 lineChart1.XData.Add(new List{1,2,3,4,5,6,7,8,9,10});

 lineChart1.YData.Clear();
 lineChart1.YData.Add(new List{92, 112, 241, 195, 201, 188, 212});
 lineChart1.YData.Add(new List{512, 480, 321, 491, 460, 320, 298, 241});
 lineChart1.YData.Add(new List { 340, 302, 322, 401, 487, 503, 421, 460, 513, 490 });

Chart Series

We want to show line series with scatters – since this is the default LineType, we don’t have to set anything. In order to customize our series, we add new pens to the ChartPens property. The colors of the scatters are customized with ShapePens and ShapeBrushes. We make the chart pens a bit thicker – 3 pixels.

 lineChart1.ShapeBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.FromArgb(175, 251, 175)));
 lineChart1.ShapeBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.FromArgb(176, 224, 230)));
 lineChart1.ShapeBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.FromArgb(216, 191, 216)));

 lineChart1.ChartPens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(144,238,144), 3.0f));
 lineChart1.ChartPens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(70, 130, 180), 3.0f));
 lineChart1.ChartPens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(186, 85, 211), 3.0f));

 lineChart1.ShapePens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(144, 238, 144)));
 lineChart1.ShapePens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(70, 130, 180)));
 lineChart1.ShapePens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(186, 85, 211)));

Separator Line

We would like to show a separator line that indicates the average value from all chart data. We add a SummaryValue to the SummaryValues collection. Then we customize the summary line by specifying its pen, scatter type and scatter size. We also set the pen and the brush for the scatters. Here is how we do it:

  lineChart1.SummaryPens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(255,69,0), 4.0f);
  lineChart1.SummaryShapeBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.FromArgb(255,228,225))); 
  lineChart1.SummaryShapePens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(255,69,0));
  lineChart1.SummaryShapes.Add(MindFusion.Charting.Shape.Rhombus);
  lineChart1.SummaryShapeSizes.Add(15.0);
  lineChart1.SummaryValues.Add(MindFusion.Charting.Summary.Average);

Axes Labels

We want to show custom text at the X-axis, so we set XAxisSettings.LabelType to AxisLabelType.CustomText. We use the XLabels property to add the labels. We also add a title with the XAxisSettings.TitleLabel property.

For the Y-axis we want to show the auto scale – we set it with YAxisSettings.MaxValue, YAxisSettings.MinValue and YAxisSettings.AxisDelta. We show ticks on both axes with the MajorTickLength property.

 lineChart1.YAxisSettings.AxisDelta = 50;
 lineChart1.YAxisSettings.MajorTickLength = 2F;
 lineChart1.YAxisSettings.MaxValue = 600;
 lineChart1.YAxisSettings.MinValue = 0;

 lineChart1.XAxisSettings.AxisDelta = 1;
 lineChart1.XAxisSettings.LabelType = MindFusion.Charting.AxisLabelType.CustomText;
 lineChart1.XAxisSettings.MajorTickLength = 5F;
 lineChart1.XAxisSettings.MaxValue = 11;
 lineChart1.XAxisSettings.MinValue = 0;
 lineChart1.XAxisSettings.TitleLabel = "Year";

The Legend

The labels for the legend are set with the LegendLabels property. The colors are picked automatically from the ChartPens property for each series. We place the legend at the bottom with LegendPosition and increase its offset with LegendOffset. We want the legend in one row, so we set LegendColumns to the count of the labels – 3.

 lineChart1.LegendColumns = 3;
 lineChart1.LegendLabels = new List{"Europe, Asia, North America"};
 lineChart1.LegendOffset = 30f;
 lineChart1.LegendPosition = MindFusion.Charting.Position.Bottom;

Here is a screenshot from the final chart:

Scatter Chart with a Custom Legend

Scatter Chart with a Custom Legend

You can download the sample from this link:

Download Scatter Chart with a Custom Legend Sample

The trial version of MindFusion.Chart for WinForms boasts many different samples, great charting tips and step by step tutorials. You can download it directly from here:

Download MindFusion.Charting for WinForms 3.5 Trial Version

About MindFusion.Charting for WinForms: a professional programming component for WinForms, which lets you create remarkable charts fast and easy. The tool supports all major chart types – line, pie, radar and bar – and numerous variations of them – column, area, bubble, polar, doughnut etc. 3D charts are supported as well.

Charting for WinForms supports a rich user interaction model with features like zoom, hit testing, drill down, mouse dragging and more. You can use delegates to present mathematical functions, undefined values are also acceptable. Values can be data arrays or retrieved through a database.

The appearance of each chart is fully customizable. The control offers strong design-time support with custom collection editors and chart wizards. At your disposal is a set of predefined appearance themes and a theme editor tool. A full list of the features can be read here.

Diagramming for WinForms 6.0.4

Posted on by

MindFusion has released a new version of its popular diagramming component for WinForms. Most of the new features are requested by the users – here is a list:

Import of OpenOffice Draw Files

The new DrawImporter class can import *.odg files, created by the OpenOffice Draw vector graphics editor. The importer requires a reference to the MindFusion.Diagramming.Import.Draw.dll assembly. The DrawImporter supports shapes from the General and Flowchart shape palettes in Draw. At your disposal are a variety of Import method overloads that can be used to import the OpenOffice drawing into a DiagramDocument whose pages correspond to the Draw pages, or into a single Diagram whose content is merged from all imported pages.

Import from OpenOffice Draw files is now supported.

Import from OpenOffice Draw files is now supported.

Miscellaneous

Rotation of a node.

Rotation of a node.

A trial version of the component is available from this link:

Diagramming for WinForms 6.0.4

If you have questions or run into problems using the component you can use the Diagramming for WinForms forum, the help desk or write us at support@mindfusion.eu. Our support team will be pleased to help you.

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

Charting for WinForms 3.5

Posted on by

MindFusion has released a new version of its charting component for WinForms. Here is an overview of the new features:

Mouse Dragging in Pies
You can click on the border between any two pieces in a pie chart and drag it to change the values of those pieces. The sum of the values for the two pieces stays the same.

Support for Undefined Values
If your data contains null, double.NaN or other data that is not defined you have three ways to handle it – ignore it, replace it with 0 or with the average of the two neighbouring values. Use the HandleEmptyValue property to choose how undefined values are handled.

ToolTips
All chart types support tool tips. Area charts can show a different tooltip for the region between each two values.

Tool tips in a 3D cylinder chart.

Tool tips in a 3D cylinder chart.

Themes
Chart themes are represented by XML files that can be saved and loaded with the SaveTheme and LoadTheme methods. At your disposal is a special theme editor tool that helps you create, edit and save themes fast and easy.

Major and Minor Axis Ticks
Axis ticks are drawn more precisely now – you can draw major and minor ticks. The count of minor ticks is customizable. You can set the pen and length of both ticks. Ticks are supported for all chart axes.

Miscellaneous
Hit testing has been greatly improved. All chart types support the DataIndex and SeriesIndex properties, which let you know the exact location of the hittMindFusion has released a new version of its charting component for WinForms. Here is an overview of the new features:

Mouse Dragging in Pies
You can click on the border between any two pieces in a pie chart and drag it to change the values of those pieces. The sum of the two piece values stays the same.

Support for Undefined Values
If your data contains null, double.NaN or other data that is not defined you have three ways to handle it – ignore it, replace it with 0 or with the average of the two neighbouring values. Use the HandleEmptyValue property to choose how undefined values are handled.

ToolTips
All chart types support tool tips. Area charts can show a different tooltip for the region between each two values.

Themes
Chart themes are represented by XML files that can be saved and loaded with the SaveTheme and LoadTheme methods. At your disposal is a special theme editor tool that helps you create, edit and save themes fast and easy.

Major and Minor Axis Ticks
Axis ticks are drawn more precisely now – you can draw major and minor ticks. The count of minor ticks is customizable. You can set the pen and length of both ticks. Ticks are supported for all chart axes.

Major and minor axis ticks in a scatter chart.

Major and minor axis ticks in a scatter chart.

Miscellaneous
Hit testing has been greatly improved. All chart types support the DataIndex and SeriesIndex properties, which let you know the exact location of the hi value in the arrays with data values for the chart. There are also other new and improved features regarding the hit testing of a chart.

Some changes were necessary to keep the API simple and elegant – we have renamed several existing properties – please check the documentation.

Read more about the new features at the Charting for WinForms forum.

The trial version is available for direct download from this link:

Download MindFusion.Charting for WinForms 3.5

Technical support is available at the forum, help desk or at e-mail support@mindfusion.eu. All inquiries are answered within hours of being received.

About MindFusion.Charting for WinForms: a professional programming component for WinForms, which lets you create remarkable charts fast and easy. The tool supports all major chart types – line, pie, radar and bar – and numerous variations of them – column, area, bubble, polar, doughnut etc. 3D charts are supported as well.

Charting for WinForms supports a rich user interaction model with features like zoom, hit testing, drill down, mouse dragging and more. You can use delegates to present mathematical functions, undefined values are also acceptable. Values can be data arrays or retrieved through a database.

The appearance of each chart is fully customizable. The control offers strong design-time support with custom collection editors and chart wizards. At your disposal is a set of predefined appearance themes and a theme editor tool. A full list of the features can be read here.

Line Chart with a Separator in WinForms

Posted on by

In today’s post we’ll show how to build a line chart with several line series and a separator line. The separator line is drawn at a given height and divides the chart into two halves.

The Line Series

The line series are three, so we must add three lists with data to the XData and YData properties. We can do this in three ways: type the values in design time, write them in code or use data binding. In design time we use the built-in collection editors of the control:

The Series collection editor

The Series collection editor

In code we make lists with the data and add them to XData or YData:

lineChart1.YData.Clear();
lineChart1.YData.Add(new List { 45, 64, 38.2, 33.03, 56, 68, 39, 42 });
lineChart1.YData.Add(new List { 34, 42, 28, 42, 35, 31, 62, 55 });
lineChart1.YData.Add(new List { 22, 19, 32, 28, 17, 25, 31, 36 });

If you want to use data binding then set DataSource to the name of the data source, DataMember to specify the name of the table which will supply the data and XDataFields/YDataFields to provide the name(s) of the fields. In this case we will require three data base columns for each of the three series – separate the names with a comma e.g.

lineChart1.YDataFields = "Sales1,Sales2,Sales3";

For XData we use the same list because we want the series to appear exactly under each other:

lineChart1.XData.Clear();
lineChart1.XData.Add(new List { 10, 20, 30, 40, 50, 60, 70, 80 });
lineChart1.XData.Add(new List { 10, 20, 30, 40, 50, 60, 70, 80 });
lineChart1.XData.Add(new List { 10, 20, 30, 40, 50, 60, 70, 80 });

The Series

We set LineType to Line and Scatter because we want to show scatters at data points:

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

The LineTypes enumeration allows bit wise combining of its members. We use ChartPens to set the pens for the line series. ShapesPens and ShapeBrushes set the pens for the outline and the brushes for filling the scatters:

lineChart1.ChartPens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(102, 205, 170), 6));
lineChart1.ShapePens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(102, 205, 170), 2));

The pens for the series are thicker than the pens for the scatters. The fill brush is slightly lighter:

lineChart1.ShapeBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.FromArgb(175, 251, 175)));

Finally – we set the size of the shapes and their type:

lineChart1.Shapes.Add(MindFusion.Charting.Shape.Circle);
lineChart1.ShapeSizes.Add(10);

The Separator

There are two ways to draw the separator line.

The first is to add a custom summary value. In this case the separator line will be drawn from the
smallest X-data value to the biggest one, parallel to the axes.

lineChart1.AddCustomSummary(40.0, "");

The summary line is drawn with shapes at both ends, but we can hide them by setting their size to 0:

lineChart1.SummaryBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.Gray));
lineChart1.SummaryShapeSizes.Add(0);

The second way to draw the separator line is to add it as a 4th series in the XData and YData lists and add a pen for it in the ChartPens list. The advantage is that we can make the line as long as we want, in our case – as long as the length of the X-axis:

lineChart1.XData.Add(new List { 0, 90 });

The Legend

We use LegendLabels to add the labels for the line series:

lineChart1.LegendLabels = new List() { "2010", "2011", "2012" };

We set the background of the legend, but we don’t have to add any brushes or shapes for the legend items – they are taken automatically from the line series settings:

lineChart1.LegendBackgroundBrush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(253, 253,  
253));


The Grid

The GridType is GridType.HorScale. We use GridBrush, AltGridBrush and GridPen to set the colors for the grid.

lineChart1.GridPen = new MindFusion.Drawing.Pen(Color.FromArgb(200, 200, 200));
lineChart1.GridPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
lineChart1.GridType = MindFusion.Charting.GridType.HorScale;

If you make the changes to the chart in code, don’t forget to call UpdateChart() to make sure the
control knows changes have happened and the chart must be updated.

Here is the final chart:

A line chart with a separator line.

A line chart with a separator line.

The sample is available for download from here:

Download Line Chart with Separator Line Sample

You can download the trial version of the component with extensive documentation and many other samples from here:

Download MindFusion.Charting for WinForms Trial Version

Diagramming for WinForms V.6.0.3

Posted on by

MindFusion has just released a new version of its popular Diagramming component for WinForms. The new features are mostly requested by the users. Here is a list:

ContainerNode Improvements

  • Each container now draws its child nodes. When containers overlap, the children of the lower container can’t appear above the children of the upper container any more.
  • The ClipChildren property indicates whether to clip child items to container’s boundaries
  • The ZIndex property no longer changes automatically when dropping nodes into a container
  • and more
Container nodes

Container nodes

PdfExporter Improvements

  • Clip regions are handled better in custom drawing code
  • PDF shadings now include all colors from a ColorBlend
  • More precise character width when text includes both eastern glyphs and Latin characters.
  • and more.

New events

  • The SetSelfLoopShape event is raised when a link becomes a self-loop, giving you a chance to set a custom shape for the link.
  • The QueryAlignTarget event is raised to determine if a node should be used as alignment guide target when AutoAlignNodes is enabled.
Differently formatted text.

Differently formatted text.

As well other new properties, methods and features – you can read the full list here.

A trial version of the component is available from this link:

Diagramming for WinForms 6.0.3

If you have questions or run into problems using the component you can use the Diagramming for WinForms forum, the help desk or write us at support@mindfusion.eu. Our support team will be pleased to help you.

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