Setting up a XamDataChart to show data from an MSSQL Server using RIA Services

You're developing an application in Silverlight and you'd like to take advantage of XamDataChart - the fast chart that features a variety of built-in series and trendlines, zooming and panning that’s a part of the NetAdvantage for DataVisualization available in both WPF and Silverlight. However, your data sits in a corporate MSSQL Server, and you'd like to retrieve it and display it in the Silverlight applicaiton. This blogpost describes how to do just that - display your MSSQL data in the XamDataChart.

The approach to achieve this uses ADO.NET Entity Framework and RIA Services. Please download WCF RIA services and the RIA Services Toolkit to take advantage of this functionality. The approach was implemented as a sample project built in Visual Studio 2010 and Silverlight 4, using a Microsoft SQL Server 2008 database. The sample project uses the XamDataChart from NetAdvantage for Data Visualization for Silverlight 10.2 Service Release 1. Download a trial here. Download the sample project and follow as we go along. You will be able to run the sample project, but the application will throw an error saying it cannot access the database server, as the database connection has to point to your own database server instead of the server it's been set up with. Use the guidance below to setup your own project connecting to your own database server. 

1. We’ll start by building a database on your Microsoft SQL Server 2008 database server that will be used in this sample. Open this link for a walkthrough describing the restore process in detail. Once you do that you should have an IGSample database with a StockPrices table with more than 5800 records in it.

2. In Visual Studio 2010, create a new Silverlight Application solution making sure that the Enable WCF RIA Services checkbox is checked.

3. In the Server Explorer view in Visual Studio, add a connection to the IGSample database on your MSSQL server, as shown below:

4. Add an ADO.NET Entity Data Model object named IGModel.edmx to the server project (the project with a name ending in .Web, e.g. if you called your solution XamDataChartRIA, the server project is the XamDataChartRIA.Web project) in the solution, click Add.

5. Select Generate from database and click Next

6. Select the connection defined in the previous step and click Next.

7. Select the StockPrices table from the list, set the model namespace value to IGSampleModel and click Finish.

You should have an IGModel.edmx item in your server side-project. What we've done is we’ve created an entity model to wrap the data stored in the MSSQL server.

8. Build the application, in order to enable us to reference the entity model in subsequent steps.

9. Add a Domain Service Class item named IGDomainService.cs to the server project in the solution to expose the wrapped data to be consumed, click Add.

10. Select the StockPrices table in the entity data model, click OK.

11. In the Silverlight project (the client-side project), open the designer view of the form where you'd like to place the XamDataChart showing your data

12. From the Data sources window, drag the StockPrices table into the design surface of the XAML page. This will generate a DomainDataSource object which provides access to the data on the server part of the application and initializes a grid control to show this data. We need to do this in order to have the data source code generated for us. Let’s now remove the grid control from the code, and add a XamDataChart instead.

13. Remove the grid control declaration from the XAML file

14. Add references to XamDataChart assemblies in the Silverlight project – InfragisticsSL4.Controls.Charts.XamDataChart.v10.2.dll, InfragisticsSL4.DataVisualization.v10.2.dll, InfragisticsSL4.v10.2.dll, which are in the Silverlight DV DLLs folder in the sample project.

15. Add a namespace reference in the form XAML code to be able to reference the XamDataChart:
xmlns:igChart="clr-namespace:Infragistics.Controls.Charts;assembly=InfragisticsSL4.Controls.Charts.XamDataChart.v10.2"

16. Declare a XamDataChart in the form with a date X-axis and a numeric Y-axis in the XAML code, showing a line series with High column values from the StockPrices table. The values from the Date column in the table will be used for labels along the X-axis.

<igChart:XamDataChart Name="xamDataChart1" HorizontalZoomable="True" VerticalZoomable="True" HorizontalZoombarVisibility="Visible" VerticalZoombarVisibility="Visible">
    <igChart:XamDataChart.Axes>
     <igChart:CategoryDateTimeXAxis x:Name="XAxis1" VerticalAlignment="Top"  
        ItemsSource="{Binding}" 
           DateTimeMemberPath="Date" Label="{}{Date:d}"/>
       <igChart:NumericYAxis x:Name="YAxis1"  />
    </igChart:XamDataChart.Axes>
    <igChart:XamDataChart.Series>
       <igChart:LineSeries Title="High"
         XAxis="{Binding ElementName=XAxis1}" 
            YAxis="{Binding ElementName=YAxis1}" MarkerType="None"
            ItemsSource="{Binding}" ValueMemberPath="High"/>
      </igChart:XamDataChart.Series>
</igChart:XamDataChart>

15. In order to have the XamDataChart display the stock price data, we need to reference the auto-generated DomainDataSource object in its DataContext property:

<igChart:XamDataChart 
   DataContext="{Binding ElementName=stockPriceDomainDataSource, Path=Data}" 
   Name="xamDataChart1" HorizontalZoomable="True" VerticalZoomable="True" HorizontalZoombarVisibility="Visible" VerticalZoombarVisibility="Visible">

16. Run the project – you should see an empty chart while data is loaded from the server. After a couple of seconds or so, you should see the data being displayed into the XamDataChart. Here's a screenshot of what it should look like:

Adding a Busy Indicator while data is being loaded

One refinement we can make at this stage is to use the BusyIndicator control from the Silvelright Toolkit to display a popup indicating to the user that data is being loaded, while graying out the chart area. Download the Silverlight toolkit from http://silverlight.codeplex.com/ to take advantage of this functionality.

1. Add a reference to the System.Windows.Controls.Toolkit assembly, and add a namespace reference to it in the XAML code:

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

2. Declare a BusyIndicator to contain the XamDataChart 

  <toolkit:BusyIndicator BusyContent="Loading Data..." x:Name="busyIndicator">
      <igChart:XamDataChart ...>
      ...
      </igChart:XamDataChart>
  </toolkit:BusyIndicator>

3. Set the busyIndicator IsBusy property to true in the InitializeComponent. This will show the indicator as busy at program startup

4. Set the busyIndicator IsBusy property to false in the LoadedData event handler of the DomainDataSource, which was declared automatically when we added the data source. This will remove the user message once the data is loaded and the XamDataChart is ready for use.

Summary

These are all the steps necessary to setup an end-to-end Silverlight project using the XamDataChart to display your MSSQL server data. Follow these steps with confidence and take advantage of what the XamDataChart has to offer in your applications.

If you have any questions, do not hesitate to email me at kmatev@infragistics.com