Gracefully degrade RadChart for Silverlight in ASP.NET

In a recent webinar, I showed an example of how you can build a superior user experience in an ASP.NET website by using RadChart for Silverlight. The Telerik Silverlight chart has animations, rich rendering, and is much more visual appealing than the “static” RadChart for ASP.NET. But while the Silverlight chart is a great way to enhance data visualizations in your ASP.NET site, how do you handle users that don’t have Silverlight installed?

One approach is to implement “graceful degradation.” Graceful degradation is an important and familiar principle in web design, and essentially it means this: if you build features into your site that take advantage of the latest and greatest technologies (like Silverlight), make sure you have some mechanism to provide an alternative experience for those users not living on the cutting edge. In our case, that means if Silverlight is not installed, we still want to display a chart, it just wont have the bells and whistles Silverlight offers. Specifically, we want our site to automatically display a RadChart for ASP.NET (which is simply an image generated on the server and sent to the client, so it works on all browsers) if Silverlight is not available.

SIVLERLIGHT’S “NOSCRIPT” TAG

Similar to the HTML <noscript> tag, which is used to display content only when JavaScript is not available, the ASP.NET Silverlight control has a handy template called the “PluginNotInstalledTemplate.” Any content you place inside of this template will be automatically displayed to the user if Silverlight is not installed. If you do not specify any content for this template, Microsoft will display the “Install Silverlight” image by default.

<asp:Silverlight ID="xamlChart" runat="server" Source="~/ClientBin/RadChartControl.xap" 

 MinimumVersion="2.0.31005.0">

 <PluginNotInstalledTemplate>

 <!-- Any content can be placed here, including ServerControls -->

 </PluginNotInstalledTemplate> 

</asp:Silverlight>

If you are not using an ASPX page to host your Silverlight, you can accomplish a similar feat in raw HTML by adding any content you want between the opening and closing Silverlight HTML <object> tags, like this:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" 

 width="100%" height="100%">

 <param name="source" value="ClientBin/RadChartControl.xap"/>

 <!-- Your HTML content here will be displayed if Silverlight is missing -->

</object>

We’ll focus primarily on the ASP.NET experience, though, since it is obviously required for our RadChart “graceful degrade” scenario.

ENABLING THE GRACEFUL DEGRADE

While many people are aware of the PluginNotInstalledTemplate, not as many seem to be aware of the fact that you can include ServerControls in this template. That means we can include a RadChart for ASP.NET AJAX in our plug-in template and easily configure it, just as we would on any other ASP.NET page.

<asp:Silverlight ID="xamlChart" runat="server" Source="~/ClientBin/RadChartControl.xap" 

 MinimumVersion="2.0.31005.0">

 <PluginNotInstalledTemplate>

 <!--RadChart for ASP.NET to display if Silverlight not available-->

 <telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true" Skin="Black">

 <Series>

 <telerik:ChartSeries Name="Series 1">

 </telerik:ChartSeries>

 </Series>

 </telerik:RadChart>

 </PluginNotInstalledTemplate> 

</asp:Silverlight>

Then, in the code behind of our ASP.NET page (or UserControl, depending on your implementation), we simply bind and render the chart when the page loads.

protected void Page_Load(object sender, EventArgs e)

{

 //Bind the RadChart to enable "graceful degredation"

 //Get the RadChart from the Silverlight PluginNotInstalledTemplate

    var chart = xamlChart.FindControl(RadChart1.ID) as RadChart;

 if(chart != null)

    {

 //Configure and bind your RadChart (example settings)

        chart.ChartTitle.TextBlock.Text = ChartTitle;

        chart.Width = new Unit(Width);

        chart.Height = new Unit(Height);

        chart.DataSource = JsonData.FromJSON<List<CategorySalesFor1997>>();

        chart.DataBind();

    }

}

And that’s it. With this simple setup, you can display the Silverlight RadChart when Silverlight is available and the ASP.NET chart image when it’s not. This same principle can be applied to other Silverlight/ASP.NET controls, such as RadUpload, so this is not something that only works with RadChart.

THE RESULTS

When implemented correctly, the end result is seamless for your users. If an user has Silverlight installed, they will see the RadChart for Silverlight, like this:

If they do not have Silverlight installed, they will automatically see the more accessible RadChart for ASP.NET AJAX, like this:

I hope this technique helps you effectively leverage Silverlight in your ASP.NET projects without worrying about leaving your non-Silverlight users behind!