AJAX Control Toolkit Tutorial: AreaChart - Part Six

Muhammad Aqib Shehzad

11 Comments

Join the conversation! Your thoughts help the community grow.

Delpin Susai Raj10y ago
Nice
Kk10y ago
Thank you for Responding. Is it not possible to do export any type of Ajax control Toolkit chart.i am using Ajax control Toolkit Line chart for exporting. and which type of line chart is better to use for exporting to excel.
Kk10y ago
Thank you for your share sir but Is it possible to export this ajax using chart to excel(OpenOffice/Libra Office). It is possible to do can you please tell me it is very need to me.
- Muhammad Aqib Shehzad10y ago
  No you cannot do with this as it has limited properties that does not allow them to export to excel meanwhile you can use any other charts that support export to excel functionality or any code snippet to ease your work.
Santhakumar Munuswamy10y ago
Thank you for nice share
Jaipal Reddy10y ago
good series
Sonu Chaudhary10y ago
good one...
Vignesh Mani10y ago
Nice
Raja10y ago
Nice article...
Debasis Saha10y ago
Good One..
Michael Griffiths10y ago
Nicely done

Area Chart displays the statistical data in a graphical format. It renders a chart by one or more series values. It is compatible with any browser which supports SVG and also Internet Explorer higher than 9.

You can learn more in my previous parts here:

There are two type of Area Charts.

Stacked Area Chart
Basic Type Area Chart

Let’s see initial code with its output then we can check the properties in detail.

<ajaxToolkit:AreaChart ID="AreaChart1" runat="server" 2.
ChartHeight="300" ChartWidth="450" ChartType="Basic
ChartTitle="Pakistan versus European Widget Production"
CategoriesAxis="2007,2008,2009,2010,2011,2012"
ChartTitleColor="#0E426C" CategoryAxisLineColor="red"
ValueAxisLineColor="REd" BaseLineColor="Red">
<Series>
<ajaxToolkit:AreaChartSeries Name="Pakistan"
AreaColor="Green" Data="110, 189, 255, 95, 107, 140" />
<ajaxToolkit:AreaChartSeries Name="Europe"
AreaColor="Blue" Data="49, 77, 95, 68, 70, 79" />
</Series>
</ajaxToolkit:AreaChart>

Output

Properties

ChartHeight

By using this property you can customize the height of the chart.

ChartHeight="500"
ChartWidth

You can customize the chart width by using this property by defining the units.

ChartWidth="800"
ChartTitle

You can customize the area chart title by using the property

ChartTitle="Pakistan versus European Widget Production"
CategoryAxis

A mandatory field. You need to provide a set of values for the category axis to create a line chart.

CategoriesAxis="2011,2012,2013,2014,2015,2016"
ChartType

There are two types of area chart types and you can set from here by using the Property:
1. Stacked
2. Basic
Stacked

Basic
Theme

You can define the Cascading style sheet to color your chart.
ValueAxisLines

This property enables you to set the interval size for the value axis line. The default value is 9, you can give a unit value to this property to how many lines to be shown.

ValueAxisLines="20"
ChartTitleColor

This property enables you to set the font color of the chart title. You can customize what color value you want.

ChartTitleColor="#0E426C"
CategoryAxisLineColor

This property enables you to set the color of the category axis lines.

CategoryAxisLineColor="Black"
ValueAxisLineColor

This property enables you to set the the color of the value axis lines.

ValueAxisLineColor="REd"
BaseLineColor

This property enables you to set the color of the base lines of the chart.

BaseLineColor="Purple"
1. AreaChartSeries Properties:
2. <Series>
3. <ajaxToolkit:AreaChartSeries Name="Pakistan"
4. AreaColor="Green" Data="110, 189, 255, 95, 107, 140" />
5. <ajaxToolkit:AreaChartSeries Name="Europe"
6. AreaColor="Blue" Data="49, 77, 95, 68, 70, 79" />
7. </Series>
Name

This is required and you need to provide the name of series.

Name="Pakistan"
AreaColor

This property enables you to set the color of area for a particular series.

AreaColor="Green"
Data

This property is required and provides data for a particular series.

Data="110, 189, 255, 95, 107, 140"