Create multiple types chart in ASP.NET application | Kettic chart asp.net ajax control

Chart Feature Multiple Chart Types in ASP.NET

Home > How to > Chart Multiple Types

Kettic ASP.NET Chart control provides rich chart type to display your data in chart views. You can define one web page to show a single asp.net chart, such as bar chart, line chart, pie chart, point chart and so on. However, rendering single chart type in one page may not meet your requirement. The chart data can be so large and complex sometimes, so it's difficult to analysis the data trend in single chart type.
So in this online tutorial page, we will introduce you how to build and create a web chart control with multiple chart types in your asp.net application using C# language.

Build a multiple types chart in ASP.NET

It's similar to the single chart type in a web page, creating multiple chart types is very simple and easy.
Developers only need to change the Series set in the asp.net chart control to the wanted chart type, then current data series will display in such type view. Please see the C# demo code below:


KaxChart1.SeriesSet[0].View = ChartSeriesView.Bar;
KaxChart1.SeriesSet[1].View = ChartSeriesView.Line;

In the code, you can find, we define two chart type in a web chart control, bar chart and line chart. So that the chart will contrain two diffirent data series viewing, and users can split each data series very clearly.
Besides setting the chart type in the class programmingly, you can aslo define the multiple chart type in the design time. Following is a sample guide to create two chart type and data series in the aspx.


<kettic:ChartSeries Name="Series 1" View="Bar">
                            < Points>
                                <kettic:ChartSeriesPoint  Value="1.5"  Name=" Point 1">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="4"   Name=" Point 2">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="1"   Name=" Point 3">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="3.5"   Name=" Point 4">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="1"   Name=" Point 5">
                                </kettic:ChartSeriesPoint>
                            </ Points>
                        </kettic:ChartSeries>
<kettic:ChartSeries Name="Series 2" View="Bar">
                            < Points>
                                <kettic:ChartSeriesPoint  Value="2"  Name=" Point 1">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeries Point  Value="1" Name=" Point 2">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="5"   Name=" Point 3">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint   Value="1" Name=" Point 4">
                                </kettic:ChartSeriesPoint>
                                <kettic:ChartSeriesPoint  Value="2.5"  Name=" Point 5">
                                </kettic:ChartSeriesPoint>
                            </ Points>
                        </kettic:ChartSeries>

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping Scrolling Empty Values Scale Break Multiline Labels Wise Labels Marking Areas

Multiple Types

Interactive Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control