Chart FX: Industry-leading data visualization components for the .NET platform.

Generating Silverlight Content with Chart FX

Chart FX Silverlight Add-On Tutorial

The Chart FX Silverlight Add-On combines the most complete and robust charting functionality provided by Chart FX 7 through a client/server architecture with the visual richness of Microsoft Silverlight.

Generating the chart on the server

The first step to using the Chart FX Silverlight Add-On is to create a new website using Visual Studio, which you will then add a Chart FX 7 object to create the server-side chart. Due to a security restriction in Silverlight, the server and client pieces must reside on the same domain, so you should select IIS as your web server (location must be HTTP):

New Web Site Palette

You can add as many .aspx pages as you want to the project. For simplicity, we will limit this part of the tutorial to just a single page with one chart. Begin by dropping a chart from the toolbox onto the web form and setting its desired size. Using the wizard, property grid and code, you can connect the chart to data and customize the gallery type, axes, titles, legends, etc. One crucial part is the selection of Silverlight as the chart renderer; this can be done through the smart tag wizard by selecting Silverlight from the list of available renderers, as shown below:

Renderer Type Wizard

Although we recommend selecting the Silverlight renderer at design time for ease of use, you can also do it through code. To do so, you must first add a reference to the Chart FX Silverlight Add-On Writer to your project (ChartFX.WebForms.Writer.Silverlight.dll, available in the bin folder of your Chart FX installation directory). Then, you will need the following code:

Chart1.OutputWriter = new ChartFX.WebForms.Writer.Silverlight.SilverlightWriter();

Note: Please be aware that your page must contain only chart controls using the Silverlight renderer.

If everything is setup correctly, running your page will show nothing on the browser, but if you inspect the underlying html code that is generated you will notice a portion of the page containing the chart in XAML code, including a container <Canvas> among many other Silverlight objects. At this time you are ready to setup the client portion of the solution.

Including Chart FX in your Silverlight application

The Chart FX Silverlight Add-On also includes a native Silverlight client component that you can use directly in your Silverlight applications. At the time this tutorial was created, Microsoft Silverlight 1.1 was in its alpha stage, and the design time support for Silverlight applications in Visual Studio 2008 and Microsoft Expression Blend 2 September Preview was minimal. In either case, you will need to do the following to include Silverlight functionality in your application:

  1. Add the ChartFX.Silverlight.Client.dll assembly to your project's references. This file is located in the bin folder of your Chart FX 7 installation directory.
  2. Add the following entry to your main Canvas header: xmlns:cfx="clr-namespace:ChartFX.Silverlight.Client; assembly=ClientBin/ChartFX.Silverlight.Client.dll"
  3. To add a chart anywhere in your XAML page you must add a line as follows: <cfx:Chart x:Name="chart1" Source="http://localhost/MyChart/Server/Default.aspx" Width="375" Height="250" />

The Source property is the way you link the chart you have created using Chart FX 7 and the Silverlight client component. It must point to the URL you created in your web form in the first step. There are some advanced scenarios to minimize the impact on the server when you have multiple charts.

Although the final size of the chart is determined by the size specified in the server page, we recommend setting the same width and height to the client component. While the control obtains the chart from the server, an animation indicating that the chart is being loaded appears; setting the same width and height on the client and server will ensure a smooth transition from the animation to the rendered chart.

Note: For a complete list of members supported by the Silverlight client component please refer to the API Appendix later in this tutorial.

The Chart FX Silverlight Add-On client component supports all of the capabilities of a standard Silverlight control, so you can apply any transformation you would apply to other controls, allowing for eye catching effects.

Important: When you run your Silverlight application, the browser will open the TestPage.html using the file system. Due to the security restriction mentioned earlier, the Silverlight application and chart source must reside on the same domain. For that reason, you will need to create an application in your local IIS pointing to the project folder and access it with your browser via http://localhost (e.g. http://localhost/MySilverlightChart/TestPage.html).

Promotions

Featured Chart FX Customers

OEM Integration

If you need to integrate Chart FX as part of your web application, Software FX offers OEM and multi-licensing deals for those who need to deploy Chart FX to a certain number of servers. For further details please contact us at:

Resources

View Over 20 Chart Types Running in a Silverlight Application

This interactive sample application illustrates 20+ unique chart types running natively in a Silverlight web application.

Chart FX Silverlight Add-On Sample

Chart FX Shines for Silverlight Today (500k PDF)

A technical whitepaper that outlines the Chart FX Silverlight Add-On.

Microsoft Silverlight Download

Microsoft Silverlight is a cross-browser, cross-platform plugin for delivering next-generation media experiences and rich interactive applications for the Web.

© Software FX, Inc. All Rights Reserved. Chart FX, Grid FX & PowerGadgets are registered trademarks of Software FX, Inc.

Citrix® and Citrix Xenapp™ are trademarks and registered trademarks of Citrix Systems, Inc.

All other names are trademakrs or registered trademarks of their respective owners.

Java and all Java-based marks are trademakrs or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.