StepLine Chart

StepLine graph renders step-like visuals to the next point. They are useful for creating presentations where relationship between variables and how that relationship changes.For example, you might make a line graph to show how an humans growth rate varies over time, or how a countries average high temperature varies from month to month. You can also graph more than one data set on the same line graph.

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

<shield:ShieldChart ID="ShieldChart1" Width="100%" Height="400px" runat="server" 
    OnTakeDataSource="ShieldChart1_TakeDataSource"
    CssClass="chart">
    <PrimaryHeader Text="Twitter Usage Trends October 2010"></PrimaryHeader>
    <Axes>
        <shield:ChartAxisX  AxisType="Datetime" FixedEnd="false"></shield:ChartAxisX>
        <shield:ChartAxisY EndOffset="0">
        </shield:ChartAxisY>
    </Axes>
    <DataSeries>
        <shield:ChartStepLineSeries>
        </shield:ChartStepLineSeries>
    </DataSeries>
</shield:ShieldChart>

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

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

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    List datasource = new List() { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 195.6, 154.4, 145, 133, 
    145, 167, 189, 134, 156, 178, 190, 165, 143, 123, 145, 165, 112, 115, 112, 123, 145, 167, 189 };

    ShieldChart1.DataSource = datasource;
}

• 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 ChartStepLineSeries. 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 ChartStepLineSeries.
• By default all X values are sorted in order line chart to be shown appropriately, however this behavior is controlled by the EnableValueXSorting property of the ChartStepLineSeries.
• The type of the ChartStepLineSeries can 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 ChartStepLineSeries are represented with ChartSeriesItem which belongs to the ChartStepLineSeries.Items collection.
  • The ChartStepLineSeries.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 ChartStepLineSeries are contained into the ChartStepLineSeries.Settings object.
  • The series color can be set via Color property.
  • If the AddToLegend is set to false the series is not added into the legend.
  • The animation of the series can be controlled by ChartStepLineSeries.Settings.EnableAnimation and ChartStepLineSeries.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.
  • If the chart has more than one line series they can be ordered by the index set in ChartStepLineSeries.OrderIndex property.
  • 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.
  • From the Settings.PointMark.ActiveSettings.PointHoveredState object properties you can change the appearance of each line when the user hovers it.
  • 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.