Simple Diagram
- 4 minutes to read
This topic describes the ASP.NET Chart Control’s Simple diagram type. It lists the series view types associated with this diagram type, demonstrates how its options can be accessed (both at design time and runtime), and briefly describes these options. Before reading this topic, you may wish to review the following help topic: Diagram Overview.
The topic consists of the following sections.
Associated Series View Types
A Simple diagram plots series of the Pie, Doughnut and Funnel view types. A typical Simple diagram is shown in the following image.
The Pie and Doughnut series are useful when it is necessary to compare the percentage values of different point arguments in the same series. Series points are distributed along the circle’s radius. The radius of the Pie (or Doughnut) chart is 100%. Each slice of this circle is a portion of the whole series. The size of a slice depends on a point’s value.
The only difference between the Pie and Doughnut series view types is visual: the Doughnut series has a hole in its center.
The following image demonstrates series of both types plotted in the same diagram: the Pie series on the left, and the Doughnut on the right.
For example, a funnel chart can display a sales funnel that indicates sale process stages, including potential losses at each stage. This allows end users to identify weak points in an organization’s current sales processes, and indicate possible bottlenecks within the data.
The funnel displays a process that starts at 100%, with subsequent stages that have a progressively lower percentage. The data point with the greatest value in the collection is 100% (the top of the funnel), which represents the widest polygon. The next series point value is represented by a smaller polygon, whose top width represents the value’s ratio to the previous point value. This continues up until the last point, which has a bottom width equal to its top width.
The following image shows a typical Funnel chart.
Accessing a Diagram
You can access the diagram’s options at design time. Click the chart to select it, and in the Properties window, expand the WebChartControl.Diagram property.
At runtime, cast your instance of the Diagram object to the SimpleDiagram type.
// Create a new WebChartControl instance.
WebChartControl chart = new WebChartControl();
// Create a series of a compatible view type,
// and add it to the chart's collection,
// so that the diagram object cannot be equal to null.
Series series1 = new Series("Doughnut Series 1", ViewType.Doughnut);
chart.Series.Add(series1);
// Create a diagram and cast it to the SimpleDiagram type.
SimpleDiagram diagram = (SimpleDiagram)chart.Diagram;
// Access the diagram's options.
diagram.Dimension = 2;
diagram.LayoutDirection = LayoutDirection.Vertical;
Specific Options
You can use the SimpleDiagram.Dimension and SimpleDiagram.LayoutDirection properties to specify the layout of multiple Pie, Doughnut or Funnel series within a single diagram. Both properties are briefly described below. For more detailed information about them, refer to these properties’ descriptions.
- The SimpleDiagram.Dimension property determines the number of series that can be displayed on one line (row or column);
- The SimpleDiagram.LayoutDirection property determines the direction in which multiple series are positioned within a diagram (LayoutDirection.Horizontal or LayoutDirection.Vertical).
- The SimpleDiagram.Margins property allows you to keep the required indents of the diagram’s edges.
In addition, you can make all pie (doughnut) series on a diagram have the same size. To do this, set the SimpleDiagram.EqualPieSize property to true.
In the following image, the SimpleDiagram.EqualPieSize property is used to display Pie series of equal size.
Note
When the SimpleDiagram.EqualPieSize property is set to true, the PieSeriesView.MinAllowedSizePercentage property affects those series that have the smallest allowed size.