New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Scatter Chart

This example demonstrates an ASP.NET AJAX Chart control, configured as a Scatter Chart (it uses ScatterSeries).

Related Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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="ScatterChart" Width="800" Height="500" Transitions="true" Skin="Silk"> 
            <ChartTitle Text="Performance / Price for CPUs">
                <Appearance Align="Center" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Bottom">
                </Appearance>
            </Legend>
            <PlotArea>
                <XAxis AxisCrossingValue="0" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false" MinValue="0" MaxValue="1000" Step="200">
                    <LabelsAppearance DataFormatString="${0}" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Price">
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" MajorTickSize="1" MajorTickType="Outside"
                    MaxValue="220" MinorTickSize="1" MinorTickType="Outside" MinValue="80" Reversed="false"
                    Step="20">
                    <LabelsAppearance DataFormatString="{0}%" RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Performance Ratio">
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:ScatterSeries Name="Pentium D 915">
                        <Appearance FillStyle-BackgroundColor="LightBlue">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="120" Y="100"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                    <telerik:ScatterSeries Name="Pentium D 950">
                        <Appearance FillStyle-BackgroundColor="Pink">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="160" Y="118"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                    <telerik:ScatterSeries Name="Athlon 64 X2 4200+">
                        <Appearance FillStyle-BackgroundColor="Magenta">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="170" Y="125"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                    <telerik:ScatterSeries Name="Athlon 64 X2 4600+">
                        <Appearance FillStyle-BackgroundColor="Cyan">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="205" Y="138"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                    <telerik:ScatterSeries Name="Athlon 64 FX-62">
                        <Appearance FillStyle-BackgroundColor="Purple">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="800" Y="147"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                    <telerik:ScatterSeries Name="Core 2 Duo E6400">
                        <Appearance FillStyle-BackgroundColor="Orange">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="170" Y="130"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                    <telerik:ScatterSeries Name="Core 2 Duo E6600">
                        <Appearance FillStyle-BackgroundColor="Blue">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="305" Y="163"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                    <telerik:ScatterSeries Name="Core 2 Duo E6700">
                        <Appearance FillStyle-BackgroundColor="Green">
                        </Appearance>
                        <MarkersAppearance MarkersType="Circle" Size="8" BorderWidth="2"></MarkersAppearance>
                        <SeriesItems>
                            <telerik:ScatterSeriesItem X="530" Y="177"></telerik:ScatterSeriesItem>
                        </SeriesItems>
                    </telerik:ScatterSeries>
                </Series>
            </PlotArea>
            <Legend>
                <Appearance Position="Right">
                </Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance