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):
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:
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();
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:
- 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.
- Add the following entry to your main Canvas header:
xmlns:cfx="clr-namespace:ChartFX.Silverlight.Client;
assembly=ClientBin/ChartFX.Silverlight.Client.dll"
- 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.
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).
