Chart (Obsolete)

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Chart - Silverlight RadChart

If you are considering Telerik’s Chart control for new development, you might be interested in checking out our newer HTML5-based Chart for ASP.NET AJAX.

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
       

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.

C# VB
Show code in new window Demo isolation steps
<%@ Page  %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
     TagPrefix="asp" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Namespace="Telerik.QuickStart" TagPrefix="qsf" %>
<%@ Register TagPrefix="uc1" TagName="RadHtmlChartInfoBox" Src="~/Chart/Common/RadHmlChartInfoBox.ascx" %>
<!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>ASP.NET Chart Demo - Silverlight RadChart</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     <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.ClientID%>").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>
     <uc1:RadHtmlChartInfoBox ID="RadHtmlChartInfoBox1" runat="server" />
     <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">
          </asp:Silverlight>
     </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);"></asp:CheckBox>
                    </td>
                    <td>
                         &nbsp;
                    </td>
                    <td>
                         &nbsp;
                    </td>
                    <td>
                         &nbsp;
                    </td>
                    <td>
                         &nbsp;
                    </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"></ClientEvents>
                         </telerik:RadTextBox>
                    </td>
                    <td>
                         <div id="ShowTooltips">
                              <asp:CheckBox ID="ShowItemTooltips" runat="server" onclick="ShowItemTooltips_Click(this);">
                              </asp:CheckBox>
                         </div>
                         <div id="HideElements" style="display: none;">
                              <asp:CheckBox ID="HideElementsOnRotation" runat="server" onclick="HideElementsOnRotation_Click(this);">
                              </asp:CheckBox>
                              <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);">
                         </asp:CheckBox>
                    </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"></ClientEvents>
                         </telerik:RadTextBox>
                    </td>
                    <td>
                         <asp:CheckBox ID="ShowItemLabels" runat="server" Checked="true" onclick="ShowItemLabels_Click(this);">
                         </asp:CheckBox>
                    </td>
                    <td>
                         Show item labels.
                    </td>
                    <td>
                         <asp:CheckBox ID="ShowYAxisGridlines" runat="server" onclick="ShowYAxisGridlines_Click(this);">
                         </asp:CheckBox>
                    </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>
                                   <telerik:RadComboBoxItem Text="MM/dd/yyyy"></telerik:RadComboBoxItem>
                                   <telerik:RadComboBoxItem Text="Day: #VAL{dddd}"></telerik:RadComboBoxItem>
                                   <telerik:RadComboBoxItem Text="HH:mm:ss"></telerik:RadComboBoxItem>
                                   <telerik:RadComboBoxItem Text="yyyy MMMM"></telerik:RadComboBoxItem>
                              </Items>
                         </telerik:RadComboBox>
                    </td>
                    <td>
                         <asp:CheckBox ID="ShowXAxis" runat="server" Checked="true" onclick="ShowXAxis_Click(this);">
                         </asp:CheckBox>
                    </td>
                    <td>
                         Show X axis.
                    </td>
                    <td>
                         <asp:CheckBox ID="ShowXAxisStriplines" runat="server" onclick="ShowXAxisStriplines_Click(this);">
                         </asp:CheckBox>
                    </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>
                                   <telerik:RadComboBoxItem Text="C"></telerik:RadComboBoxItem>
                                   <telerik:RadComboBoxItem Text="Amount: #VAL{C0}"></telerik:RadComboBoxItem>
                              </Items>
                         </telerik:RadComboBox>
                    </td>
                    <td>
                         <asp:CheckBox ID="ShowYAxis" runat="server" Checked="true" onclick="ShowYAxis_Click(this);">
                         </asp:CheckBox>
                    </td>
                    <td>
                         Show Y axis.
                    </td>
                    <td>
                         <asp:CheckBox ID="ShowYAxisStriplines" runat="server" Checked="true" onclick="ShowYAxisStriplines_Click(this);">
                         </asp:CheckBox>
                    </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>
                                   <telerik:RadComboBoxItem Text="C"></telerik:RadComboBoxItem>
                                   <telerik:RadComboBoxItem Text="Amount: #Y{C0}"></telerik:RadComboBoxItem>
                              </Items>
                         </telerik:RadComboBox>
                    </td>
                    <td>
                         &nbsp;
                    </td>
                    <td>
                         &nbsp;
                    </td>
                    <td>
                         &nbsp;
                    </td>
                    <td>
                         &nbsp;
                    </td>
               </tr>
          </table>
     </qsf:ConfiguratorPanel>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here