Chart Diagram in ASP.NET AJAX Information to Diagram
Diagram refers to the working plot area which displays data within rectangular or other shapes. The area next to diagram is called background area. And from this online article, you will find detailed introductions to four unique properties of plot area and the setting guidance for customizing diagram appearance style in asp.net chart control. Diagram Unique Properties
- XAxis, YAxis, and YAxis2 properties: diagram has three axes, X axis and two axes (YAxis and YAxis2), which are the structure of the chart. And users are allowed to set different spacing and scaling measurements for each axis respectively. You can view more guidance at chart axes.
- EmptySeriesMessage: If there is no data series in the chart, we will use EmptySeriesMessage to display it. It means you can input the null value to series, and the chart will display the emply area of current series.
- DataGrid: this property will display data series being compared in the chart in the form of a spreadsheet. Besides, the data displayed in the data table is automatically binded to the chart. And the data table is often positioned below the chart. More information about data grid can be found at chart datagrid.
- MarkingAreas: this property controls the background of the diagram. You can define one mark of a range of scale marks as an area. And each area may be filled with pre-defined color.
Developers can not only define these properties in aspx web page, but also can change these properties using C# code in aspx.cs. Here we provide a sample to help you make your chart with full messages you want in the network.
KaxChart1.Diagram.AxisX.Visible = ChartAxisVisibility.True;
KaxChart1.Diagram.AxisX.MaxValue = 5;
KaxChart1.Diagram.AxisX.MinValue = 1;
KaxChart1.Diagram.AxisX.Step = 1;
KaxChart1.Diagram.AxisX.LayoutMode=Kettic.ASPX.Controls.Chart.Styles.ChartAxisLayoutMode.Normal;
KaxChart1.Diagram.AxisY.Visible = ChartAxisVisibility.True;
KaxChart1.Diagram.AxisY.MaxValue = 5;
KaxChart1.Diagram.AxisY.Step = 0.5;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;
Diagram Appearance Properties
In this section, we will guide users to customize and tailor the property definition of diagram. And these settings will change the appearance style of diagram.
- Dimensions: the dimensions here are mainly responsible for the sizing properties of diagram. You can define the width, height, margins and paddings of diagram. Of course, you can use the property AutoSize to automatically resize the diagram based on its own data.
- Fill: You can use this property to fill diagram with selected color and in pre-defined type (solid, hatched, image, gradient). And there are rich chart templates, you can choose the one you want to render web chart freely.
- Border: you can freely design the color, pen style and width of diagram border. And you are free to hide or display the diagram border.
- Shadow: you can use Shadow to define shadow color, shadow color opacity and shadow distance and position relative to the diagram.
- Corners: this property is mainly responsible for the frame shape of diagram. The frame shape will be turning from square to round when the degree of rounding is increasing from 0 to larger values.
Much style properties can be set in asp.net web chart control in design mode. Here we provide another demo to change the properties using C# code.
KaxChart1.Diagram.StyleSet.Dimensions.Width = 500;
KaxChart1.Diagram.StyleSet.Dimensions.Height = 400;
KaxChart1.Diagram.StyleSet.Dimensions.Margins.Bottom = 20;
KaxChart1.Diagram.StyleSet.Dimensions.Margins.Left = 10;
KaxChart1.Diagram.StyleSet.Dimensions.Margins.Top = 20;
KaxChart1.Diagram.StyleSet.Dimensions.Margins.Right = 10;
KaxChart1.Diagram.StyleSet.Fill.FillMode = ChartFillMode.Solid;
KaxChart1.Diagram.StyleSet.Fill.PrimaryColor = System.Drawing.Color.Pink;
Recommended Links | 
