Chart Series guide for ASP.NET AJAX, C#, VB.NET, rich aspx sample code for series points, name, label value and appearance

Chart Series in ASP.NET AJAX

Home > How to > Chart Series

Information to Series

Series is the most important chart element, which stands for series of data points that are displayed on chart. KT.UI ASP.NET AJAX Chart SDK offers developers and end users easy to use and mature chart series control to add single or multiple series to chart. Different chart type can display and contain different series numbers. As we know, a Pie chart can only display a single series, while Stacked chart and Bar chart can show multiple series of data points.

Within KT.UI ASP.NET AJAX Chart series library, mainly included series properties are: Types, Items, Name, DefaultLabelValue as well as Appearance. Following contents are the detailed instructions to these attributes.

Type: We can choose any certain chart format based on our actual needs. The supportable chart types of chart object are: Bar, Point, Line, Pie, Area, Gantt, Bubble, Bezier, Spline, SplineArea, Stock, Chart With Stacked, Full Stacked Chart.
Points: The most important series property, we are able to add unlimited data points value via ChartSeriesItem object.
Name: This property refers to the name of a certain data series, which can be displayed in legend. And you can rename the chart series item as you want.
DefaultLabelValue: This property refers to the format of label values and enables users to choose to display each data series in numeric amounts, percentages, totals or other available formats.
StyleSet: We can customize appearance of series, including as Border, Corners, Fill and TextAppearance.

Series Points

This part only focuses on Items property of ChartSeries control. The Item attribute consists of three significant properties: ActiveRegion, Appearance and Label.

How to Set XValue and YValue with ASPX Codes

Generally, we can display data values via XValue and YValue(hide the XValue2, YValue2, YValue3 and YValue4). While in Gantt and Bubble chart, we need to use XValue2 and YValue2 to show the value of a set of data points with XValue and YValue. And in CandleStick chart, we use YValue3 and YValue4 to show certain information. In CandleStick char, YValue means open, YValue2 means close, YValue3 means Max, and YValue4 means Min data. Now we will show you how to set the vluaes of series points C# asp.net.


ChartSeriesItem item = new ChartSeriesItem();
item.XValue = 4;

item.YValue = 4;
item.YValue2 = 5;
item.YValue3 = 2;
item.YValue4 = 6;      
PerChart1.Series[0].Items.Add(item);

How to Set Chart Type with ASPX Codes

We can combine different chart types for two sets of data points that can be displayed in one chart, such as, we can use "ChartSeries.View" object to set one data series displayed in Line type and the other displayed in Bar type. Then the two type charts will add to the chart diagram with collection.


<Series>
                        <kettic:ChartSeries Name="Series 1" View="Bar"> 
                        </kettic:ChartSeries>
                        <kettic:ChartSeries Name="Series 2" View="Line">
                        </kettic:ChartSeries>
                    </Series>

How to Set Empty Value with ASPX Codes

If you want to show blank or null value, or ignore some value in the chart, you can use the empty value property. While display in the web chart, such as bar chart, you may find the one bar is hiden or transparency, and it looks like spliting to two bar charts.


<Series>
                    <kettic:ChartSeries Name="series 1" View="Bar">            
                        <Points>
                            <kettic:ChartSeriesPoint Value="1" Argument="1">
                            </kettic:ChartSeriesPoint>                            
                            <kettic:ChartSeriesPoint Value="2" Argument="2" Empty="True" Label-Visible="False">
                            </kettic:ChartSeriesPoint>                            
                        </Points>
                    </kettic:ChartSeries>
                </Series>

DefaultLabelValue

The format of label values are based on the help of DefaultLabelValue object. If you want to set existing series to specified showing format, you can use this property to limit the selected series.

"#Y" or "#X": used to display respective numbers from X or Y axis
"#%": used for the percentage of total sum
"#SUM": used to display the total of all items
"#SUM": used to display the total of all items
"#SERIES": used to display the name of series
"#ITEM": used to display the name of item

Besides, we also can use the formats in MSDN, but we need to use curly brackets to contain the standard numeric formats, for example: #X{F}.


<Series>
                        <kettic:ChartSeries  Name="Series 1" View="Bar" DefaultLabelValue="#X{F}">
                            <Points>
                                <kettic:ChartSeriesPoint Value="1.5" Name="Point 1">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint Value="4" Name="Point 2">
                                </kettic:ChartSeriesPoint> 
                            </Points>
                        </kettic:ChartSeries>                       
                    </Series>

Compare with the setting in aspx, the C# code in aspx.cs is very simple.


KaxChart1.Series[0].DefaultLabelValue = "#X{F}";

Appearance Specific Properties

StyleSet in Bubble

The BubbleSize property is specific to the Bubble chart type and allows you to increase or decrease bubble size without distorting the shape.

StyleSet in Line and Spline

The LineSeriesAppearance property is specific to the Line and Spline chart types. StartCap and EndCap are the two forms of lines two ends, Width means the line's width and PenStyle is the filled font for line.


<Series>
                    <kettic:ChartSeries Name="Series 1" View="Line">
                        <Styleset LineSeriesAppearance-EndCap="Flat" LineSeriesAppearance-PenStyle="Dash" LineSeriesAppearance-StartCap="Round" LineSeriesAppearance-Width="3">                          
                        </ Styleset >                       
                    </kettic:ChartSeries>
                </Series>

StyleSet in Pie


<SeriesSet>
                    <kettic:ChartSeries Name="Series 1" View="Pie">
                        <StyleSet StartAngle="90" DiameterScale="0.6" ShowLabelConnectors="True" CenterXOffset="5" CenterYOffset="5" ExplodePercent="30">                           
                        </Appearance>                       
                    </kettic:ChartSeries>
                </SeriesSet>