HtmlChart - Bubble Chart

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

The demo shows how you can configure the Bubble type (it uses BubbleSeries) of RadHtmlChart to display three dimensions of data.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.BubbleChart.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="BubbleChart" Width="800" Height="500" Transitions="true" Skin="Silk">
            <ChartTitle Text="Correlation between life expectancy, fertility rate and population of some world countries for 2010">
                <Appearance Align="Left" Position="Top">
                </Appearance>
            </ChartTitle>
            <PlotArea>
                <XAxis AxisCrossingValue="65" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false" MinValue="65" MaxValue="85" Step="5">
                    <LabelsAppearance RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <MajorGridLines Width="1"></MajorGridLines>
                    <MinorGridLines Width="1"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Life Expectancy">
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" MajorTickSize="1" MajorTickType="Outside"
                    MaxValue="5" MinorTickSize="1" MinorTickType="Outside" MinValue="1" Reversed="false"
                    Step="1">
                    <LabelsAppearance RotationAngle="0" Skip="0" Step="1">
                    </LabelsAppearance>
                    <MajorGridLines Width="1"></MajorGridLines>
                    <MinorGridLines Width="1"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Fertility Rate">
                    </TitleAppearance>
                </YAxis>
                <Series>
                    <telerik:BubbleSeries Name="North America">
                        <Appearance FillStyle-BackgroundColor="#add8e6">
                        </Appearance>
                        <TooltipsAppearance Color="White" DataFormatString="Country: {3}<br />Life Expectancy: {0}<br />Fertility Rate: {1}<br />Region: North America<br />Population: {2}" />
                        <SeriesItems>
                            <telerik:BubbleSeriesItem Size="33739900" X="80.66" Y="1.67" Tooltip="CAN" />
                            <telerik:BubbleSeriesItem Size="307007000" X="78.09" Y="2.05" Tooltip="USA" />
                        </SeriesItems>
                    </telerik:BubbleSeries>
                    <telerik:BubbleSeries Name="Europe">
                        <Appearance FillStyle-BackgroundColor="#6ab2c9">
                        </Appearance>
                        <TooltipsAppearance Color="White" DataFormatString="Country: {3}<br />Life Expectancy: {0}<br />Fertility Rate: {1}<br />Region: Europe<br />Population: {2}" />
                        <SeriesItems>
                            <telerik:BubbleSeriesItem Size="81902307" X="79.84" Y="1.36" Tooltip="DEU" />
                            <telerik:BubbleSeriesItem Size="5523095" X="78.6" Y="1.84" Tooltip="DNK" />
                            <telerik:BubbleSeriesItem Size="61801570" X="80.05" Y="2" Tooltip="GBR" />
                            <telerik:BubbleSeriesItem Size="141850000" X="68.6" Y="1.54" Tooltip="RUS" />
                        </SeriesItems>
                    </telerik:BubbleSeries>
                    <telerik:BubbleSeries Name="Middle East">
                        <Appearance FillStyle-BackgroundColor="#328fae">
                        </Appearance>
                        <TooltipsAppearance Color="White" DataFormatString="Country: {3}<br />Life Expectancy: {0}<br />Fertility Rate: {1}<br />Region: Middle East<br />Population: {2}" />
                        <SeriesItems>
                            <telerik:BubbleSeriesItem Size="79716203" X="72.73" Y="2.78" Tooltip="EGY" />
                            <telerik:BubbleSeriesItem Size="73137148" X="72.49" Y="1.7" Tooltip="IRN" />
                            <telerik:BubbleSeriesItem Size="31090763" X="68.09" Y="4.77" Tooltip="IRQ" />
                            <telerik:BubbleSeriesItem Size="7485600" X="81.55" Y="2.96" Tooltip="ISR" />
                        </SeriesItems>
                    </telerik:BubbleSeries>
                </Series>
            </PlotArea>
            <Legend>
                <Appearance Position="Right">
                </Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?