After having a hands on experience with our Chart Designer and following examples in our documentation it will be very obvious that  Visifire can be used with any server side technology including ASP, ASP.Net, PHP, ColdFusion, JSP or just Simple HTML. But what is not so obvious is that, Visifire can be used very easily within Silverlight Applications too : ) Currently we are in the process of testing it within managed code and hence we have not given examples on that in our documentation. Soon we’ll update the documentation with tutorials and examples.

Because many users are eager to use within managed code and have asked for samples, today I’ll explain about how to create a simple chart within managed code using Visifire.

Before starting with this, please download the latest build of Visifire from the download section.

In order to use Visifire within managed code, first you need to reference the Visifire assemblies in your project. Visifire assemblies are packaged within the Visifire.xap file. Visifire.xap file is actually a zip file whose extension has been changed to xap. So you can rename it as Visifire.zip and extract the contents. Inside you’ll find:

1. Visifire.Charts.dll
2. Visifire.Commons.dll
3. VisifireCharts.dll
4. AppManifest.xaml

Among the four files, we are interested in the first two.

Now that you have the required files, lets start creating a sample application. I assume that you’ve installed Silverlight tools for Visual Studio 2008. You can download it from here.

Now we are going to create a simple Silverlight Chart within managed code. The chart gets refreshed with random data each time you click on the chart.

In Visual Studio 2008, create a Silverlight Application project. Let the Visual Studio create a web site to host your app.

Visual Studio creates App.xaml , Page.xaml and code behind files for the xaml files.

Now add reference to Visifire assemblies, Visifire.Charts.dll and Visifire.Commons.dll.

Open the Page.xaml. You will see

<UserControl x:Class="Sample1.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>

We are going to create a Chart within the Grid named LayoutRoot

Now open the code behind file, Page.xaml.cs and attach an event handler for Loaded event.

       public Page()
       {
           InitializeComponent();

           this.Loaded += new RoutedEventHandler(Page_Loaded);
       }
       void Page_Loaded(object sender, RoutedEventArgs e)
       {
           CreateChart();// We are going to write this function next.
       }

Now lets write a function "CreateChart" which will create a new chart each time you call it and add it to the LayoutRoot. Before adding a Chart to the LayoutRoot each time, one needs to clean up the previous Chart present within the Grid.

Note: Visifire still doesn’t have "Live Charts". That means, just by changing the DataPoint present within an already existing chart will not update the Chart. You need to create a new Chart. In future versions we may support Live Charts.

        public void CreateChart()
        {
            Visifire.Charts.Chart visiChart = new Visifire.Charts.Chart();
            Visifire.Charts.DataSeries dataSeries = new Visifire.Charts.DataSeries();
            Visifire.Charts.DataPoint dataPoint;
            Visifire.Charts.Title title = new Visifire.Charts.Title();

            title.Text = "Click On Chart To Refresh";
            visiChart.Children.Add(title);

            visiChart.Width = 500; // Width and Height are required for the Chart.
            visiChart.Height = 300;

            Random rand = new Random(DateTime.Now.Millisecond);

            for (int i = 0; i < 9; i++)
            {
                dataPoint = new Visifire.Charts.DataPoint();
                dataPoint.YValue = rand.Next(100, 1000);
                dataSeries.Children.Add(dataPoint);
            }

            dataSeries.RenderAs = "Column";
            visiChart.Children.Add(dataSeries);

            LayoutRoot.Children.Clear(); // So that Chart objects don’t build up each time we add one.
            LayoutRoot.Children.Add(visiChart);
        }

In the above code, first I’ve created 4 objects Chart, DataSeries, DataPoint and Title.

DataSeries and Title should be added to Children Collection of Chart and DataPoint should be added to Children Collection of DataSeries.

I’ve set the Title of the Chart through "Text" property. Next am setting the Width and Height of the Chart.

Note: Visifire requires the width and height of the Chart to be set before it is added into any element. This is because the Chart starts rendering as soon as it is Loaded. If you want to change the size later, you can scale it. Scaling the chart will not reduce the quality as Silverlight uses Vector Graphics.

Am using a Random object to create random data for the chart each time it is called.

Inside the loop, am creating DataPoint and assigning it a random data within the range of 100 to 1000. Then add DataPoint into the Children collection of DataSeries. Set the RenderAs property of DataSeries to "Column" so that the series is rendered as Column Chart. Then add the DataSeries to Children collection of Chart.

Note: You can change the RenderAs property to Bar, Line, Area and get other Chart Types.

Next clear the Children of LayoutRoot so that it cleans up any existing Chart object. This ensures that, Chart objects don’t build each time you call CreateChart.

Then finally add visiChart to the LayoutRoot.

The Chart gets rendered as soon as it is loaded.

Now lets add an event handler for MouserLeftButtonUp and create a new chart each time the Chart is clicked. Add the below code into Page constructor.

        this.MouseLeftButtonUp += new MouseButtonEventHandler(Page_MouseLeftButtonUp);

Now write the event handler for MouseLeftButtonUp as follows

        void Page_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            CreateChart();// This creates a new chart each time you click.
        }

Now your can run the chart application and see the output. Below is a snapshot of the chart.

 

You can download the source from here.