Bind list data to Chart guide, contains simple list, list object, collection list data binding, much ASP.NET AJAX, C# and VB.NET sample code

Data Binding Chart to a List in ASP.NET

Home > How to > Chart Binding List Data

The KaxChart control from our ASP.NET AJAX allows users to bind web chart to both simple and complex list. In this tutorial, we will offer you three programming examples to show three major situations of data binding chart to list, which are chart data binding with simple list, chart data binding with list of objects and chart data binding with collection list.

To bind a KaxChart to a list, you need first change the DataSource property of the chart to list type. Then you can specify the desired list objects using the chart DataBind() method. Please view the free online demo for chart data binding with list objects.
By the way, please make sure that your ASP.NET web application has installed NET Framework 3.5 or above versions and that you have installed all the necessary dlls from our ASP.NET AJAX SDK into your ASP.NET web application.

Data Binding Chart to Simple List

The simple list refers to the list that is made up of simple types, e.g. int and double modes. And in this part, we mainly illustrate how to add double list data to asp.net chart control.
C# sample code:


DemoData demo = new DemoData();                
demo.DoubleArray = new double[] { 5.0, 6, 7, 10 };
KaxChart1.Caption.Text = "KaxChart Bound to Strong Type Double List";
KaxChart1.DataSource = demo.DoubleArray;
KaxChart1.DataBind();
KaxChart1.SeriesSet[0].View= ChartSeriesView.Line;

Here we attach an image that shows the general output of above application for binding chart to simple list. You can find the data items in the list shows in the web chart diagram.

bind simple list data to chart in asp.net ajax using c#

bind simple list data to chart in asp.net ajax using c#

Data Binding Chart to List of Objects

In real life application, we may meet the need to bind chart to a list that is composed of complex data objects (for instance, the data object may contain multiple properties). And one of the common complex lists is the list of object which allows users to add data via Class. And following code is offered to show how to bind chart to the data from list of objects.
C# example code:


ProductsList lst = new ProductsList();
lst.Add(new Kettic.ASPX.Controls.Chart.Product(0, "CPU", 1200));
lst.Add(new Kettic.ASPX.Controls.Chart.Product(1, "Hard Disk", 2500));
lst.Add(new Kettic.ASPX.Controls.Chart.Product(2, "Memory", 3000));
lst.Add(new Kettic.ASPX.Controls.Chart.Product(3, "Mother Board", 4000));
IBindingList bindingList = (IBindingList)lst;
KaxChart1.Caption .Text = "KaxChart Bound to IBinding List";
KaxChart1.DataSource = bindingList;               
KaxChart1.DataBind();
KaxChart1.SeriesSet[0].View = ChartSeriesView.Line;
KaxChart1.SeriesSet[1].View = ChartSeriesView.Line;

Here we attach an image that shows the general output of above application for binding chart to list of objects. In the chart graphs, there are two groups of data. One is amount data, it shows in light green line, the other is ID, you can find it at the bottom of the plot area of chart view as a blue line. So Kettic asp.net chart control can display multiple grouped data series, while the input list of objects has multiple properties.
binding list objects data to chart in asp.net ajax using c#

binding list objects data to chart in asp.net ajax using c#

Data Binding Chart to Collection List

Collection list can be also counted as a type of complex list. This list type allows users to add data via CollectionBase. Following programming code is specifically provided for the chart data bind with collection list.
C# sample code:


DoubleCollection collection = new DoubleCollection();
collection.Clear();
collection.Add(2.5);
collection.Add(4);
collection.Add(6);
collection.Add(8.6);
collection.Add(10);
CollectionBase collectionDS = (CollectionBase)collection;
KaxChart1.Caption.Text = "KaxChart Bound to Collection Base";
KaxChart1.DataSource = collectionDS;
KaxChart1.DataBind();
KaxChart1.SeriesSet[0].View= ChartSeriesView.Line;

Here we attach an image that shows the general output of above application for binding chart to collection list. The data in the collection is a list of double values, and these values add dynamicly to the asp.net chart through the server side programming code.
bind collection list data to chart in asp.net ajax using c#

bind collection list data to chart in asp.net ajax using c#

In this tutorial, all the examples are showing line chart type in ajax. And our asp.net chart control supply some extra chart types: pie chart, bar chart, stacked chart, point chart, gantt chart and so on.
If you have any problem in the process of data binding chart to any type of list, please feel free to contact us via E-mail.

Other Recommended Data Binding Applications

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