Bind array data to Chart guide, contains single array and multiple array in ASP.NET, C# and VB.NET code

Data Binding Chart to an Array in ASP.NET

Home > How to > Chart Binding Array Data

In the real application, when you need to add a new visualization to your web chart application, the first thing you may need to do is to bind the chart to the data. The KaxChart control from our ASP.NET AJAX enables users to bind a chart to several forms of data. The supportable data source types that can be used in KaxChart include data array, data list, database and XML file. And in this article, we will illustrate data binding KaxChart to an array object or grouped array objects. On this page, you can view free online demo of chart data binding with array.

How to Bind a Chart to an Array Object

In this part, we will offer a C#.NET programming example for you on how to bind a chart to an array object. Developers can add data to pie chart, bar chart, line chart, stacked chart, scatter chart, bubble chart, gantt chart and so on. In order to let you run following C#.NET programming codes successfully in your web application, 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.

To bind a KaxChart to an array object, you need first change the DataSource property of the chart to array. Then you can specify the desired data array object using the chart DataBind() method.

C# Code


private object[,] ObjectsArray = { { 3.0, "One" }, { 15, "Two" }, { 7, "Three" }, { 14, "Four" } };

KaxChart1.Skin = "WebBlue";
KaxChart1.DataSource = ObjectsArray;
KaxChart1.DataBind();
KaxChart1.SeriesSet[0].View = ChartSeriesView.Line;
KaxChart1.Caption.Text = "KaxChart Binding to Objects Array";

Now the essential step for populating data from an array object in the chart is finished. If you have any problem in the process of data binding chart to an array object, please feel free to contact us via E-mail.

Following picture is a screen shot of above C# programming example. Each data item from the data source is showing as a data series point in web chart graphs.
bind an array data to chart in asp.net ajax using c#

bind an array data to chart in asp.net ajax using c#

How to Bind a Chart to Multiple Array Objects

Apart from display one array object in chart using data binding method, have you ever thought of data binding grouped array objects in one chart? If yes, following programming codes may offer some useful information for you.

After binding chart to multiple array objects, now you can not only view the data of source array objects but also compare the contributions of these data array objects.


private object[,] ObjectsArrayCat = { { 2, 9, "One" }, { 3, 5, "Two" }, { 7, 5.8, "Three" }, { 1, 12, "Four" } };

KaxChart1.Skin = "Windows7";
KaxChart1.DataSource = ObjectsArrayCat;
KaxChart1.DataBind();
KaxChart1.SeriesSet[0].View = ChartSeriesView.Line;
KaxChart1.SeriesSet[1].View = ChartSeriesView.Line;
KaxChart1.Caption.Text = "KaxChart  Binding to Grouped Objects Array";

Following picture is a screen shot of above C# programming example. Look at your input data source, you insert two types data array, then the viewing of html chart diagram has two data lines.
bind multiple array data to chart in asp.net ajax using c#

bind multiple array data to chart in asp.net ajax using c#

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