RangeSpline Chart

RangeSplineArea series type represents a variation of spline series, which instead of a line, uses spline area, and is not bound to start from the zero value on the y intercept. It is useful for representing continuous range data.

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">
    <PrimaryHeader Text="USD/EUR Low/High Values"></PrimaryHeader>
    <ExportOptions AllowExportToImage="false" AllowPrint="false" />
    <TooltipSettings CustomPointText="Low Value: <b>{point.low}</b></br>High Value:<b>{point.high}</b>">
        <AxixMarkers Enabled="true"  Mode="X"/>
    </TooltipSettings>
    <Legend BorderWidth="1" Align="Center" VerticalAlign="Top"></Legend>
    <Axes>
        <shield:ChartAxisX  AxisType="Datetime"></shield:ChartAxisX>
        <shield:ChartAxisY DrawWidth="1" PlotStripDashStyle="Dash">
            <Title Text="Low/High Values"></Title>
        </shield:ChartAxisY>
    </Axes>
    <DataSeries>
        <shield:ChartRangeSplineAreaSeries DataFieldLow="low" DataFieldHigh="high" CollectionAlias="Series #1">
        </shield:ChartRangeSplineAreaSeries>
    </DataSeries>
</shield:ShieldChart>

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    (ShieldChart1.DataSeries[0] as Shield.Web.UI.ChartRangeSplineAreaSeries).DataStart = (decimal)(new DateTime(2010, 1, 1) -
        new DateTime(1970, 1, 1).ToUniversalTime()).TotalMilliseconds;
    (ShieldChart1.DataSeries[0] as Shield.Web.UI.ChartRangeSplineAreaSeries).DataStep = 24 * 3600 * 1000 * 10;
}

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    ShieldChart1.DataSource = new object[] 
    {
        new { low = 0.75, high = 0.79}, 
        new { low = 0.95, high = 1.03}, 
        new { low = 0.70, high = 0.79}, 
        new { low = 0.65, high = 0.70}, 
        new { low = 0.5, high = 0.69}, 
        new { low = 0.77, high = 0.89}, 
        new { low = 0.79, high = 0.87}, 
        new { low = 0.55, high = 0.89}, 
        new { low = 0.65, high = 0.99} 
    };
}

• 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 ChartRangeSplineAreaSeries. The low and high values are got by the fields which names are set into the DataFieldLow and DataFieldHigh.
• The name that is shown in the legend is chosen via the CollectionAlias property of the ChartRangeSplineAreaSeries.
• By default all X values are sorted in order rangesplinearea chart to be shown appropriately, however this behavior is controlled by the EnableValueXSorting property of the ChartRangeSplineAreaSeries.
• The line type of the ChartRangeSplineAreaSeriescan be changed by the Settings.SeriesDashStyle property and it can be set as: Solid, ShortDash, ShortDot, ShortDashDot, Dot, etc.
• 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 ChartRangeSplineAreaSeries are represented with ChartSeriesItem which belongs to the ChartRangeSplineAreaSeries.Items collection.
  • The ChartRangeSplineAreaSeries.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 ChartRangeSplineAreaSeries are contained into the ChartRangeSplineAreaSeries.Settings object.
  • The series color can be set via Colorproperty.
  • If the AddToLegend is set to false the series is not added into the legend.
  • The animation of the series can be controlled by ChartRangeSplineAreaSeries.Settings.EnableAnimation and ChartRangeSplineAreaSeries.Settings.AnimationDuration properties.
  • 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.
  • If the chart has more than one line series they can be ordered by the index set in ChartRangeSplineAreaSeries.OrderIndex property.
  • 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.