<%@ 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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
</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>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="BubbleChart" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk"></telerik:RadAjaxLoadingPanel>
<qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" >
<Views>
<qsf:View>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
<ul class="fb-group">
<li>
<strong>North America</strong>
</li>
<li>
<qsf:NumericTextBox runat="server" ID="NtbMaxSizeNA" AutoPostBack="true" Size="Medium" Label="MaxSize">
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="NtbMinSizeNA" AutoPostBack="true" Size="Medium" Label="MinSize">
</qsf:NumericTextBox>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
<ul class="fb-group">
<li>
<strong>Europe</strong>
</li>
<li>
<qsf:NumericTextBox runat="server" ID="NtbMaxSizeEU" AutoPostBack="true" Size="Medium" Label="MaxSize">
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="NtbMinSizeEU" AutoPostBack="true" Size="Medium" Label="MinSize">
</qsf:NumericTextBox>
</li>
</ul>
</qsf:ConfiguratorColumn><qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium">
<ul class="fb-group">
<li>
<strong>Middle East</strong>
</li>
<li>
<qsf:NumericTextBox runat="server" ID="NtbMaxSizeME" AutoPostBack="true" Size="Medium" Label="MaxSize">
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="NtbMinSizeME" AutoPostBack="true" Size="Medium" Label="MinSize">
</qsf:NumericTextBox>
</li>
</ul>
</qsf:ConfiguratorColumn>
</qsf:View>
</Views>
</qsf:ConfiguratorPanel>
</form>
</body>
</html>