Creating Visifire Charts With Managed Code

admin

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.

Chart

 

You can download the source from here.


Comments

  1. Sergio Samayoa
    April 3rd, 2008 | 12:07 pm

    Example with xaml?

  2. adminjew
    April 3rd, 2008 | 9:54 pm

    Very nice post it helps a lot thanks

  3. April 4th, 2008 | 12:50 am

    @ssamanyoa,

    Thanks for your interest in Visifire. Soon we’ll write an example regarding that in our blog.

    But in a few minutes you can easily get started with creating chart in XAML if you follow the below guidlines.

    1. XML for creating Charts within HTML pages and XAML for creating Chart within Silverlight Apps are one and the SAME!!… :)

    2. So you can create a sample chart using our Chart Designer and copy paste the XML generated inside the Grid/Canvas in Page.xaml. Make sure that Width and Height are present in the Chart element (Will be present by default).

    3. Add reference to the Visifire assemblies , Visifire.Charts.dll and Visifire.Commons.dll in your project. I’ve explained how to extract assemblies in this blog.

    4. You are done! Run the application!!

    The XML generated is very intuitive and you can understand it in a minute. Trust me!!.. :)

    For understanding about Attributes in Chart Designer, you can click on the attributes which will take you into corresponding documentation section.

    Good Luck!

  4. Morne Kruger
    April 14th, 2008 | 4:28 pm

    Excellent starter – had me going in no time.

    Thanks!!!

  5. good man
    April 15th, 2008 | 5:34 am

    very good for method

  6. rainz
    April 23rd, 2008 | 5:11 am

    hi…………….
    thanx alot man……………
    it has solved my grt problem……………..
    once again thanx………….:-)

  7. DavidL
    May 17th, 2008 | 12:09 pm

    Hi, is it also possible to reference these DLLs and use C# code within an ASPX page (specifically in a UserControl), so a chart can be programatically created, rather than using JavaScript…?

  8. Somnath
    May 20th, 2008 | 12:41 am

    Currently Visifire chart does not have user control support for ASPX. So currently you won’t be able to create chart programmatically from your ASPX server side code.

  9. DavidL
    May 21st, 2008 | 8:12 am

    Thanks for the reply… a pity, as this rules out using Visifire for my project… ah well, maybe someday…. :-)

  10. Hery
    June 8th, 2008 | 8:20 pm

    Hi Sunil,

    I tried your example above, but got no luck to execute it:

    I am getting this exception:
    Method not found: ‘System.Object System.Windows.FrameworkElement.get_Parent()’. at Visifire.Charts.Chart.InitialCommonInitSteps()
    at Visifire.Charts.Chart.Init()
    at Visifire.Charts.Chart.OnLoaded(Object sender, EventArgs e)
    at System.Windows.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
    at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, String eventName)

    Any idea?

    Thanks,
    Hery

  11. lankey
    July 8th, 2008 | 11:14 pm

    very good!

    how using dataset?

  12. flat010
    July 16th, 2008 | 11:26 pm

    tks! flat010

  13. JohnB
    August 27th, 2008 | 11:54 am

    My question is similar to DavidL’s. Can I, using managed code in a Silverlight 2 app, read a ChartXML file programmatically? I know there is a js fcn that is similar (named ‘setDataUri()), but I want to use the managed code capability of Silverlight. Ultimately, I will be delivering Series data from a WCF service. Without a programmatic interface to the Chart, I cannot proceed very far with Visifire, and would need to choose a different charting means.

  14. Priyanka
    April 16th, 2009 | 1:32 am

    Nice reply.
    Very helpful.
    Thank u very much.

  15. August 30th, 2009 | 11:29 pm

    How did it cost to start up this blog…I want to start my own.

  16. raman
    September 18th, 2009 | 8:07 am

    Hi I am using 3D-Column chart in my JSP page. I am having some problems in the display.
    1. X-axis and y-axis bars are visible–I need to hide them
    2. The maximum data point is being displayed within the bar. The reason I think is the plot area and chart area are same. I am not able to display the chart to the center of the plot area. It is being displayed on the top only.

    please let me know the answers at the earliest

  17. April 23rd, 2010 | 12:29 am

    very well information you write it very

    clean. I’m very lucky to get this information from you.

  18. Prasenjit Basu
    August 13th, 2010 | 3:26 am

    Hi,
    I would like to display a Message to the user that for the given input there is no data so chart is not created. I am using C# as coding language. Can some one help me out.

  19. ganesh
    October 27th, 2010 | 9:52 am

    I am getting this error in below line

    visiChart.Children.Add(title);

    Error information:
    ‘Visifire.Charts.Chart’ does not contain a definition for ‘Children’ and no extension method ‘Children’ accepting a first argument of type ‘Visifire.Charts.Chart’ could be found (are you missing a using directive or an assembly reference?)

    please help me.

  20. anto
    February 21st, 2013 | 4:57 am

    Hi i want to use visifire but i want to create visifire chat with out install silverlight tool. any body help me .. if you have any link please mention it

  21. evolvedmicrobe
    April 11th, 2013 | 7:33 pm

    Out of curiosity, is there a way to avoid having to manually set the height/width but instead use stretch properties? I am hoping to create 4-8 plots to fill a space and wanted to avoid setting this by hand.

  22. vivek
    April 15th, 2013 | 1:03 am

    anto,

    In which platform are you building chart? Please note that Visifire is available for the following platforms.
    1) Silverlight
    2) WPF
    3) Windows Phone
    4) Windows 8

    If you are working on a WPF application, you can use Visifire for WPF.

  23. vivek
    April 15th, 2013 | 1:07 am

    evolvedmicrobe,

    You can place the chart inside a Grid. This will make it resizable depending upon the parent size.

Leave a reply