Area, Area Chart, charts, components, Silverlight, WPF, WP7

Visiblox Charts can also render area charts. This is achieved very simply by creating a LineSeries instance, with the ShowArea property set to true.

Zooming has been enabled - click and drag with the mouse on the plot area or use the mouse wheel to zoom, double click to unzoom.

XAML + CODE +

XAML

^ Back To Top

<UserControl x:Class="Visiblox.Charts.Examples.AreaChart.AreaChartExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Style x:Key="NoBorder" TargetType="Border">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Black" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!-- Define the chart -->
        <!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
        <charts:Chart Name="AreaChart" Width="600" Height="350" Title="Temperature at Location 1 (18th Feb 2010)"
                      LegendVisibility="Collapsed" PlotAreaBorderStyle="{StaticResource NoBorder}"  HorizontalAlignment="Center">
            
            <!-- Add zooming -->
            <charts:Chart.Behaviour>
                <charts:ZoomBehaviour />
            </charts:Chart.Behaviour>
            
            <!-- Define X and Y axes and assign labels to them-->
            <charts:Chart.XAxis>
                <charts:DateTimeAxis ShowMajorGridlines="False" ShowMinorTicks="False" LabelFormatString="t" IsLabelOverflowAllowed="False"/>
            </charts:Chart.XAxis>
            
            <charts:Chart.YAxis>
                <charts:LinearAxis Title="Temperature (°C)" ShowMajorGridlines="False" ShowMinorTicks="False" LabelFormatString="0.00"/>
            </charts:Chart.YAxis>
            
            <!-- Define the area series and set their style-->
            <!-- Note that the data points of the series are initialized in the code behind file -->
            <charts:Chart.Series>
                <charts:LineSeries ShowArea="True" />
            </charts:Chart.Series>
        </charts:Chart>
    </Grid>
</UserControl>

^ Back To Top

Code

^ Back To Top

using System;
using System.Linq;
using System.Windows.Controls;

namespace Visiblox.Charts.Examples.AreaChart
{
    /// <summary>
    /// An example chart for displaying areas
    /// </summary>
    public partial class AreaChartExample : UserControl
    {
        private Random random = new Random(20110810);

        private DateTime startingDateTime = new DateTime(2010, 2, 18);

        public AreaChartExample()
        {
            InitializeComponent();

            // Generate data points for the series
            AreaChart.Series.First().DataSeries = GenerateDataSeries();
        }

        /// <summary>
        /// Generate the data displayed in the chart by randomly generating a 
        /// positive or negative delta to be applied to the current temperature
        /// depending on if the time is during the day or not.
        /// </summary>
        private IDataSeries GenerateDataSeries()
        {
            var series = new DataSeries<DateTime, double>();

            //Generate random temperature data for every hour on a given day
            double previousValue = 0;

            for (int i = 0; i < 24; i++)
            {
                double currentValue;
                double seed = random.NextDouble();

                bool isDayTime = i > 8 && i < 17;

                currentValue = isDayTime
                    ? previousValue + 2 * seed      // Temperature increases during the day (0800-1700)
                    : previousValue - seed;         // Decreases outwith this time

                // Add a DataPoint to the DataSeries
                series.Add(new DataPoint<DateTime, double>(startingDateTime.AddHours(i), currentValue));
                previousValue = currentValue;
            }

            return series;
        }
    }
}

^ Back To Top

Real Charting Power...

View Features and Try for Free

Previous Example (Line)Next Example (Staircase)

Area Chart | Visiblox Gallery

XAML

Code

Chart Types

Line And Area Charts

Bar And Column Charts

Financial Charts

Other Charts

Developer Features

High Performance

Customised Look And Feel

Application Development

Other Features