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.

Formula shapes with adjustable parameters in Flowchart.NET

Posted on by

In this post we’ll show how to create custom formula shapes with adjustable control points. Shape control points are a new feature in version 6.1 of the Flowchart.NET control, which is currently in beta tests. You can download a copy of the beta version from the following link.

https://mindfusion.eu/_beta/DiagWinForms61.zip

A shape formula is defined using a script, which calls one of the following functions to draw the node shape.

MoveTo (x,y) Moves the current position to the specified point without drawing.
LineTo (x,y) Draws a line from the current position to the specified point.
BezierTo (x1,y1,x2,y2,x3,y3) Draws a Bezier curve from the current position to (x3,y3) using (x1,y1) and (x2,y2) as control points.
ArcTo (x,y,largeArc,clockwiseArc,rx,ry) Draws an arc from the specified point to (x,y) where rx and ry are the ellipse radiuses and the arc flags are boolean values specifying which of the four possible arcs to draw.

For example, the following formula defines a rounded rectangle shape using lines and arcs, and expects to receive a “radius” control point parameter that will control the corner radii:

// a rounded rectangle shape, with an arc at each corner
string roundRect = @"
	r = Min(Width / 2, radius.X);
	MoveTo(r, 0);
	LineTo(Width - r, 0);
	ArcTo(Width, r, false, false, r, r);
	LineTo(Width, Height - r);
	ArcTo(Width - r, Height, false, false, r, r);
	LineTo(r, Height);
	ArcTo(0, Height - r, false, false, r, r);
	LineTo(0, r);
	ArcTo(r, 0, false, false, r, r);
 ";

When creating a Shape instance, we must add a ShapeControlPoint object to it that defines the radius parameter and its constraints. The following code specifies that the default radius is 5, the minimum and maximum values allowed are 1 and 15 respectively, and prevents the control point from moving vertically by setting minY and maxY to 0.

var myRect = new Shape(roundRect, "MyRect");

// add a control point for the 'radius' parameter
myRect.ControlPoints.Add(new ShapeControlPoint(
	"radius", 5, 1, 15, UnitType.Fixed, 0, 0, 0, UnitType.Fixed));

Here is another example that defines an anchor-like shape with two parameters controlling the tips of the anchor arms.

// an anchor shape, with two arcs outlining each anchor arm
string anchor = @"
	r = Width / 3;
	y1 = p1.Y * Height / 100;
	y2 = p2.Y * Height / 100;
	MoveTo(Width / 2, Height);
	MoveTo(Width / 2 + 3, Height - 5);
	ArcTo(Width, y2, false, true, r, r);
	ArcTo(Width / 2 + 3, Height - 10, false, false, r, r);
	LineTo(Width / 2 + 3, 0);
	LineTo(Width / 2 - 3, 0);
	LineTo(Width / 2 - 3, Height - 10);
	ArcTo(0, y1, false, false, r, r);
	ArcTo(Width / 2 - 3, Height - 5, false, true, r, r);
	LineTo(Width / 2, Height);
 ";

var myAnchor = new Shape(anchor, "MyAnchor");

// add control points at the tips of anchor arms
myAnchor.ControlPoints.Add(new ShapeControlPoint(
	"p1", 0, 0, 0, UnitType.Percentage, 55, 50, 80, UnitType.Percentage));
myAnchor.ControlPoints.Add(new ShapeControlPoint(
	"p2", 100, 100, 100, UnitType.Percentage, 55, 50, 80, UnitType.Percentage));

The following diagram contains several nodes displaying the shapes above, with some of the control points moved to different positions.

Some additional functions that you can call from shape scripts are listed below.

PI() Returns the value of PI.
Abs(x) Returns the absolute value of x.
Atn(x) Returns the angle, measured in radians, whose tangent is the specified number.
Cos(x) Returns the cosine of the specified angle.
Acos(x) Returns the angle whose cosine is the specified number.
Exp(x) Returns e raised to the specified power.
Log(x) Returns the natural (base e) logarithm of the specified value.
Pow(x,power) Returns a specified number raised to the specified power.
Sin(x) Returns the sine of the specified angle.
Asin(x) Returns the angle whose sine is the specified number.
Sqrt(x) Returns the square root of a number.
Tan(x) Returns the tangent of the specified angle.
Min(x,y) Returns the smaller of two numbers.
Max(x,y) Returns the larger of two numbers.

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

Enjoy!

MindFusion.Scheduling for Java Swing, V1.1

Posted on by

MindFusion has released a new version of its scheduling library for Java Swing. Here is an overview of the new features:

Item Effects

You can apply the new Glass and Aero visual effects to all items. If you want to apply an effect, create an instance of one of the effect classes, set up its properties and add the instance to the AwtCalendar.ItemEffects collection. You can choose between two effect types – AeroEffect and GlassEffect. You can add, remove or modify effects at any time and this will reflect immediately on the appearance of the calendar. The Item Effects topic in the library’s documentation gives detailed explanation on how to create and apply visual effects.

Item visual effects

Item visual effects

Custom Grouping

Custom grouping lets you specify secondary resources individually for each primary resource. You an do this with the new customizeGrouping event. You can also apply grouping by the runtime type of the resources, not just the four predefined categories.

Custom grouping of items

Custom grouping of items

New Events

The CalendarListener interface exposes several new events – beginItemDrawing, itemDrawing, endItemDrawing, and filterItem.

Miscellaneous

  • We have fixed a bug where styled item texts did not appear.
  • The getExactDateAt method works more consistently in various scenarios.
  • New setViewport method.

You can read more about the new version at the forum. The trial version is available for immediate download from the link below:

Download Scheduling for Java Swing Library, V1.1 Trial Version

Technical support is available at the Scheduling for Java forum, per e-mail or through the help desk. Providing timely and high-quality technical support to all its clients and evaluators is a priority for MindFusion. We make sure your questions get competent and detailed answers within hours after being posted.

About Scheduling for Java Swing: A programming class library written entirely in Java that lets you build the most sophisticated schedules, calendars and task managers fast and easy. The component boasts a comprehensive feature set that includes custom-typed events, undo/redo functionality, scrolling, tool tips and much more. You can choose among six view styles, which are easy to change and customize. The appearance of each schedule is completely customizable and supports themes, user-assigned mouse cursors and a variety of font, pen and brush options.

A detailed list with the features of the tool is available at the Scheduling for Java Swing features page. The trial version includes a variety of samples and you have plenty of sample code to study. Online documentation with useful tutorials is also available.

The library is royalty-free, source-code is also available. You can see a list of the current prices here. Check the discount page for a list of the available discounts.

ASP.NET Bar Chart with Custom Labels

Posted on by

In this blog post we will look on how to build a bar chart with multiple series, custom X-labels and inner labels using MindFusion.Charting for ASP.NET control.

1. General Appearance of the Chart

We want to show three data series and we want to show the first values of each series in a cluster, then second cluster with the second values of each series etc. In order to render the bars in this order we set the BarType property to BarType.Clustered3D. We correct the Depth3D to make the bars less thick and increase the distance between each series with DistBtwBars. We make the bars wider, setting BarWidth to 30.

    //general appearance
    BarChart1.BarType = MindFusion.Charting.BarType.Clustered3D;
    BarChart1.BarWidth = 30f;        
    BarChart1.Depth3D = 15f;
    BarChart1.DistBtwBars = 10f;

2. Grid

Our bars are vertical e.g. it is a column chart, so we would like to have a horizontal grid. We set the GridType property to GridType.HorScale and we set the AltGridBrush and GridBruh to different gray colors to give us nice alternating grid stripes. For the outlining of the whole plot area we use the PlotAreaOutlinePen.

    //grid settings
    BarChart1.GridBrush= new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(242, 239, 224));
    BarChart1.GridPen= new MindFusion.Drawing.Pen(System.Drawing.Color.FromArgb(204, 196, 185));
    BarChart1.GridType = MindFusion.Charting.GridType.HorScale;
    BarChart1.PlotAreaOutlinePen = new MindFusion.Drawing.Pen(System.Drawing.Color.FromArgb(204, 196, 185));

3. Labels Inside Bars

The labels inside bars show the data of each bar – this is done by setting the InnerLabelType property to LabelType.Data. We use a white LabelBrush to draw the labels and set their InnerLabelBorder to Border.RoundedRect. The background of the inner labels is set to gray.

    //inner labels settings
    BarChart1.InnerLabelBackground = new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(112, 128, 144));
    BarChart1.InnerLabelBorder = MindFusion.Charting.Border.RoundedRect;
    BarChart1.InnerLabelType = MindFusion.Charting.LabelType.Data; 
    BarChart1.LabelBrush = new MindFusion.Drawing.SolidBrush(System.Drawing.Color.FromArgb(255, 255, 255));

4. Title

We want not only title but also second title – or a subtitle. That’s why we use both the TitleText and SubTitleText properties. We leave no distance between them – we set SubTitleOffset to 0. But we would like the two titles to be well above the plot area, that’s why we set bigger TitleOffset.

    //title and subtitle
    BarChart1.SubTitleOffset = 30;
    BarChart1.SubTitleText = "all major continents";
    BarChart1.TitleOffset = 0;
    BarChart1.TitleText = "Sales";

5. Labels at the Axes

The X-labels are custom text – we set them with XLabels. The title of the Y-axis is rotated, so we use LabelOrientation.BottomToTop.

    //axes labels settings
    BarChart1.XAxisSettings.LabelSeriesIndex = 1;
    BarChart1.XLabels.Clear();
    BarChart1.XLabels.Add(new List(){ "Europe", "Asia", "North America", "South America"});
    
    BarChart1.YAxisSettings.TitleLabel = "in mlns. USD";
    BarChart1.YAxisSettings.TitleLabelOrientation = MindFusion.Charting.LabelOrientation.BottomToTop;

Here is a screenshot of the final chart:

ASP.NET Bar Chart with Custom Labels

ASP.NET Bar Chart with Custom Labels

The sample can be downloaded from here:

Download ASP.NET Bar Chart with Labels Sample

The trial version of MindFusion.Charting for ASP.NET can be downloaded directly from the link below. It contains many more samples and tutorials:

Download MindFusion.Charting for WebForms Trial Version

About MindFusion.Charting for WebForms: A powerful WebForms control that lets programmers add compelling charts in any ASP.NET application. With the component you can design and create any bar, column, line, area, scatter, bubble, radar, polar, doughnut and pie chart. Its elegant API includes data binding, themes, hit-testing, zoom, drill-down, wizards and many more.

The control takes advantage of the rich capabilities of Microsoft WebForms but its functionality does not bring excess complexity. The API is very easy to understand, all the features are duly documented. Numerous samples and step-by-step tutorials let you learn quickly how to tailor the tool in order to meet best your needs.

Details about the various features of the control are provided here. The online demo will give you an overview of the control’s rich capabilities. Licenses, prices and discounts are listed at the buy page.

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.