<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.AreaChart.DefaultCS" %>
<!DOCTYPE html>
<
head
runat
=
"server"
>
<
title
>Telerik ASP.NET Example</
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
/>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
ShowChooser
=
"true"
/>
<
div
class
=
"demo-container size-wide"
>
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"AreaChart"
Width
=
"800"
Height
=
"500"
Skin
=
"Silk"
>
<
PlotArea
>
<
Series
>
<
telerik:AreaSeries
Name
=
"Sales"
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"Blue"
></
FillStyle
>
</
Appearance
>
<
LabelsAppearance
Position
=
"Above"
></
LabelsAppearance
>
<
LineAppearance
Width
=
"1"
></
LineAppearance
>
<
MarkersAppearance
MarkersType
=
"Circle"
BackgroundColor
=
"White"
Size
=
"6"
BorderColor
=
"Blue"
BorderWidth
=
"2"
></
MarkersAppearance
>
<
TooltipsAppearance
Color
=
"White"
></
TooltipsAppearance
>
<
SeriesItems
>
<
telerik:CategorySeriesItem
Y
=
"400"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"720"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"1300"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"450"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
/>
<
telerik:CategorySeriesItem
Y
=
"600"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"900"
></
telerik:CategorySeriesItem
>
</
SeriesItems
>
</
telerik:AreaSeries
>
<
telerik:AreaSeries
Name
=
"Expenses"
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"Red"
></
FillStyle
>
</
Appearance
>
<
LabelsAppearance
Position
=
"Above"
></
LabelsAppearance
>
<
LineAppearance
Width
=
"1"
></
LineAppearance
>
<
MarkersAppearance
MarkersType
=
"Circle"
BackgroundColor
=
"White"
Size
=
"6"
BorderColor
=
"Red"
BorderWidth
=
"2"
></
MarkersAppearance
>
<
TooltipsAppearance
Color
=
"White"
></
TooltipsAppearance
>
<
SeriesItems
>
<
telerik:CategorySeriesItem
Y
=
"700"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"420"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"1100"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"650"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
/>
<
telerik:CategorySeriesItem
Y
=
"550"
></
telerik:CategorySeriesItem
>
<
telerik:CategorySeriesItem
Y
=
"700"
></
telerik:CategorySeriesItem
>
</
SeriesItems
>
</
telerik:AreaSeries
>
</
Series
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"Transparent"
></
FillStyle
>
</
Appearance
>
<
XAxis
AxisCrossingValue
=
"0"
Color
=
"black"
MajorTickType
=
"Outside"
MinorTickType
=
"Outside"
Reversed
=
"false"
>
<
Items
>
<
telerik:AxisItem
LabelText
=
"2004"
></
telerik:AxisItem
>
<
telerik:AxisItem
LabelText
=
"2005"
></
telerik:AxisItem
>
<
telerik:AxisItem
LabelText
=
"2006"
></
telerik:AxisItem
>
<
telerik:AxisItem
LabelText
=
"2007"
></
telerik:AxisItem
>
<
telerik:AxisItem
LabelText
=
"2008"
></
telerik:AxisItem
>
<
telerik:AxisItem
LabelText
=
"2009"
></
telerik:AxisItem
>
<
telerik:AxisItem
LabelText
=
"2010"
></
telerik:AxisItem
>
</
Items
>
<
TitleAppearance
Position
=
"Center"
RotationAngle
=
"0"
Text
=
"Years"
></
TitleAppearance
>
<
LabelsAppearance
DataFormatString
=
"{0}"
RotationAngle
=
"0"
Skip
=
"0"
Step
=
"1"
>
</
LabelsAppearance
>
</
XAxis
>
<
YAxis
AxisCrossingValue
=
"0"
Color
=
"black"
MajorTickSize
=
"4"
MajorTickType
=
"Outside"
MaxValue
=
"1400"
MinorTickType
=
"None"
MinValue
=
"0"
Reversed
=
"false"
Step
=
"200"
>
<
LabelsAppearance
DataFormatString
=
"{0}"
RotationAngle
=
"0"
Skip
=
"0"
Step
=
"1"
>
</
LabelsAppearance
>
<
TitleAppearance
RotationAngle
=
"0"
Position
=
"Center"
Text
=
"Finance"
></
TitleAppearance
>
</
YAxis
>
</
PlotArea
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"Transparent"
></
FillStyle
>
</
Appearance
>
<
ChartTitle
Text
=
"Company performance"
>
<
Appearance
Align
=
"Center"
BackgroundColor
=
"Transparent"
Position
=
"Top"
>
</
Appearance
>
</
ChartTitle
>
<
Legend
>
<
Appearance
BackgroundColor
=
"Transparent"
Position
=
"Bottom"
>
</
Appearance
>
</
Legend
>
</
telerik:RadHtmlChart
>
</
div
>
<
br
/>
<
br
/>
<
telerik:RadAjaxLoadingPanel
runat
=
"server"
ID
=
"RadAjaxLoadingPanel1"
Skin
=
"Silk"
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
DefaultLoadingPanelID
=
"RadAjaxLoadingPanel1"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"Configuratorpanel1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"AreaChart"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
qsf:ConfiguratorPanel
ID
=
"Configuratorpanel1"
runat
=
"server"
>
<
Views
>
<
qsf:View
>
<
qsf:ConfiguratorColumn
ID
=
"ConfiguratorColumn2"
runat
=
"server"
Size
=
"Medium"
Title
=
"Markers Styles"
>
<
ul
class
=
"fb-group"
>
<
li
>
<
qsf:DropDownList
runat
=
"server"
ID
=
"MarkersType"
AutoPostBack
=
"true"
Label
=
"Type"
/>
</
li
>
<
li
>
<
qsf:ColorPicker
runat
=
"server"
ID
=
"MarkersBorderColor"
AutoPostBack
=
"true"
Label
=
"Border color"
CssClass
=
"fb-sized"
/>
<
qsf:ColorPicker
runat
=
"server"
ID
=
"MarkersBackgroundColor"
AutoPostBack
=
"true"
Label
=
"Background color"
CssClass
=
"fb-sized"
/>
</
li
>
<
li
>
<
qsf:NumericTextBox
runat
=
"server"
ID
=
"MarkersBorderWidth"
AutoPostBack
=
"true"
Value
=
"2"
MinValue
=
"2"
MaxValue
=
"8"
EmptyMessage
=
"Enter a value"
Label
=
"Border Width"
WrapperCssClass
=
"fb-sized"
>
<
NumberFormat
DecimalDigits
=
"0"
/>
</
qsf:NumericTextBox
>
<
qsf:NumericTextBox
runat
=
"server"
ID
=
"MarkersSize"
AutoPostBack
=
"true"
Label
=
"Size"
Value
=
"6"
MinValue
=
"6"
MaxValue
=
"14"
EmptyMessage
=
"Enter a value"
WrapperCssClass
=
"fb-sized"
>
<
NumberFormat
DecimalDigits
=
"0"
/>
</
qsf:NumericTextBox
>
</
li
>
</
ul
>
</
qsf:ConfiguratorColumn
>
<
qsf:ConfiguratorColumn
ID
=
"ConfiguratorColumn1"
runat
=
"server"
Size
=
"Medium"
Title
=
"Line Styles"
>
<
ul
class
=
"fb-group"
>
<
li
>
<
qsf:DropDownList
runat
=
"server"
ID
=
"ComboBoxLineStyle"
AutoPostBack
=
"true"
Label
=
"Style"
/>
</
li
>
<
li
>
<
qsf:DropDownList
runat
=
"server"
ID
=
"MissingValues"
AutoPostBack
=
"true"
Label
=
"Missing values"
/>
</
li
>
<
li
>
<
qsf:DropDownList
runat
=
"server"
ID
=
"LinesDashType"
AutoPostBack
=
"true"
Label
=
"DashType"
>
</
qsf:DropDownList
>
</
li
>
<
li
>
<
qsf:NumericTextBox
runat
=
"server"
ID
=
"LineWidth"
AutoPostBack
=
"true"
Label
=
"Width"
Value
=
"1"
MinValue
=
"1"
MaxValue
=
"5"
EmptyMessage
=
"Enter a value"
>
<
NumberFormat
DecimalDigits
=
"0"
/>
</
qsf:NumericTextBox
>
</
li
>
</
ul
>
</
qsf:ConfiguratorColumn
>
<
qsf:ConfiguratorColumn
ID
=
"ConfiguratorColumn3"
runat
=
"server"
Size
=
"Medium"
Title
=
"Axis Setup"
>
<
ul
class
=
"fb-group"
>
<
li
>
<
qsf:DropDownList
runat
=
"server"
ID
=
"JustifiedAxis"
AutoPostBack
=
"true"
Label
=
"Justified"
>
<
Items
>
<
telerik:DropDownListItem
Text
=
"Not set"
Value
=
""
/>
<
telerik:DropDownListItem
Text
=
"True"
Value
=
"true"
/>
<
telerik:DropDownListItem
Text
=
"False"
Value
=
"false"
/>
</
Items
>
</
qsf:DropDownList
>
</
li
>
</
ul
>
</
qsf:ConfiguratorColumn
>
</
qsf:View
>
</
Views
>
</
qsf:ConfiguratorPanel
>
</
form
>
</
body
>
</
html
>