$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Bar Charts in ASP.NET AJAX
Home > How to > Bar Chart

Information to Bar Chart

Bar chart, which uses either horizontal or vertical bars to compare the values among different data series, is widely used for demonstrating the value comparisons among multiple data series. Comparing to the simple bar graph, you may be more interested in stacked bar chart, which can show percentage number of bar data. Following picture is a screenshot of a bar chart example which compares the values or amounts of two data categories.
generate bar chart in asp.net ajax using c#

How to Build a Simple Bar Chart

In this part, we will show you how to create a simple bar chart with two data series and insert the bar chart into an aspx page. You can view bar chart online demo on this page.
Before following the setting tutorial below, please make sure that you have created a web form application in visual studio and embedded all necessary dlls into this ASP.NET web application. Another thing that needs to be noted here is that, to achieve the AJAX effect, you need to drag an AjaxPanel item from the toolbox to the target aspx page and put a chart control into that AjaxPanel.
After you finish above operations, please follow the guidance below to configure some settings.

Basic Settings

Users can finish these basic settings for creating a bar chart within the property window. And here we offer detailed guidance for users to set the chart type, chart title, chart orientation and chart background color in ASP.NET application.
  1. Chart Type: Set the Chart DefaultSeriesView property or ChartSeries.View to Bar.
  2. Chart Title: Set the ChartCaption.Text property to "Bar Chart". It will display as label at the top of the web chart component. And the tooltip function is also enable in the chart title.
  3. Chart Orientation: Set the SeriesOrientation property to Vertical. If needed, you can also set the bar chart orientation to Horizontal.
  4. Chart Skin: Set the Skin Property to "KetticStyle". Each available skin template can draw a different chart viewer.
You can follow the C# sample code to set the basic chart settings.

KaxChart1.DefaultSeriesView = ChartSeriesView.Bar;
KaxChart1.Skin = "KetticStyle";
KaxChart1.Caption.Text = "Bar Chart";
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Bar Settings

This section will show you how to add multiple data series into above created bar chart and how to customize the number of items and their values within each data series. Before render the asp.net chart control, you can decide how many bar groups to add, define the order of bar group and bar item. What's more, if you want to combine multiple types of chart together or flex two charts, such as adding line chart to bar chart, you just only need to change one group data of chart series to Line type.
In the following sample aspx code, we will try to add dual data series values into bar chart. Here each data category has five items. And you can freely add more items to the data series using the property ChartSeries.Items. Each data item can insert the description as tooltip, so it make you chart demo more interactive to users. And with useful legned describing each group data detailed, the web chart will more clearly.

<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>
Of course, to better display the comparisons between different data series, you can choose to demonstrate each data category with different bar colors by using ChartSeries.StyleSet.Fill.PrimaryColor. And you can also define the axis of chart using C# code.

KaxChart1.SeriesSet[0].StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#CC3399");
KaxChart1.SeriesSet[1].StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#660033");

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;
More settings of Series to see Chart Series Element.

Related Bar Chart Creating Guidance

ASP.NET AJAX UI Controls