ASP.NET Area Chart

Area chart tracks one or more data series graphically. Area chart allows you visualize cumulative value over a period of time or range.

The chart from the image above is created with the following code:

<shield:ShieldChart ID="ShieldChart1" Width="580px" Height="400px" runat="server" 
      OnTakeDataSource="ShieldChart1_TakeDataSource"
    CssClass="chart">
    <Axes>
        <shield:ChartAxisY>
            <Title Text="Internet users in the United States"></Title>
        </shield:ChartAxisY>
    </Axes>
    <DataSeries>
        <shield:ChartAreaSeries DataFieldX="Year" DataFieldY="Percent">
        </shield:ChartAreaSeries>
    </DataSeries>
</shield:ShieldChart>

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    ShieldChart1.DataSource = DataRepository.GetInternetUsageStatistics();
}
public class InternetUsageStatistics
{
    public int Year { set; get; }
    public double Percent { set; get; }
}

The ASP.NET ShieldChart supports both single and multi-series area charts.

The chart from the image above is created with the following code:

<shield:ShieldChart ID="ShieldChart1" Width="590px" Height="400px" runat="server" 
    OnTakeDataSource="ShieldChart1_TakeDataSource"
    CssClass="chart">
    <PrimaryHeader Text="GDP Changes per region"></PrimaryHeader>
    <ExportOptions AllowExportToImage="false" AllowPrint="false" />
    <Axes>
        <shield:ChartAxisX 
            CategoricalValues="2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011"></shield:ChartAxisX>
    </Axes>
    <DataSeries>
        <shield:ChartAreaSeries DataFieldY="IndiaValue" CollectionAlias="India">
        </shield:ChartAreaSeries>
        <shield:ChartAreaSeries DataFieldY="WorldValue" CollectionAlias="World - wide">
        </shield:ChartAreaSeries>
        <shield:ChartAreaSeries DataFieldY="HaitiValue" CollectionAlias="Haiti">
        </shield:ChartAreaSeries>
    </DataSeries>
</shield:ShieldChart>

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    List datasource = new List() 
    { 
        new ChangesPerRegion() { IndiaValue = 3.907, WorldValue=1.988, HaitiValue= -0.253 },
        new ChangesPerRegion() { IndiaValue = 7.943, WorldValue= 2.733, HaitiValue= 0.362 },
        new ChangesPerRegion() { IndiaValue = 7.848, WorldValue= 3.994, HaitiValue= -3.519 },
        new ChangesPerRegion() { IndiaValue = 9.284, WorldValue= 3.464, HaitiValue= 1.799 },
        new ChangesPerRegion() { IndiaValue = 9.263, WorldValue= 4.001, HaitiValue= 2.252 },
        new ChangesPerRegion() { IndiaValue = 9.801, WorldValue= 3.939, HaitiValue= 3.343 },
        new ChangesPerRegion() { IndiaValue = 3.890, WorldValue= 1.333, HaitiValue= 0.843 },
        new ChangesPerRegion() { IndiaValue = 8.238, WorldValue=-2.245, HaitiValue= 2.877 },
        new ChangesPerRegion() { IndiaValue = 9.552, WorldValue= 4.339, HaitiValue= -5.416 },
        new ChangesPerRegion() { IndiaValue =  6.855, WorldValue= 2.727, HaitiValue= 5.590 }
    };

    ShieldChart1.DataSource = datasource;
}

private class ChangesPerRegion
{
    public double IndiaValue { get; set; }
    public double WorldValue { get; set; }
    public double HaitiValue { get; set; }
}  

• When the chart is bound to collection of objects the X values are got by the field which name is set into the DataFieldX property of the ChartAreaSeries. The Y values are got by the field which name is set into the DataFieldY property.
• The name that is shown in the legend is chosen via the CollectionAlias property of the ChartAreaSeries.
• By default all X values are sorted in order area chart to be shown appropriately, however this behavior is controlled by the EnableValueXSorting property of the ChartAreaSeries.
• DataStart and DataStep properties control the start value of the x axis and explicit value for the interval between a data series member values.
• All points from the ChartAreaSeries are represented with ChartSeriesItem which belongs to the ChartAreaSeries.Items collection.
  • The ChartAreaSeries.Items can be added declarative without data binding.
  • The data binding and declarative approach can be mixed. However in order declarative items to be appended to the items created from the datasource the ShieldChart.AppendDataBoundItems property need to be set to "true".
• All setting related to ChartAreaSeries are contained into the ChartAreaSeries.Settings object.
  • The background and line color can be set via Color and InnerColor properties.
  • If the AddToLegend is set to false the series is not added into the legend.
  • The animation of the series can be controlled by ChartAreaSeries.Settings.EnableAnimation and ChartAreaSeries.Settings.AnimationDuration properties.
  • If some values are missing (i.e. they are null/Nothing) from the series data you can have the chart work around this by setting the DrawNullValues property.
  • The series of multiline area chart can be stacked by setting the StackMode property to Normal or Percent.
  • Each point from the series can be selected if the EnablePointSelection property is set to true.
  • All selected points can be customized by Settings.PointMark.ActiveSettings.PointSelectedState object properties.
  • Each series has related tooltip which can be customized via the Settings.Tooltip object.
  • Each point from the series can have related text, which appearance is controlled by Settings.DataPointText property. You can changeBackgroundColor, BorderColor, Color, Padding, and TextAngle of the corresponding data point text.