HtmlChart - Scatter Line Chart

Demo Configurator

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

The demo shows a Scatter Line series in RadHtmlChart, which is useful for displaying numerical data.

Spline (Smooth) and normal 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 LineStyle enumeration:

  • Normal — the default series appearance.
  • Smooth — the series items are connected with a fitted curve which represents a rough approximation of the missing data points.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.ScatterLineChart.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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="ScatterLineChart" Width="800" Height="500" Skin="Silk">
            <PlotArea>
                <Series>
                    <telerik:ScatterLineSeries Name="0.8C">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="10" Y="10"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="15" Y="20"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem />
                            <telerik:ScatterSeriesItem X="32" Y="40"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="43" Y="50"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="55" Y="60"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="60" Y="70"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                        <LabelsAppearance DataFormatString="{1}% in {0} minutes" Position="Below"></LabelsAppearance>
                        <MarkersAppearance MarkersType="Square" BackgroundColor="#5cb8e3" Size="8" BorderColor="#5cb8e3" BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance BackgroundColor="#5cb8e3" Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
                    </telerik:ScatterLineSeries>
                    <telerik:ScatterLineSeries Name="1.6C">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="10" Y="40"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="17" Y="50"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="18" Y="65"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem />
                            <telerik:ScatterSeriesItem X="35" Y="90"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="47" Y="95"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="60" Y="100"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                        <LabelsAppearance DataFormatString="{1}% in {0} minutes" Position="Below"></LabelsAppearance>
                        <MarkersAppearance Size="8" BorderColor="#90b720" BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance BackgroundColor="#90b720" Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
                    </telerik:ScatterLineSeries>
                    <telerik:ScatterLineSeries Name="3.1C">
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="10" Y="70"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="13" Y="90"></telerik:ScatterSeriesItem>
                            <telerik:ScatterSeriesItem X="25" Y="100"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                        <LabelsAppearance DataFormatString="{1}% in {0} minutes" Position="Below"></LabelsAppearance>
                        <MarkersAppearance MarkersType="Square" BackgroundColor="#eb6d17" Size="8" BorderColor="#eb6d17" BorderWidth="2"></MarkersAppearance>
                        <TooltipsAppearance BackgroundColor="#eb6d17" Color="White" DataFormatString="{1}% in {0} minutes"></TooltipsAppearance>
                    </telerik:ScatterLineSeries>
                </Series>
                <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside" MinValue="0" MaxValue="90" Step="10">
                    <LabelsAppearance DataFormatString="{0}m" RotationAngle="0"></LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7"></MinorGridLines>
                    <TitleAppearance Position="Center" Text="Time"></TitleAppearance>
                </XAxis>
                <YAxis Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside" MaxValue="100" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Step="20">
                    <LabelsAppearance DataFormatString="{0}%" RotationAngle="0"></LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                    <TitleAppearance Position="Center" Text="Charge"></TitleAppearance>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Charge current vs. charge time"></ChartTitle>
            <Legend>
                <Appearance Position="Bottom"></Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ScatterLineChart" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="Markers Styles">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="MarkersType" AutoPostBack="true" Label="Type" />
                        </li>
                        <li>
                            <qsf:ColorPicker runat="server" ID="MarkersBorderColor" AutoPostBack="true" Label="Border color" CssClass="fb-sized" />
                            <qsf:ColorPicker runat="server" ID="MarkersBackgroundColor" AutoPostBack="true" Label="Background color" CssClass="fb-sized" />
                        </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:DropDownList runat="server" ID="LineStyle" AutoPostBack="true" Label="Style" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="MissingValues" AutoPostBack="true" Label="Missing values" />
                        </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?