THEMES

Chart - Views Area Chart

      

Series orientation:

Additional chart series views:




The Area Series is a derivative of Categorical series and plot data points using category-value couples. When the Area series are positioned on a plane, the points will be connected to form a line.
This demo shows the appearance of area chart. Besides normal area, you can choose the spline view, stacked view and stacked spline view of area chart.
You can change the appearance by setting the skin property.



Some properties you may use:
  • LayoutMode - the series appearance.
  • Step - a step-like progression of series items.


Besides area chart, kettic provide many other chart type in asp.net, such as spline chart, bar chart, pie chart.

<%@ Page Title="" Language="C#" MasterPageFile="~/Demo.Master" AutoEventWireup="true" CodeBehind="AreaChart.aspx.cs" Inherits="Kettic.AspNet.Demo.KaxChartDemo.Views.AreaChart" %>
<%@ Register TagPrefix="kettic" Namespace="Kettic.AspNet.Controls" Assembly="Kettic.AspNet.Controls,Version=2014.04.1129.0" %>
<%@ Register TagPrefix="kettic" Namespace="Kettic.AspNet.Controls.ChartModel" Assembly="Kettic.AspNet.Controls,Version=2014.04.1129.0" %>

<asp:Content ID="Content1" ContentPlaceHolderID="DemoContent" runat="server">
    <kettic:KaxAjaxPanel runat="server" ID="KaxAjaxPanel1">
        <div id="ChartArea">
            <div id="chartPlaceholder" style="float: left;">
                <kettic:KaxChart ID="KaxChart1" runat="server">
                    <Caption>
                        <TextArea Text="Area Chart">
                        </TextArea>
                    </Caption>
                    <Diagram>
                        <AxisX MaxValue="5" MinValue="1" Step="1" LayoutMode="Normal">
                        </AxisX>
                        <AxisY MaxValue="5" Step="0.5" AxisMode="extended">
                        </AxisY>
                    </Diagram>
                    <SeriesSet>
                        <kettic:ChartSeries Name="Series 1" View="Area">
                            <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="Area">
                            <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>
                    </SeriesSet>
                </kettic:KaxChart>
            </div>
            <div style="float: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <div id="chartOptionsPlaceholder" style="float: left;">
                <br />
                <asp:Label ID="lblChartOrientation" runat="server" Text="Series orientation:"></asp:Label>
                <asp:RadioButtonList AutoPostBack="true" ID="OrientationList" runat="server" OnSelectedIndexChanged="OrientationList_SelectedIndexChanged">
                    <asp:ListItem Text="Horizontal" Value="Horizontal"></asp:ListItem>
                    <asp:ListItem Text="Vertical" Value="Vertical" Selected="True"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
                <asp:Label ID="lblChartType" runat="server" Text="Additional chart series views:"></asp:Label>
<asp:RadioButtonList runat="server" ID="radiosViews" AutoPostBack="true"
OnSelectedIndexChanged="radiosViews_SelectedIndexChanged">

                    <asp:ListItem Text="Normal Area" Value="Area" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Spline Area" Value="SplineArea"></asp:ListItem>
                    <asp:ListItem Text="Stacked Area" Value="StackedArea"></asp:ListItem>
                    <asp:ListItem Text="Full Stacked Area" Value="FullStackedArea"></asp:ListItem>
                    <asp:ListItem Text="Stacked Spline Area" Value="StackedSplineArea"></asp:ListItem>
                    <asp:ListItem Text="Full Stacked Spline Area" Value="FullStackedSplineArea"></asp:ListItem>
                </asp:RadioButtonList>
            </div>
            <div style="clear: both;"></div>
        </div>
    </kettic:KaxAjaxPanel>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Kettic.AspNet.Controls.ChartModel;

namespace Kettic.AspNet.Demo.KaxChartDemo.Views
{
    public partial class AreaChart : System.Web.UI.Page
    {
        protected void OrientationList_SelectedIndexChanged(object sender, EventArgs e)
        {
            KaxChart1.SeriesOrientation = (ChartSeriesOrientation)Enum.Parse(typeof(ChartSeriesOrientation), OrientationList.SelectedValue);
        }


        protected void radiosViews_SelectedIndexChanged(object sender, EventArgs e)
        {
            KaxChart1.SeriesSet[0].View = (ChartSeriesView)Enum.Parse(typeof(ChartSeriesView), radiosViews.SelectedValue);
            KaxChart1.SeriesSet[1].View = (ChartSeriesView)Enum.Parse(typeof(ChartSeriesView), radiosViews.SelectedValue);
        }
    }
}
Version:2014.04.1129
Copyright © 2008-2018 Kettic Inc
Your Next ASP.NET Site Best Choice

Get started today and download ASP.NET AJAX UI Controls and SDKs for 30-day free try.

Kettic provide rich online demos to view the features of each UI control. And you can find comprehensive guide to use ASP.NET controls

For more information about Kettic UI SDK, please visit the ASP.NET AJAX Controls webpage. For immediate assistance, contact us by Email at support@kettic.com.