Setting Explicit Items
This Help article describes how the items of the RadHtmlChart 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>
protected void Page_Load(object sender, EventArgs e)
{
//Set the datasource of the HtmlChart and databind it
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
//Create a "Lower Threshold" LineSeries programmatically
LineSeries lineSeries1 = new LineSeries();
lineSeries1.Name = "Lower Threshold (Programmatic)";
lineSeries1.LabelsAppearance.Visible = false;
lineSeries1.TooltipsAppearance.Color = System.Drawing.Color.White;
lineSeries1.TooltipsAppearance.DataFormatString = "{0}%";
lineSeries1.MarkersAppearance.Visible = false;
//Create a sample SeriesItems for the "Lower Threshold" LineSeries
for (int i = 1; i <= 12; i++)
{
CategorySeriesItem item1 = new CategorySeriesItem();
item1.Y = 10;
lineSeries1.SeriesItems.Add(item1);
}
RadHtmlChart1.PlotArea.Series.Add(lineSeries1);
//Access and modify the 11th SeriesItem of the "In 2010 (Markup)" ColumnSeries
(RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems[10].Y = (decimal)44.0;
//Create an additional SeriesItem for the "In 2010 (Markup)" ColumnSeries
CategorySeriesItem seriesItem1 = new CategorySeriesItem();
seriesItem1.Y = (decimal)43.5;
(RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(seriesItem1);
}
protected DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UpperThreshold");
dt.Columns.Add("DummyData");
for (int i = 0; i < 12; i++)
{
dt.Rows.Add(40, 30);
}
return dt;
}
Protected Sub Page_Load(sender As Object, e As EventArgs)
'Set the datasource of the HtmlChart and databind it
RadHtmlChart1.DataSource = GetData()
RadHtmlChart1.DataBind()
'Create a "Lower Threshold" LineSeries programmatically
Dim lineSeries1 As New LineSeries()
lineSeries1.Name = "Lower Threshold (Programmatic)"
lineSeries1.LabelsAppearance.Visible = False
lineSeries1.TooltipsAppearance.Color = System.Drawing.Color.White
lineSeries1.TooltipsAppearance.DataFormatString = "{0}%"
lineSeries1.MarkersAppearance.Visible = False
'Create a sample SeriesItems for the "Lower Threshold" LineSeries
For i As Integer = 1 To 12
Dim item1 As New CategorySeriesItem()
item1.Y = 10
lineSeries1.SeriesItems.Add(item1)
Next
RadHtmlChart1.PlotArea.Series.Add(lineSeries1)
'Access and modify the 11th SeriesItem of the "In 2010 (Markup)" ColumnSeries
TryCast(RadHtmlChart1.PlotArea.Series(0), ColumnSeries).SeriesItems(10).Y = CDec(44.0)
'Create an additional SeriesItem for the "In 2010 (Markup)" ColumnSeries
Dim seriesItem1 As New CategorySeriesItem()
seriesItem1.Y = CDec(43.5)
TryCast(RadHtmlChart1.PlotArea.Series(0), ColumnSeries).SeriesItems.Add(seriesItem1)
End Sub
Protected Function GetData() As DataTable
Dim dt As New DataTable()
dt.Columns.Add("UpperThreshold")
dt.Columns.Add("DummyData")
For i As Integer = 0 To 11
dt.Rows.Add(40, 30)
Next
Return dt
End Function