Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Chart / Silverlight RadChart


Example Configuration
Show 3D chart:
Series color:
       
AxisXTitle:
Show item tooltips.
Show X axis gridlines.
AxisYTitle: Show item labels.  Show Y axis gridlines.
Axis X format:
select
Show X axis.  Show X axis striplines.
Axis Y format:
select
Show Y axis. Show Y axis striplines.
Chart item format:
select
Did you know that you can add Telerik Silverlight Charts to your ASP.NET applications?

RadControls for Silverlight


  • This example demonstrates how to integrate RadChart for Silverlight in ASP.NET web site.

    The approach is described in details in this blog post. In general, the Silverlight page is registered for access through javascript code thanks to the call to HtmlPage.RegisterScriptableObject(...) method. The first parameter of this method is the name, which will be used to access the page in the javascript code. In addition, all the members, that need to be exposed for access in the client script are marked with the System.Windows.Browser.ScriptableMemberAttribute attribute. The configuration controls below the chart fire client events when their value is changed. In the corresponding javascript method, the value is set to the corresponding scriptable member of the managed object.

    You can find the Silverlight project here.

    For more details about RadChart for Silverlight, please visit our online examples here.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Chart_SilverLight_DefaultCS" %>

    <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
        TagPrefix="asp" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
        <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#" ShowSkinChooser="false">
        </qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true" />
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

            <script type="text/javascript">
                var silverlightControl;
                function pluginLoaded(sender) {
                    // get reference to the silverlight control on the page
                    silverlightControl = sender.get_element();
                }
                function ColorChanged(sender, args) {
                    silverlightControl.content.slChartPage.SeriesColor = sender.get_selectedColor();
                }
                function Show3D_Click(sender) {
                    var checked = sender.checked;
                    silverlightControl.content.slChartPage.Show3D = checked;
                    if (checked) {
                        $get("ColorPicker").style.display = "none";
                        $get("ColorPickerLbl").style.display = "none";
                        $get("ShowTooltips").style.display = "none";
                        $get("ShowTooltipsLbl").style.display = "none";
                        $get("HideElements").style.display = "block";
                        $get("HideElementsLbl").style.display = "block";
                        $get("HideElementsOnRotation").checked = false;
                    }
                    else {
                        $get("ColorPicker").style.display = "block";
                        $get("ColorPickerLbl").style.display = "block";
                        $get("ShowTooltips").style.display = "block";
                        $get("ShowTooltipsLbl").style.display = "block";
                        $get("ShowItemTooltips").checked = false;
                        $get("HideElements").style.display = "none";
                        $get("HideElementsLbl").style.display = "none";
                    }
                }
                function AxisXTitleTextBox_Changed(sender, args) {
                    silverlightControl.content.slChartPage.AxisXTitle = args.get_newValue();
                }
                function AxisYTitleTextBox_Changed(sender, args) {
                    silverlightControl.content.slChartPage.AxisYTitle = args.get_newValue();
                }
                function ShowItemLabels_Click(sender) {
                    silverlightControl.content.slChartPage.ShowItemLabels = sender.checked;
                }
                function ShowItemTooltips_Click(sender) {
                    silverlightControl.content.slChartPage.ShowItemTooltips = sender.checked;
                }
                function HideElementsOnRotation_Click(sender) {
                    silverlightControl.content.slChartPage.HideElementsOnRotation = sender.checked;
                }
                function ShowXAxis_Click(sender) {
                    silverlightControl.content.slChartPage.ShowXAxis = sender.checked;
                }
                function ShowYAxis_Click(sender) {
                    silverlightControl.content.slChartPage.ShowYAxis = sender.checked;
                }
                function ShowXAxisGridlines_Click(sender) {
                    silverlightControl.content.slChartPage.ShowXAxisGridlines = sender.checked;
                }
                function ShowYAxisGridlines_Click(sender) {
                    silverlightControl.content.slChartPage.ShowYAxisGridlines = sender.checked;
                }
                function ShowXAxisStriplines_Click(sender) {
                    silverlightControl.content.slChartPage.ShowXAxisStriplines = sender.checked;
                }
                function ShowYAxisStriplines_Click(sender) {
                    silverlightControl.content.slChartPage.ShowYAxisStriplines = sender.checked;
                }
                function AxisXFormat_Changed(sender, args) {
                    silverlightControl.content.slChartPage.AxisXFormat = args.get_item().get_text();
                }
                function AxisYFormat_Changed(sender, args) {
                    silverlightControl.content.slChartPage.AxisYFormat = args.get_item().get_text();
                }
                function ItemsFormat_Changed(sender, args) {
                    silverlightControl.content.slChartPage.ItemsFormat = args.get_item().get_text();
                }
                function SeriesColorCombo_Changed(sender, args) {
                    silverlightControl.content.slChartPage.SeriesColor = args.get_item().get_text();
                }
            </script>

        </telerik:RadScriptBlock>
        <div style="height: 400px; width: 750px">
    <asp:Silverlight ID="Xaml1" runat="server" Source="~/Chart/Examples/Silverlight/RadChart.xap"
    MinimumVersion="2.0.30728.0" Width="100%" Height="100%" OnPluginLoaded="pluginLoaded" />
        </div>
        <br />
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="True">
            <table>
                <tr>
                    <td>
                        Show 3D chart:
                    </td>
                    <td>
                        <asp:CheckBox ID="Show3D" runat="server" onclick="Show3D_Click(this);" />
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="ColorPickerLbl">
                            Series color:
                        </div>
                    </td>
                    <td>
                        <div id="ColorPicker">
                            <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowEmptyColor="false"
                                Preset="Standard" OnClientColorChange="ColorChanged">
                            </telerik:RadColorPicker>
                        </div>
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        AxisXTitle:
                    </td>
                    <td>
                        <telerik:RadTextBox ID="AxisXTitleTextBox" runat="server" Width="220px">
                            <ClientEvents OnValueChanged="AxisXTitleTextBox_Changed" />
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        <div id="ShowTooltips">
                            <asp:CheckBox ID="ShowItemTooltips" runat="server" onclick="ShowItemTooltips_Click(this);" />
                        </div>
                        <div id="HideElements" style="display: none;">
                            <asp:CheckBox ID="HideElementsOnRotation" runat="server" onclick="HideElementsOnRotation_Click(this);" />
                            <br />
                        </div>
                    </td>
                    <td>
                        <div id="ShowTooltipsLbl">
                            Show item tooltips.
                        </div>
                        <div id="HideElementsLbl" style="display: none;">
                            Hide elements on rotation
                        </div>
                    </td>
                    <td>
                        <asp:CheckBox ID="ShowXAxisGridlines" runat="server" onclick="ShowXAxisGridlines_Click(this);" />
                    </td>
                    <td>
                        Show X axis gridlines.
                    </td>
                </tr>
                <tr>
                    <td>
                        AxisYTitle:
                    </td>
                    <td>
                        <telerik:RadTextBox ID="AxisYTitleTextBox" runat="server" Width="220px">
                            <ClientEvents OnValueChanged="AxisYTitleTextBox_Changed" />
                        </telerik:RadTextBox>
                    </td>
                    <td>
                        <asp:CheckBox ID="ShowItemLabels" runat="server" Checked="true" onclick="ShowItemLabels_Click(this);" />
                    </td>
                    <td>
                        Show item labels.
                    </td>
                    <td>
                        <asp:CheckBox ID="ShowYAxisGridlines" runat="server" onclick="ShowYAxisGridlines_Click(this);" />
                    </td>
                    <td>
                        &nbsp;Show Y axis gridlines.
                    </td>
                </tr>
                <tr>
                    <td>
                        Axis X format:
                    </td>
                    <td>
                        <telerik:RadComboBox ID="AxisXFormat" runat="server" OnClientSelectedIndexChanged="AxisXFormat_Changed"
                            Width="220px">
                            <Items>
                                <telerik:RadComboBoxItem Text="MMM/dd/yy" />
                                <telerik:RadComboBoxItem Text="MM/dd/yyyy" />
                                <telerik:RadComboBoxItem Text="Day: #VAL{dddd}" />
                                <telerik:RadComboBoxItem Text="HH:mm:ss" />
                                <telerik:RadComboBoxItem Text="yyyy MMMM" />
                            </Items>
                        </telerik:RadComboBox>
                    </td>
                    <td>
                        <asp:CheckBox ID="ShowXAxis" runat="server" Checked="true" onclick="ShowXAxis_Click(this);" />
                    </td>
                    <td>
                        Show X axis.
                    </td>
                    <td>
                        <asp:CheckBox ID="ShowXAxisStriplines" runat="server" onclick="ShowXAxisStriplines_Click(this);" />
                    </td>
                    <td>
                        &nbsp;Show X axis striplines.
                    </td>
                </tr>
                <tr>
                    <td>
                        Axis Y format:
                    </td>
                    <td>
                        <telerik:RadComboBox ID="AxisYFormat" runat="server" OnClientSelectedIndexChanged="AxisYFormat_Changed"
                            Width="220px">
                            <Items>
                                <telerik:RadComboBoxItem Text="N" />
                                <telerik:RadComboBoxItem Text="C" />
                                <telerik:RadComboBoxItem Text="Amount: #VAL{C0}" />
                            </Items>
                        </telerik:RadComboBox>
                    </td>
                    <td>
                        <asp:CheckBox ID="ShowYAxis" runat="server" Checked="true" onclick="ShowYAxis_Click(this);" />
                    </td>
                    <td>
                        Show Y axis.
                    </td>
                    <td>
                        <asp:CheckBox ID="ShowYAxisStriplines" runat="server" Checked="true" onclick="ShowYAxisStriplines_Click(this);" />
                    </td>
                    <td>
                        Show Y axis striplines.
                    </td>
                </tr>
                <tr>
                    <td>
                        Chart item format:
                    </td>
                    <td>
                        <telerik:RadComboBox ID="ChartItemFormat" runat="server" OnClientSelectedIndexChanged="ItemsFormat_Changed"
                            Width="220px">
                            <Items>
                                <telerik:RadComboBoxItem Text="N" />
                                <telerik:RadComboBoxItem Text="C" />
                                <telerik:RadComboBoxItem Text="Amount: #Y{C0}" />
                            </Items>
                        </telerik:RadComboBox>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </qsf:ConfiguratorPanel>
        <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451