Setting Explicit Items
This Help article describes how the items of the ASP.NET AJAX Chart can be created or modified using different approaches (Declarative, DataBinding, Programmatic etc.).
The data that will be displayed in the RadHtmlChart can be declared in several ways:
-
Declarative Creation - Setting items in the markup (statically) using the SeriesItems collection of the desired chart series. See the "In 2010 (Markup)" ColumnSeries in Example 1.
SeriesItems from the markup take precedence over data loaded from the DataSource . See "In 2011 (Markup and DataSource)" ColumnSeries in the code in Example 1 for details.
-
DataBinding - The DataFieldY property of each series indicates the column from the data source that is used to load data for the SeriesItems. The "Upper Threshold (DataSource)" LineSeries in Example 1 is an example of this.
The chart must be data bound to a data source that contains the given column.
-
Programmatic Creation – You can create SeriesItems on the server like any other objects and then add them to the SeriesItems collection of the desired series. The LineSeries named "Lower Threshold(Programmatic)" in Example 1 uses this approach.
Such items are added after items declared in the markup and override any data binding.
-
Declarative and Programmatic Creation – You can create SeriesItems programmatically and then add them to an existing SeriesItems collection that is set in the markup. SeriesItems set in the markup can also be accessed and modified from the code-behind. See the code-behind of "In 2010 (Markup)" ColumnSeries in Example 1 for details.
The y-axis automatically adjusts to accommodate the values and its appearance can be controlled more precisely via its properties.
Example 1: Shows how the above setups are used in a real-live scenario.
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000px" Height="400px">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="In 2010 (Markup)">
<TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
<TooltipsAppearance Color="White" />
<SeriesItems>
<telerik:CategorySeriesItem Y="46.3"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="46.5"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="46.2"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="46.4"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="46.9"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="46.6"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="46.4"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="45.8"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="45.1"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="44.1"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="10.0"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="In 2011 (Markup and DataSource)" DataFieldY="DummyData">
<TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="42.8"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="42.4"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="42.2"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="42.9"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="42.4"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="42.2"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="42.0"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="40.6"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="39.7"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="38.7"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="38.1"></telerik:CategorySeriesItem>
<telerik:CategorySeriesItem Y="37.7"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:LineSeries Name="Upper Threshold (DataSource)" DataFieldY="UpperThreshold">
<Appearance>
<FillStyle BackgroundColor="#ff9c00" />
</Appearance>
<TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
<LabelsAppearance Visible="false">
</LabelsAppearance>
<MarkersAppearance Visible="false" />
</telerik:LineSeries>
</Series>
<XAxis>
<Items>
<telerik:AxisItem LabelText="January"></telerik:AxisItem>
<telerik:AxisItem LabelText="Februrary"></telerik:AxisItem>
<telerik:AxisItem LabelText="March"></telerik:AxisItem>
<telerik:AxisItem LabelText="April"></telerik:AxisItem>
<telerik:AxisItem LabelText="May"></telerik:AxisItem>
<telerik:AxisItem LabelText="June"></telerik:AxisItem>
<telerik:AxisItem LabelText="July"></telerik:AxisItem>
<telerik:AxisItem LabelText="August"></telerik:AxisItem>
<telerik:AxisItem LabelText="September"></telerik:AxisItem>
<telerik:AxisItem LabelText="October"></telerik:AxisItem>
<telerik:AxisItem LabelText="November"></telerik:AxisItem>
<telerik:AxisItem LabelText="December"></telerik:AxisItem>
</Items>
</XAxis>
<YAxis>
<LabelsAppearance DataFormatString="{0}%">
</LabelsAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Position="Right">
</Appearance>
</Legend>
<ChartTitle Text="Firefox market share">
<Appearance Position="Top">
</Appearance>
</ChartTitle>
</telerik:RadHtmlChart>