HtmlChart - Line Chart



Week 1 Line Series Settings

Markers Styles
Line Styles
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates a RadHtmlChart control; configured as a Line chart (it uses LineSeries), which can be used for displaying categorical data. You can easily modify the appearance of a RadHtmlChart and the data it displays using the attached configurator. It allows you to set a number of properties and then see the change in the chart above.

Spline (Smooth) and Step Line appearance of the series can be configured via the LineStyle property in the LineAppearance tag since Q1 2014 by choosing one of the options from the ExtendedLineStyle enumeration:

  • Normal — the default series appearance.
  • Step — the individual series items are connected with vertical and horizontal lines to form a step-like progression.
  • Smooth — the series items are connected with a fitted curve which represents a rough approximation of the missing data points.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.LineChart.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true" Skin="Silk">
            <Appearance>
                <FillStyle BackgroundColor="Transparent"></FillStyle>
            </Appearance>
            <ChartTitle Text="Server CPU Load By Days">
                <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance BackgroundColor="Transparent" Position="Bottom">
                </Appearance>
            </Legend>
            <PlotArea>
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false">
                    <Items>
                        <telerik:AxisItem LabelText="Monday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Tuesday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Wednesday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Thursday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Friday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Saturday"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Sunday"></telerik:AxisItem>
                    </Items>
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Days">
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                    MaxValue="100" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                    Step="25">
                    <LabelsAppearance DataFormatString="{0}%" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="CPU Load">
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:LineSeries Name="Week 1">
                        <Appearance>
                            <FillStyle BackgroundColor="#5ab7de"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0}%" Position="Above">
                        </LabelsAppearance>
                        <LineAppearance Width="1" />
                        <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="8" BorderColor="#5ab7de"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="35"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="52"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="18"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="10"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="6"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:LineSeries>
                    <telerik:LineSeries Name="Week 2">
                        <Appearance>
                            <FillStyle BackgroundColor="#2d6b99"></FillStyle>
                        </Appearance>
                        <LabelsAppearance DataFormatString="{0}%" Position="Above">
                        </LabelsAppearance>
                        <LineAppearance Width="1" />
                        <MarkersAppearance MarkersType="Square" BackgroundColor="#2d6b99" Size="8" BorderColor="#2d6b99"
                            BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="50"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="20"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="93"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="43"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                        </SeriesItems>
                    </telerik:LineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    <br />
    <br />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="LineChart" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Week 1 Line Series Settings">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Markers Styles">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxMarkersType" AutoPostBack="true" Label="Type"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="MarkersBorderColor" AutoPostBack="true" Label="Border Color" CssClass="fb-sized"></qsf:ColorPicker>
                            <qsf:ColorPicker runat="server" ID="MarkersBackgroundColor" AutoPostBack="true" Label="Background Color" CssClass="fb-sized"></qsf:ColorPicker>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="MarkersBorderWidth" AutoPostBack="true" Value="2" MinValue="2" MaxValue="8"
                                EmptyMessage="Enter a value" Label="Border Width" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox runat="server" ID="MarkersSize" AutoPostBack="true" Label="Size" Value="6" MinValue="6" MaxValue="14"
                                EmptyMessage="Enter a value" WrapperCssClass="fb-sized">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Line Styles">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBoxLineStyle" AutoPostBack="true" Label="Style"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="MissingValues" AutoPostBack="true" Label="Missing values"></qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:NumericTextBox runat="server" ID="LineWidth" AutoPostBack="true" Label="Width" Value="1" MinValue="1" MaxValue="5"
                                EmptyMessage="Enter a value">
                                <NumberFormat DecimalDigits="0" />
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?