Managed Code Silverlight Sample

Visifire can be easily added to any Silverlight project. By following these few steps you'll be able to create charts from managed code.

 

Step 1: Create a new Silverlight Project

 

Start Visual Studio 2008, Create a Silverlight Application project. Learn how to create Silverlight Application here: Setting up Silverlight Project Environment.

 

Step 2: Add references

 

Make sure that you have added references to Visifire assembly, SLVisifire.Charts.dll. Do not forget to include the Visifire.Charts and Visifire.Commons within any code file where you want to work with the charts. These files can be added with following syntax:

 

using Visifire.Charts;

using Visifire.Commons;

 

Including Visifire.Charts and Visifire.Commons part is highlighted in red, in following screen shot:

 

 

Step 3: Write code to create and display chart

 

In this example the chart will be shown within LayoutRoot Is the Grid on which chart will be drawn, which is a Grid control. This is created by Visual Studio. You can do changes to it from Page.xaml file. The default contents of Page.xaml file are shown below.

 

<UserControl x:Class="ManagedCodeExample.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>

</UserControl>

 

Inside Page.xaml window, the contents will look like this:

 

 

Now, let's create a chart from Page.xaml.cs file. Open the file and add a function CreateChart() in Page() constructor with following code.

 

public Page()

{

InitializeComponent();

 

// Call function to create chart

CreateChart();

}

 

Following is the content of the CreateChart function:

 

private void CreateChart()

{

// Create a Chart element

Chart chart = new Chart();

            

// Set chart width and height

chart.Width = 400;

chart.Height = 300;

 

// Create new DataSeries

DataSeries dataSeries = new DataSeries();

 

// Number of DataPoints to be generated

int numberOfDataPoints = 10;

 

// To set the YValues of DataPoint

Random random = new Random();

 

// Loop and add a few DataPoints

for (int loopIndex = 0; loopIndex < numberOfDataPoints; loopIndex++)

{

// Create a DataPoint

DataPoint dataPoint = new DataPoint();

 

// Set the YValue using random number

dataPoint.YValue = random.Next(1, 100);

 

// Add DataPoint to DataSeries

dataSeries.DataPoints.Add(dataPoint);

}

 

// Add DataSeries to Chart

chart.Series.Add(dataSeries);

 

// Add chart to the LayoutRoot for display

LayoutRoot.Children.Add(chart);

}

 

After adding CreateChart function, Page.xaml.cs file window will look like this:

 

 

Step 4: Press F5 to run the application and see the chart.

 

The chart should appear as shown below: