<%@ Page Language="vb" %>
<%@ 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 rel="Stylesheet" href="styles.css" type="text/css" />
</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 no-bg size-wide">
<div class="sparklines-wrapper">
<div class="weather-stats">
<h2>UK Autumn Weather Statistics (1972 - 2012)</h2>
<div class="row">
<span class="item">Mean Temp</span>
<span class="spark">
<telerik:RadHtmlChart ID="MeanTempChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
<PlotArea>
<CommonTooltipsAppearance Color="White" Shared="false" />
<Series>
<telerik:LineSeries>
<Appearance FillStyle-BackgroundColor="RosyBrown"></Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="8.95" />
<telerik:CategorySeriesItem Y="9.47" />
<telerik:CategorySeriesItem Y="8.72" />
<telerik:CategorySeriesItem Y="9.21" />
<telerik:CategorySeriesItem Y="9.13" />
<telerik:CategorySeriesItem Y="9.47" />
<telerik:CategorySeriesItem Y="9.46" />
<telerik:CategorySeriesItem Y="8.86" />
<telerik:CategorySeriesItem Y="8.83" />
<telerik:CategorySeriesItem Y="7.7" />
<telerik:CategorySeriesItem Y="8.9" />
<telerik:CategorySeriesItem Y="8.72" />
<telerik:CategorySeriesItem Y="9.35" />
<telerik:CategorySeriesItem Y="9.64" />
<telerik:CategorySeriesItem Y="9.31" />
<telerik:CategorySeriesItem Y="7.98" />
<telerik:CategorySeriesItem Y="7.77" />
<telerik:CategorySeriesItem Y="8.61" />
<telerik:CategorySeriesItem Y="9.39" />
<telerik:CategorySeriesItem Y="10.01" />
<telerik:CategorySeriesItem Y="10.29" />
<telerik:CategorySeriesItem Y="9.27" />
<telerik:CategorySeriesItem Y="9.36" />
<telerik:CategorySeriesItem Y="9.07" />
<telerik:CategorySeriesItem Y="9.57" />
<telerik:CategorySeriesItem Y="9.86" />
<telerik:CategorySeriesItem Y="8.73" />
<telerik:CategorySeriesItem Y="10.25" />
<telerik:CategorySeriesItem Y="9.86" />
<telerik:CategorySeriesItem Y="10.18" />
<telerik:CategorySeriesItem Y="9.8" />
<telerik:CategorySeriesItem Y="9.54" />
<telerik:CategorySeriesItem Y="10.38" />
<telerik:CategorySeriesItem Y="10.41" />
<telerik:CategorySeriesItem Y="10.4" />
<telerik:CategorySeriesItem Y="10.32" />
<telerik:CategorySeriesItem Y="11.39" />
<telerik:CategorySeriesItem Y="10.44" />
<telerik:CategorySeriesItem Y="9.77" />
<telerik:CategorySeriesItem Y="9.89" />
<telerik:CategorySeriesItem Y="8.19" />
<telerik:CategorySeriesItem Y="11.26" />
<telerik:CategorySeriesItem Y="9.46" />
</SeriesItems>
</telerik:LineSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</span>
<span class="value">9.46<span>°C</span>
</span>
</div>
<div class="row">
<span class="item">Sunshine Hours
</span>
<span class="spark">
<telerik:RadHtmlChart ID="SunshineChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
<PlotArea>
<CommonTooltipsAppearance Color="White" Shared="false" />
<Series>
<telerik:ColumnSeries>
<Appearance FillStyle-BackgroundColor="OrangeRed"></Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="260.7" />
<telerik:CategorySeriesItem Y="266.2" />
<telerik:CategorySeriesItem Y="249.3" />
<telerik:CategorySeriesItem Y="268.4" />
<telerik:CategorySeriesItem Y="257.6" />
<telerik:CategorySeriesItem Y="297.1" />
<telerik:CategorySeriesItem Y="289.9" />
<telerik:CategorySeriesItem Y="268" />
<telerik:CategorySeriesItem Y="213.7" />
<telerik:CategorySeriesItem Y="250" />
<telerik:CategorySeriesItem Y="244.9" />
<telerik:CategorySeriesItem Y="234.2" />
<telerik:CategorySeriesItem Y="257.5" />
<telerik:CategorySeriesItem Y="248.4" />
<telerik:CategorySeriesItem Y="279.2" />
<telerik:CategorySeriesItem Y="249.1" />
<telerik:CategorySeriesItem Y="264.6" />
<telerik:CategorySeriesItem Y="234.8" />
<telerik:CategorySeriesItem Y="252.6" />
<telerik:CategorySeriesItem Y="311.8" />
<telerik:CategorySeriesItem Y="297.3" />
<telerik:CategorySeriesItem Y="251.6" />
<telerik:CategorySeriesItem Y="250.6" />
<telerik:CategorySeriesItem Y="205.7" />
<telerik:CategorySeriesItem Y="267.2" />
<telerik:CategorySeriesItem Y="330.8" />
<telerik:CategorySeriesItem Y="275.7" />
<telerik:CategorySeriesItem Y="285.2" />
<telerik:CategorySeriesItem Y="247.7" />
<telerik:CategorySeriesItem Y="282" />
<telerik:CategorySeriesItem Y="267.7" />
<telerik:CategorySeriesItem Y="287.2" />
<telerik:CategorySeriesItem Y="252.3" />
<telerik:CategorySeriesItem Y="343.6" />
<telerik:CategorySeriesItem Y="271.3" />
<telerik:CategorySeriesItem Y="283.4" />
<telerik:CategorySeriesItem Y="299.9" />
<telerik:CategorySeriesItem Y="290.6" />
<telerik:CategorySeriesItem Y="280.7" />
<telerik:CategorySeriesItem Y="296.2" />
<telerik:CategorySeriesItem Y="295.3" />
<telerik:CategorySeriesItem Y="283.8" />
<telerik:CategorySeriesItem Y="263.8" />
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</span>
<span class="value">263.8<span>h</span>
</span>
</div>
<div class="row">
<span class="item">Rainfall mm
</span>
<span class="spark">
<telerik:RadHtmlChart ID="RainfallChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
<PlotArea>
<CommonTooltipsAppearance Color="White" Shared="false" />
<Series>
<telerik:AreaSeries>
<Appearance FillStyle-BackgroundColor="DodgerBlue"></Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="323.4" />
<telerik:CategorySeriesItem Y="233.8" />
<telerik:CategorySeriesItem Y="244" />
<telerik:CategorySeriesItem Y="222.1" />
<telerik:CategorySeriesItem Y="358" />
<telerik:CategorySeriesItem Y="208" />
<telerik:CategorySeriesItem Y="240.8" />
<telerik:CategorySeriesItem Y="312.4" />
<telerik:CategorySeriesItem Y="279.8" />
<telerik:CategorySeriesItem Y="345.2" />
<telerik:CategorySeriesItem Y="339.2" />
<telerik:CategorySeriesItem Y="358.9" />
<telerik:CategorySeriesItem Y="365.4" />
<telerik:CategorySeriesItem Y="302.2" />
<telerik:CategorySeriesItem Y="305.9" />
<telerik:CategorySeriesItem Y="306.8" />
<telerik:CategorySeriesItem Y="380.1" />
<telerik:CategorySeriesItem Y="277.1" />
<telerik:CategorySeriesItem Y="341.5" />
<telerik:CategorySeriesItem Y="258.3" />
<telerik:CategorySeriesItem Y="368.5" />
<telerik:CategorySeriesItem Y="250.5" />
<telerik:CategorySeriesItem Y="385.3" />
<telerik:CategorySeriesItem Y="338.3" />
<telerik:CategorySeriesItem Y="383.1" />
<telerik:CategorySeriesItem Y="264.1" />
<telerik:CategorySeriesItem Y="236.2" />
<telerik:CategorySeriesItem Y="268.1" />
<telerik:CategorySeriesItem Y="417" />
<telerik:CategorySeriesItem Y="400.6" />
<telerik:CategorySeriesItem Y="497.8" />
<telerik:CategorySeriesItem Y="295.6" />
<telerik:CategorySeriesItem Y="430.4" />
<telerik:CategorySeriesItem Y="214" />
<telerik:CategorySeriesItem Y="395.6" />
<telerik:CategorySeriesItem Y="321.5" />
<telerik:CategorySeriesItem Y="372.9" />
<telerik:CategorySeriesItem Y="387.7" />
<telerik:CategorySeriesItem Y="446.4" />
<telerik:CategorySeriesItem Y="394.2" />
<telerik:CategorySeriesItem Y="239.8" />
<telerik:CategorySeriesItem Y="368.4" />
<telerik:CategorySeriesItem Y="473.1" />
</SeriesItems>
</telerik:AreaSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</span>
<span class="value">473.1<span>mm</span>
</span>
</div>
<div class="row">
<span class="item">Days of Air Frost
</span>
<span class="spark">
<telerik:RadHtmlChart ID="AirFrostChart" runat="server" Layout="Sparkline" Width="200px" Height="60px" Skin="Silk">
<PlotArea>
<CommonTooltipsAppearance Color="White" Shared="false" />
<Series>
<telerik:BarSeries>
<Appearance FillStyle-BackgroundColor="SkyBlue"></Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="10.3" />
<telerik:CategorySeriesItem Y="6.6" />
<telerik:CategorySeriesItem Y="5.5" />
<telerik:CategorySeriesItem Y="9.3" />
<telerik:CategorySeriesItem Y="3.3" />
<telerik:CategorySeriesItem Y="6.9" />
<telerik:CategorySeriesItem Y="8.8" />
<telerik:CategorySeriesItem Y="6.8" />
<telerik:CategorySeriesItem Y="9.4" />
<telerik:CategorySeriesItem Y="15.2" />
<telerik:CategorySeriesItem Y="8.6" />
<telerik:CategorySeriesItem Y="10.8" />
<telerik:CategorySeriesItem Y="7.5" />
<telerik:CategorySeriesItem Y="7.4" />
<telerik:CategorySeriesItem Y="8.3" />
<telerik:CategorySeriesItem Y="13.3" />
<telerik:CategorySeriesItem Y="10.3" />
<telerik:CategorySeriesItem Y="10.2" />
<telerik:CategorySeriesItem Y="5.2" />
<telerik:CategorySeriesItem Y="4.4" />
<telerik:CategorySeriesItem Y="2.6" />
<telerik:CategorySeriesItem Y="8.7" />
<telerik:CategorySeriesItem Y="5.9" />
<telerik:CategorySeriesItem Y="6.7" />
<telerik:CategorySeriesItem Y="4.8" />
<telerik:CategorySeriesItem Y="8.8" />
<telerik:CategorySeriesItem Y="12.8" />
<telerik:CategorySeriesItem Y="5.5" />
<telerik:CategorySeriesItem Y="5.2" />
<telerik:CategorySeriesItem Y="4.1" />
<telerik:CategorySeriesItem Y="3.8" />
<telerik:CategorySeriesItem Y="9.7" />
<telerik:CategorySeriesItem Y="1.9" />
<telerik:CategorySeriesItem Y="8.2" />
<telerik:CategorySeriesItem Y="4.9" />
<telerik:CategorySeriesItem Y="5.9" />
<telerik:CategorySeriesItem Y="5.8" />
<telerik:CategorySeriesItem Y="2.7" />
<telerik:CategorySeriesItem Y="6.8" />
<telerik:CategorySeriesItem Y="7.1" />
<telerik:CategorySeriesItem Y="17.3" />
<telerik:CategorySeriesItem Y="3.3" />
<telerik:CategorySeriesItem Y="6.4" />
</SeriesItems>
</telerik:BarSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
</span>
<span class="value">6.4<span>d</span>
</span>
</div>
</div>
<div class="heating">
<h2>Heating Working Time:
</h2>
<ul class="pie-list">
<li><span class="stats">
<telerik:RadHtmlChart ID="WinterChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk">
<PlotArea>
<Series>
<telerik:PieSeries>
<TooltipsAppearance Color="White" />
<SeriesItems>
<telerik:PieSeriesItem Y="5" BackgroundColor="DodgerBlue" />
<telerik:PieSeriesItem Y="95" BackgroundColor="OrangeRed" />
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
<ChartTitle Text="Winter">
<Appearance Visible="true">
<TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
</Appearance>
</ChartTitle>
</telerik:RadHtmlChart>
</span></li>
<li><span class="stats">
<telerik:RadHtmlChart ID="SpringChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk">
<PlotArea>
<Series>
<telerik:PieSeries>
<TooltipsAppearance Color="White" />
<SeriesItems>
<telerik:PieSeriesItem Y="75" BackgroundColor="DodgerBlue" />
<telerik:PieSeriesItem Y="25" BackgroundColor="OrangeRed" />
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
<ChartTitle Text="Spring">
<Appearance Visible="true">
<TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
</Appearance>
</ChartTitle>
</telerik:RadHtmlChart>
</span></li>
<li><span class="stats">
<telerik:RadHtmlChart ID="SummerChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk">
<PlotArea>
<Series>
<telerik:PieSeries>
<TooltipsAppearance Color="White" />
<SeriesItems>
<telerik:PieSeriesItem Y="85" BackgroundColor="DodgerBlue" />
<telerik:PieSeriesItem Y="15" BackgroundColor="OrangeRed" />
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
<ChartTitle Text="Summer">
<Appearance Visible="true">
<TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
</Appearance>
</ChartTitle>
</telerik:RadHtmlChart>
</span></li>
<li><span class="stats">
<telerik:RadHtmlChart ID="AutumnChart" runat="server" Layout="Sparkline" Width="100px" Height="100px" Skin="Silk">
<PlotArea>
<Series>
<telerik:PieSeries>
<TooltipsAppearance Color="White" />
<SeriesItems>
<telerik:PieSeriesItem Y="70" BackgroundColor="DodgerBlue" />
<telerik:PieSeriesItem Y="30" BackgroundColor="OrangeRed" />
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
<ChartTitle Text="Autumn">
<Appearance Visible="true">
<TextStyle Margin="-3px" FontFamily="Segoe UI,Segoe,Roboto,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif" />
</Appearance>
</ChartTitle>
</telerik:RadHtmlChart>
</span></li>
</ul>
</div>
</div>
</div>
</form>
</body>
</html>