$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Chart With Full Stacked in ASP.NET AJAX
Home > How to > Chart With 100% Stacked

Information to 100% Percentages Stacked Chart

Compared to ASP.NET Stacked Bar Chart, this Chart with Full Stacked can not only display difference between two or more data series but also be able to compare contributions of values as percentages within data series. One thing that needs to be mentioned here is that the combined total for each data series is 100%.
This Full Stacked Chart from this ASP.NET AJAX SDK supports three chart types, which are 100 percentages Stacked Bar Chart, 100 percentages Stacked Spline Area Chart and 100 percentages Stacked Area Chart. And this ASP.NET tutorial page will put its focus on the Full Stacked Bar Chart.
generate full stacked chart image in asp.net ajax using c#

How to build a simple Full Stacked Bar Chart

Full stacked bar chart is also called 100 percentages column chart. In this part, we will take the building of a simple full stacked bar chart as an example to illustrate the application of this full stacked chart type.
To achieve the AJAX effect, first, you need to drag a control item AjaxPanel into an aspx web page. After that, you need drag a chart control from toolbox into AjaxPanel and implement the following steps.

Basic Settings

In this process, you will choose the chart type and customize its appearance, like chart title, chart orientation and chart skin, as you wish. All the operations can be done within the property window. Now we will guide you to achieve these basic settings with specific attributes.
  1. Chart Type: Set the Chart DefaultType property or ChartSeries.Type to FullStackedBar.
  2. Chart Title: Set the ChartTitle.TextBlock-Text property to "Full Stacked Bar Chart". You can change the title text color and font. Resize and rotate is also supported.
  3. Chart Orientation: Set the SeriesOrientation property to Vertical. You are also free to set the Chart orientation to Horizontal based on your own need.
  4. Chart Skin: Set the Skin Property to "Kettic" or other available options. With the help of the skin and template options, you can make your web 100 percentage stacked bar chart looks special.
Here is the sample to set the full stacked chart series properties in .NET C# code.

KaxChart1.Series[0].Type = ChartSeriesType.FullStackedBar;
KaxChart1.Series[1].Type = ChartSeriesType.FullStackedBar;
KaxChart1.Skin = "Kettic";
KaxChart1.ChartTitle.TextBlock.Text = "Full Stacked Bar Chart";
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Full Stacked Bar Settings

Now comes the most important part of building an ASP.NET AJAX full stacked bar Chart, which is to add data series into above created 100 percentages stacked bar chart. The 100 percentages stacked bar chart has the ability to divide each bar into multiple categories based on your data source. And you can achieve this by using the property ChartSeries. In general, each series group may contain various items (from 1 to N) and you are free to add item to each series using property ChartSeries.Items. Before drawing the chart graphs, you can sort the data group and each data items in the series to make new data order, then the web chart will render the view with your logic.
To better illustrate above settings, we offer the sample ASP.NET code below. After running the example code, you can create a 100% stacked bar chart similar to the sample picture listed above.

<kettic:ChartSeries Name="Series 1" View=" FullStackedBar">
<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=" FullStackedBar">
<Points>
<kettic:ChartSeriesPoint Value="2" Name="Point 1">
</kettic:ChartSeriesPoint>
<kettic:ChartSeriesPoint 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>
Now, we provide how to set 100% stacked bar properties using C# code.

KaxChart1.SeriesSet[0].AddPoint(1.5, "Point1");
KaxChart1.SeriesSet[0].AddPoint(4, "Point2");
KaxChart1.SeriesSet[0].AddPoint(1, "Point3");
KaxChart1.SeriesSet[0].AddPoint(3.5, "Point4");
KaxChart1.SeriesSet[0].AddPoint(1, "Point5");

KaxChart1.SeriesSet[1].AddPoint(2, "Point1");
KaxChart1.SeriesSet[1].AddPoint(1, "Point2");
KaxChart1.SeriesSet[1].AddPoint(5, "Point3");
KaxChart1.SeriesSet[1].AddPoint(1, "Point4");
KaxChart1.SeriesSet[1].AddPoint(2.5, "Point5");
Of course, you are allowed to customize the bar color with the attribute ChartSeries.Appearance. FillStyle-MainColor. With different color in each data series group, users can separate the data more easily, so that they can make a better data trend analysis.

More settings of Series to see Chart Series Element.

See Also

ASP.NET AJAX UI Controls