Visifire » Tutorials and Samples

Windows Phone 7 Charts

Chirag — Mon, 19 Jul 2010 16:20:28 +0000

Hi,

You folks know that Windows Phone 7 Charts are possible with Visifire. Due to some breaking changes in the latest Beta release of Windows Phone Developer Tools users had issues using Visifire. We have decided to ship separate binaries for WP7 users. All that changes is that one has to provide reference to SLWpVisifire.Charts.dll instead of regular Visifire for Silverlight binaries. Listed below are few links to get you started quickly with Windows Phone 7 Charts:

Download the latest version of Visifire here. We are very excited about this release & would love to have your feedback.

Cheers
Team Visifire

Silverlight/WPF Spline Chart

Chirag — Fri, 09 Jul 2010 15:52:27 +0000

Hi,

With this release Visifire introduces Spline Chart. A Spline Chart is similar to a Line Chart except that it draws a fitted curve through the data points. The spline interpolation and smoothing is for improved presentation of data. It allows one to take a limited set of known data points and approximate transitional values.

Demoed below is Messi’s path to glory!

Cheers,
Team Visifire

[silverlight:http://www.visifire.com/blog/wp-content/post_xaps/GoalsScoredByMessiForBarcelonaClub.xap, 680,250]

Silverlight/WPF Radar Chart

Chirag — Fri, 09 Jul 2010 15:52:07 +0000

Hi,

With this release Visifire introduces Radar Chart. A Radar Chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. Radar Chart is also known as Web, Spider or Star Chart.

Shown below is the goals scored by top countries in FIFA World Cups 2006 & 2010 (till date).

Cheers,
Team Visifire

Realtime Update Using DataBinding

somnath — Fri, 02 Jul 2010 11:37:58 +0000

DataBinding provides a simple way to manipulate and interact with data. DataBinding does the clear separation between UI implementation and business logic layer. The data can be imported from any data source like database, file etc. The UI element can be any framework element like DataGrid, Chart etc to visualize the data. Connection between UI and data object results in flow of data between them. When DataBinding is done, if the data changes then UI element which is bound to the data object also changes. In the case of two ways binding, changes made to UI element will cause data object to change.

In this post I will discuss about “How DataBinding takes place at real-time”. I prefer updating the chart at real-time without manipulating the Visifire chart elements directly. I will be doing multiple operations like add, delete, update with a collection and it’s good to see the changes reflecting in the chart at real-time.

The figure shown below explains the conceptual representation of DataBinding between Visifire Chart and an ObservableCollection. DataRow is a class which holds Data for a DataPoint. A DataRow defines one or more number of properties to be mapped with DataPoints according to the data-mapping-rules defined at Series level. DataRows is a collection of one or more DataRow. Every record present in the DataRows collection represents a DataPoint.

DataMapping rules which are to be specified in DataSeries are shown below:

In this example we are going to use dataRows as DataSource. Here DataSource property of the DataSeries has been set from managed code.

MyChart.Series[0].DataSource  = dataRows;

Please note that I have used a DataGrid to dispaly the data present in dataRows in a tabular format. So I have bound dataRows collection with the DataGrid also. As DataGrid is bound with the collection, one can update the data present in collection just by editing the DataGrid cells. We can even directly perform Add, Remove operations with dataRows collection which will reflect in Chart as well as DataGrid.

DataRow is the class which has two properties named AxisXLabel and YValue. This class contains business logic which is required to interact with values of dataRows. You may wonder how does it know when the property value changes? The answer to this question lies in the interface called INotifyPropertyChanged which is in System.ComponentModel namespace. The DataRow class implements INotifyPropertyChanged which notifies when the business object changes. So, whenever the value changes in the DataSource, corresponding property will trigger PropertyChanged event.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace VisifireDataBinding
{ 

  public class DataRow : INotifyPropertyChanged
  {
    /// 
    /// Selected property is used to know whether the DataRow is selected  or not
    /// 
    public Boolean Selected
    {
       get
       {
          return _select;
       }
       set
       {
         _select = value;

        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs("Select"));
        }
    }

    /// 
    /// AxisXLabel property
    /// 
    public String AxisXLabel
    {
        get
        {
            return _axisXLabel;
        }
        set
        {
           _axisXLabel = value;

           if (PropertyChanged != null)
               PropertyChanged(this, new PropertyChangedEventArgs("AxisXLabel"));
         }
     }

     /// 
     /// YValue property
     /// 
     public Double YValue
     {
         get
         {
             return _yValue;
         }
         set
         {
            _yValue = value;

            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("YValue"));
         }
      }

      #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

      #endregion

      Double _yValue;
      String _axisXLabel;
      Boolean _select;
   }
}

You can find additional information about InotificationPropertyChanged here.

As a result, chart is displayed with chart contents as shown below.

DataBinding makes it easy to display “live” data.

Changes made in the DataSource also causes changes in the chart without requiring any coding on your part! Now manipulate the values in DataGrid which may include addition, removal, update of DataPoint properties.

The DataGrid after adding properties for one or more DataPoint will look like below.

The Output changes!

Above image shows the chart with newly added AxisXLabel and YValue at real-time. Notice as I change values in DataGrid, the chart gets updated automatically.

You can download the source code of the sample demo application here.

Cheers,
Team Visifire

Visifire Now Supports DataBinding

Sunil — Tue, 16 Feb 2010 12:11:11 +0000

Today we are releasing the much awaited DataBinding feature in Visifire 3.0.3 beta 3. Now you can Bind any DataSource at the Series level so that the Chart gets generated automatically and reflects any change. Below is a demonstration of DataBinding. You can change the Values in DataGrid and the Chart gets updated automatically.

Here is the source code for the above sample. Also you can visit Visifire documentation here for more info.

You can download Visifire 3.0.3 beta 3 from our download page.

Cheers,
Team Visifire

Exporting Visifire Silverlight Chart as Image

Chirag — Thu, 12 Nov 2009 15:11:00 +0000

Exporting Silverlight charts to images has been the most coveted feature. In this tutorial, I am going to show you to export Visifire Silverlight chart as image from managed code. So before we start lets check out the live example below.

Project Setup

Create a “Silverlight Application” project. Download the latest Visifire binaries from here. Extract the Zip file and add reference for the file named “SLVisifire.Charts.dll”. In this sample, I am going to use WriteableBitmap class in order to extract the pixel wise color information of the chart rendered inside Silverlight content. We will take help of JpegEncoder provided by a third party library called FJ.Core to encode the raster information to file stream.

Please download FJ.Core library from here and add the FJ.Core.dll as reference to the project.

Below are the steps that we are going to follow.

Construct the Chart XAML inside MainPage.xaml.
Exporting Chart as image.

Constructing Chart XAML

Open MainPage.xaml page, add a Chart and a button inside it as shown below:

"SLSave2Image.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
    mc:Ignorable="d" Width="500" Height="480">
    "LayoutRoot">
        
            "MyChart" Width="500" Height="300" Theme="Theme1">

                
                    "Visifire Chart"/>
                

                
                    "Column" LabelEnabled="True">
                        
                            "Jan" YValue="35"/>
                            "Feb" YValue="32"/>
                            "Mar" YValue="27"/>
                            "Apr" YValue="17"/>
                            "May" YValue="16"/>

Exporting Chart as image

Now open MainPage.xaml.cs page and add the following namespaces.

using FluxJpeg.Core;
using FluxJpeg.Core.Encoder;
using System.Windows.Media.Imaging;
using System.IO;
using Visifire.Charts;

Now attach an event handler for Click event of Button inside the Page constructor.

public MainPage()
{
    InitializeComponent();

    ButtonSave.Click += new RoutedEventHandler(ButtonSave_Click);
}

void ButtonSave_Click(object sender, RoutedEventArgs e)
{
    SaveToImage(MyChart);
}

Inside the ButtonSave event handler declare a function called SaveToImage() which will accept Chart as parameter as shown above.

Now inside the function definition, create a WriteableBitmap out of a Chart and collect the raster information from it. Then encode the raster information to file stream using JpegEncoder present in FJ.Core library as shown below. Finally save the file stream as image into hard drive.

/// 
/// Save Visifire chart as Image
/// 
/// Visifire.Charts.Chart
private void SaveToImage(Chart chart)
{
    try
    {
        WriteableBitmap bitmap = new WriteableBitmap(chart, null);

        if (bitmap != null)
        {
            SaveFileDialog saveDlg = new SaveFileDialog();
            saveDlg.Filter = "JPEG Files (*.jpeg)|*.jpeg";
            saveDlg.DefaultExt = ".jpeg";

            if ((bool)saveDlg.ShowDialog())
            {
                using (Stream fs = saveDlg.OpenFile())
                {
                    MemoryStream stream = GetImageStream(bitmap);

                    //Get Bytes from memory stream and write into IO stream
                    byte[] binaryData = new Byte[stream.Length];
                    long bytesRead = stream.Read(binaryData, 0, (int)stream.Length);
                    fs.Write(binaryData, 0, binaryData.Length);
                }
            }
        }
    }
    catch(Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("Note: Please make sure that Height and Width of the chart is set properly.");
        System.Diagnostics.Debug.WriteLine(ex.Message);
    }
}

/// 
/// Get image MemoryStream from WriteableBitmap
/// 
/// WriteableBitmap
/// MemoryStream
public static MemoryStream GetImageStream(WriteableBitmap bitmap)
{
    byte[][,] raster = ReadRasterInformation(bitmap);
    return EncodeRasterInformationToStream(raster, ColorSpace.RGB);
} 

/// 
/// Reads raster information from WriteableBitmap
/// 
/// WriteableBitmap
/// Array of bytes
public static byte[][,] ReadRasterInformation(WriteableBitmap bitmap)
{
    int width = bitmap.PixelWidth;
    int height = bitmap.PixelHeight;
    int bands = 3;
    byte[][,] raster = new byte[bands][,];

    for (int i = 0; i < bands; i++)
    {
        raster[i] = new byte[width, height];
    }

    for (int row = 0; row < height; row++)
    {
        for (int column = 0; column < width; column++)
        {
            int pixel = bitmap.Pixels[width * row + column];
            raster[0][column, row] = (byte)(pixel >> 16);
            raster[1][column, row] = (byte)(pixel >> 8);
            raster[2][column, row] = (byte)pixel;
        }
    }

    return raster;
}

/// 
/// Encode raster information to MemoryStream
/// 
/// Raster information (Array of bytes)
/// ColorSpace used
/// MemoryStream
public static MemoryStream EncodeRasterInformationToStream(byte[][,] raster, ColorSpace colorSpace)
{
    ColorModel model = new ColorModel { colorspace = ColorSpace.RGB };
    FluxJpeg.Core.Image img = new FluxJpeg.Core.Image(model, raster);

    //Encode the Image as a JPEG
    MemoryStream stream = new MemoryStream();
    FluxJpeg.Core.Encoder.JpegEncoder encoder = new FluxJpeg.Core.Encoder.JpegEncoder(img, 100, stream);
    encoder.Encode();

    // Back to the start
    stream.Seek(0, SeekOrigin.Begin);

    return stream;
}

You can download the complete solution here

(Hat tip to Visifire user Sagi Karni, Intel Corp)

Cheers,
Team Visifire

Step by step breakdown of Visifire rendering logic

Sunil — Fri, 16 Oct 2009 12:03:00 +0000

Introduction

Since the release of Visifire, we have got a lot of positive response from users on the simplicity, looks, customizability of Visifire over other Charting Controls in the market. What made it possible is, Visifire’s underlying set of algorithms that determine the best Visualization for a given set of parameters. So even when you provide bare minimum data required for rendering, Visifire renders a nice looking Chart which has tooltips, default interactivity like explode in Pie Chart, auto font-color for labels depending on the Chart Background color, auto indexing of DataPoints when XValue is not provided, etc.

Though Visifire makes effort to find the best visualization for any given case, its not always enough for all the applications. So we do have relevant properties for making it possible to customize according to individual needs. In this blog am going to explain the default rendering behavior of Visifire and how one can override them according to his needs.

1. Pictorial representation of Various elements/regions in a Chart

2. A Minimal Chart

Below is a Minimal Chart and the XAML required to create it.

"clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

          Width="500" Height="300">

                "207349" />

                "274316" />

                "318845" />

                "345254" />

                "351139" />

In the above XML we have defined YValue for all the DataPoints. When we look at the rendered chart, we can observe that the DataPoints have been numbered from 1 to 5. DataPoints are numbered automatically in the order of their appearance. If you want to override this default behavior, you can either set XValue for numbers or AxisXLabel in case you want to display string. Note that setting XValue will place DataPoints according to the position of XValue on X-Axis. Chart also shows ToolTip by default.

So by default the Chart adds

XValue – index values
ToolTip
Comma for every thousandth digit on YAxis

3. Customizing Visifire

Chart in the previous section is Minimal in the sense we have not set any property required to customize the Chart. Below are few of the common stuff that you might want to add to the Chart.

Title
XValue/AxisXLabel for each DataPoint
Prefix a symbol to the labels on YAxis – $ for example to make Label to look like $50,000
Customize Values shown in the Tooltip

Below is how the Chart looks after customization

"clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

           Width="500" Height="300">

         "Product Sales by Month">

         "$">

         "#AxisXLabel, Y = #YValue">

                 "Jan" YValue="207349" />

                 "Feb" YValue="274316" />

                 "Mar" YValue="318845" />

                 "Apr" YValue="345254" />

                 "May" YValue="351139" />

In the above example I’ve used AxisXLabel, as the Labels on the XAxis are strings. If the values are numeric, then you can use XValue. In case you set both the properties, then the DataPoints are placed according to XValue and XValues are replaced by AxisXLabels wherever available. Below is an example.

"clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

          Width="500" Height="300">

        "#AxisXLabel, Y = #YValue">

                "1" YValue="207349" />

                "3" YValue="274316" />

                "4" YValue="318845" />

                "5" AxisXLabel="Five" YValue="345254" />

                "6" YValue="351139" />

4. How the PlotArea width is calculated and how to control it

While allocating region for various elements in the Chart, PlotArea viewport width is determined at the end after allocating region for Title, Legend, AxisX, AxisY. So for example, if we place Legend to the right, then the viewport size reduces depending on the Legend Size. Below is an illustration.

You can see that the PlotArea "Viewport" width has reduced because of the Legend. But at the same time, the Actual PlotArea Size can extend further resulting in a ScrollBar. This can happen whenever ScrollingEnabled is set to true.

Through some trials, we have determined the relation between the DataPoint Width and Chart Size which makes the Chart to look good/readable and accordingly we are setting the PlotArea Width. Below is the algorithm.

If, ( Max Difference of XValues / Min Difference of XValues ) > MagicNumber, that means PlotArea width needs to be more than that of the viewport width – which results in ScrollBar. We found the equation for MagicNumber through trials with varying chart sizes and varying number of DataPoints. Below is how we calculate it.

MagicNumber = Current PlotArea width * 35 / 550

Now, PlotArea width can be calculated as below.

PlotArea width = ( Max Difference of XValues / Min Difference of XValues ) * 550 / 34

For multi series Column and Bar Charts, we need to multiply 550 with appropriate number of series that get rendered side by side.

5. How Datapoint width is calculated and how to control it

In case of Column and Bar Charts, DataPointWidth is determined based on the two closest DataPoints. Say, the XValues of 4 DataPoints are {1, 4, 5, 7, 9}, then the closest two DataPoints are 2nd and 3rd with difference in XValue of 1. So, in order to be able to draw both the DataPoints without overlap, we need to divide the available space between the two. As a result of which, Maximum Width of DataPoints will be equal to the minimum difference between XValues.

Now, we also need to give some spacing between the two DataPoints which is determined as .1 * ( Minimum Difference of XValues ). So, the DataPoint width finally comes down to .9 * ( Minimum Difference of XValues ) . In case the Chart is MultiSeries, then we need to place multiple columns within the same region. So, the column width calculated as above is divided by the number of series needed to be drawn.

In certain cases, the calculated width can go below 1px which will make Columns invisible. So, Visifire sets a lower limit of 2px to DataPoint width. You can also control the width of DataPoint by setting DataPointWidth property as a percentage of PlotArea ViewPort width. For example, setting the DataPointWidth to 5 will result in a Chart as below.

Please note that increasing/decreasing the Width of DataPoints will not change the relative position of DataPoints. So, if you increase the DataPointWidth over a certain range, columns will actually overlap. In the next section I’ll explain how you can overcome this limitation.

6. How Axis, Interval and AxisLabels work

Whenever you create a chart, by default Visifire tries to calculate the best possible Range and interval for Axis so that it is easier for the Humans to grasp/read. Human readable in the sense, it tries to make the interval a multiple of 1,2,5 or 10 and tries to keep the number of intervals around 8. So, whenever the interval is not 1, it might skip some of the AxisXLabel if you have defined.

     "1" YValue="207349" />

     "3" YValue="274316" />

     "4" AxisXLabel="Four" YValue="318845" />

     "5" YValue="345254" />

     "6" YValue="351139" />

     "7" YValue="217349" />

     "9" YValue="224316" />

     "10" YValue="298845" />

     "11" YValue="335254" />

     "13" YValue="371139" />

Note that I’ve skipped all other elements apart from DataPoints collection just to keep the xaml compact. In the above example you can see that the interval is 2. So, if in case you set AxisXLabel for 3rd DataPoint, then it’ll not be shown. You can override this default behavior by setting the interval property of Axis to 1 as shown below.

    "1">

    "#AxisXLabel, Y = #YValue">

            "1" YValue="207349" />

            "3" YValue="274316" />

            "4" AxisXLabel="Four" YValue="318845" />

            "5" YValue="345254" />

            "6" YValue="351139" />

            "7" YValue="217349" />

            "9" YValue="224316" />

            "10" YValue="298845" />

            "11" YValue="335254" />

            "13" YValue="371139" />

While rendering the Axis, Visifire tries to automatically place AxisLabels in such a way that they don’t overlap. Say, if we change the AxisXLabel from "Four" to "XValue is Four", then it is obvious that the Label is long and it’ll overlap the neighboring AxisLabels. So, Visifire starts showing labels in 2 rows as shown below.

Now if we further increase the AxisXLabel to "DataPoint XValue is Four", then it becomes difficult to show Labels in two rows. So the next alternative will be to rotate the AxisLabel so that it doesn’t overlap the neighboring AxisXLabels.

You can customize Axis by setting Interval, MinimumValue, MaximumValue, etc as mentioned in the following document.

7. How Labels are placed

Below is an image showing Labels in Visifire. In order to show Label, one needs to enable them by setting LabelEnabled to True in DataSeries.

"True" ToolTipText="#AxisXLabel, Y = #YValue">

        "207349" />

        "274316" />

        "318845" />

        "Label" YValue="345254" />

        "351139" />

        "217349" />

        "224316" />

        "298845" />

        "335254" />

        "371139" />

See that Labels and AxisLabels are different. AxisLabel is one which is shown below the Axis and Labels are shows on/above the DataPoints.

You can observe that few of the Labels are outside the DataPoint and few are inside. Few have Black font color and few have White. Though the placement seems random at first place, it is not. Below I’ll explain the flow.

While placing Label for a DataPoint, Visifire first tries to place it horizonatally outside DataPoint. If the DataPoint width is more than the Label’s width, then Label is placed horizontally as in case of 4th DataPoint. If the DataPoint width is less than that of Label’s, then the Label is placed vertically. Now, whether the Label is placed on top of columns or inside the columns is determined by the availability of space outside the Column. If there is enough space outside the column, then the Labels are placed outside of DataPoint. If not, then the Labels are placed inside DataPoint.

Creating Silverlight Charts from SQL Data using ASP.Net and Visifire

vivek — Thu, 21 May 2009 13:23:00 +0000

Introduction

In this tutorial am going to show you how to pull SQL data and create a nice chart out of it using Visifire. It just takes few minutes!!

In order to create this sample, I chose Microsoft SQL Server Sample database Northwind.mdf. You can download it here.

Visifire is available in two flavors. One in the form of an assembly which you can use within Silverlight applications and another one packaged as .xap file which you can embed within any webpage. Am using the latter one.

Visifire requires the Data to be furnished in the form of XML through a JavaScript API (Visifire2.js). You can either pass an XML string or specify the URI where XML data is available. In this example am using the latter method. In order to understand the basic XML structure required by Visifire, you can refer the documentation.

Project Setup

Create an “ASP.Net Web Application” project and add a new folder “Visifire”. Download the latest Visifire binaries from here. Extract the Zip file and add two files named “SL.Visifire.Charts.xap” and “Visifire2.js” to the folder. Now, add NORTHWND.MDF file into App_Data folder in the solution.

Am using two aspx pages in this sample.

Data.aspx – One which pull the Data from SQL and creates required XML structure out of it. Am using aspx page just to keep it simple.
Default.aspx – Chart is embedded into this page.

Below are the steps that we are going to follow.

Pull the SQL Data in Data.aspx.cs file.
Construct the Data XML inside Data.aspx.cs and return.
Embed the Chart into Default.aspx page and set the DataUri to Data.aspx.

Pulling the Data From SQL Server DataBase

Just to keep it simple, am going to pull the Data in an aspx page (Data.aspx.cs), build XML out of it and return.

Open Data.aspx file and remove all the html code except for Page directive. So the page should have only one line of code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Data.aspx.cs" Inherits="Data" %>

Now open Data.aspx.cs file and add the following code to setup a SQL Server DataBase connection inside the Page_Load event handler as shown below.

// Set the NORTHWND.MDF file path

String path = Server.MapPath("App_Data/NORTHWND.MDF");

// Set the connection string

String connectionString = "Data Source=.\\SQLEXPRESS;AttachDbFilename=" + path + ";Integrated Security=True;User Instance=True";

// Query DataBase

String query = "SELECT CategoryName, SUM(ProductSales) AS CategorySales"

               + " FROM [Product Sales for 1997] "

               + "GROUP BY CategoryName";

// Initialize the Sql connection

SqlConnection con = new SqlConnection(connectionString);

// Open connection

con.Open();

// Initialize DataTable class

DataTable dt = new DataTable();

// Initialize SqlDataAdapter class

SqlDataAdapter da = new SqlDataAdapter();

// Set the Sql command

da.SelectCommand = new SqlCommand(query, con);

// Fill DataSet with rows

da.Fill(dt);

// Close connection

con.Close();

Creating the XML Data

Now am going to build the Data XML that needs to be passed over to Visifire Chart control. Sample XML Data Looks like below.

"clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme1" >

        "$">

        "Category wise Sales for the year 1997" FontSize="14"/>

        "Column">

                "Beverages" YValue="102074.3100"/>

                "Condiments" YValue="55277.6000"/>

                "Confections" YValue="80894.1400"/>

                "Dairy Products" YValue="114749.7800"/>

                "Grains/Cereals" YValue="55948.8200"/>

                "Meat/Poultry" YValue="81338.0600"/>

                "Produce" YValue="53019.9800"/>

                "Seafood" YValue="65544.1800"/>

You can play around with the Chart Designer to get a better picture of Visifire’s basic features.

Below is the code which generates the required XML.

// Initialize StringBuilder class

StringBuilder chartXml = new StringBuilder();

// Append chart XML data

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

foreach (DataRow dataRow in dt.Rows)

    chartXml.Append(" + dataRow["CategoryName"].ToString() + "\" YValue=\"" + dataRow["CategorySales"].ToString() + "\"/>");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

chartXml.Append("");

// Write object to an HTTP response stream

Response.Write(chartXml);

Create Chart

Now open Default.aspx page and add the following code. First we need to add a reference to Visifire2.js file inside the Head section of Default.aspx page.

"server">

Then inside the body, create a div element and add the JavaScript code which renders the Chart.

"VisifireChart0">

Make sure that the path for Visifire2.js and SL.Visifire.Charts.xap files are correct. Set Default.aspx as Start Page and run the application.

Below is a snapshot of the chart.

You can download the complete solution here.

DateTime Axis with Visifire

Chirag — Fri, 20 Mar 2009 15:37:50 +0000

Current release includes a major feature – DateTime Axis. If the XValue of the DataPoints are of type DateTime, Visifire automatically switches XAxis to Date Axis. For more precision on the visualization following properties can be used.

Two properties have been introduced:

XValueType in DataSeries, and
IntervalType in AxisX.

XValueType can have any of these following values

Auto (Default)
Numeric
Date
DateTime, or
Time

IntervalType property can have any of these following values

(Default) Auto
Number
Years
Months
Weeks
Days
Hours
Minutes
Seconds, or
Milliseconds

By default the XValueType is set to Date, if XValue is of type DateTime. To consider both date & time in the axis, XValueType should be set to DateTime. If you want to consider only the Time part of DateTime, it can be done so by setting XValueType to Time.

IntervalType will be set to the most relevant one internally, according to XValues. However, it can be set manually according to the requirement.

Below are some samples for DateTime Axis.

DateTime Axis Example:

"MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
          Width="500" Height="300" ScrollingEnabled="False">

        "DateTime Axis"/>
    
        "Days">
        
        "Column" XValueType="DateTime">
            
                "1/30/2000 12:00:12" YValue="20"/>
                "2/15/2000 10:12:4" YValue="10"/>
                "3/02/2000 23:00:6" YValue="30"/>
                "2/03/2000 18:45:10" YValue="40"/>
                "2/02/2000 12:00:00" YValue="15"/>
                "2/28/2000 12:22:00" YValue="28"/>

Date Axis Example:

"MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" ScrollingEnabled="False">

        "Date Axis"/>
    
        "Months" Interval="1">
        
        "Column" XValueType="Date">
            
                "1/5/2000 12:00:12" YValue="20"/>
                "2/8/2000 10:12:4" YValue="10"/>
                "3/2/2000 23:00:6" YValue="30"/>
                "2/3/2000 18:45:10" YValue="40"/>
                "4/2/2000 12:00:00" YValue="15"/>
                "5/6/2000 12:22:00" YValue="28"/>

Time Axis Example:

"MyChart" Theme="Theme1" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" ScrollingEnabled="False">

         "Time Axis"/>
     
         "Seconds">
         
         "Column" XValueType="Time">
             
                 "1/30/2000 1:00:12" YValue="20"/>
                 "2/15/2000 2:2:4" YValue="10"/>
                 "3/02/2000 2:12:6" YValue="30"/>
                 "2/03/2000 2:28:10" YValue="40"/>
                 "8/02/2000 3:12:6" YValue="30"/>
                 "2/04/2000 8:12:10" YValue="40"/>

Cheers,

Team Visfire

Drilldown Silverlight Charts using Visifire

Chirag — Thu, 05 Mar 2009 10:24:25 +0000

Creating Drilldown chart is a common requirement in any RIA dashboard. Drilldown charts give rich user experience. In this blog let’s see how we can create drilldown charts using Visifire.

In this sample application, chart can be drilled down till 2 levels. The default chart would show yearly sales of a fictitious company for the period 2006-2008. On click of column representing the sales for an year, monthly sales for that year is shown up. Further it can be drilled down to find product wise sales for the selected month.

This sample uses Javascript API to generate charts. The complete application can be downloaded from here. The code is completely commented & explained wherever necessary. Refer the rest of the blog if you need more help.

Data can be pulled in from any data source. To keep the example simple let’s store the sales data in an array.

var sales;
// Create array for the Sales data
sales = [{year: 2006, month: "Jan", ProductX: 20000, ProductY: 25000, ProductZ: 15000},
         {year: 2006, month: "Feb", ProductX: 10000, ProductY: 23000, ProductZ: 25000},
         {year: 2006, month: "Mar", ProductX: 22000, ProductY: 38000, ProductZ: 83000},
         {year: 2006, month: "Apr", ProductX: 23456, ProductY: 32435, ProductZ: 24223},
         {year: 2006, month: "May", ProductX: 25142, ProductY: 32415, ProductZ: 10923},
         {year: 2006, month: "Jun", ProductX: 18254, ProductY: 15342, ProductZ: 10934},
         {year: 2006, month: "Jul", ProductX: 18562, ProductY: 19832, ProductZ: 10293},
         {year: 2006, month: "Aug", ProductX: 28376, ProductY: ..............

Construct the XML string from the data stored in the array.

function getYearlySales()
{
    isChart1Added = true;
    var myXAML;
    // Constructing Data XAML
    myXAML = '' + "\n" + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n" + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '' + "\n";
    sales.sort(sortByYear);
    var totalSales = 0;
    currYear = sales[0].year;
    for (var arrayIndex = 0; arrayIndex < sales.length; arrayIndex++)
    {
        if(sales[arrayIndex].year == currYear)
        {
            currYear = sales[arrayIndex].year;
            totalSales += sales[arrayIndex].ProductX + sales[arrayIndex].ProductY + sales[arrayIndex].ProductZ;
        }
        else
        {
            myXAML = myXAML + ''" YValue="' + totalSales + '"/>' + "\n";
            totalSales = 0;
            currYear++;
        }
    }
    myXAML = myXAML + ''" YValue="' + totalSales + '"/>' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + "\n" + '' + "\n";
    myXAML = myXAML + '' + "\n";
    myXAML = myXAML + '';
    return myXAML;
}

First, create the chart for yearly sales. Next, attach an event handler for “MouseLeftButtonUp” event to the DataSeries. On fire of this event, this chart is replaced with a chart with monthly sales for the year represented by the selected DataPoint in that DataSeries. Event handler can be attached as shown in the code snippet below.

// Attaching event handler for MouseLeftButtonUp event
vChart1.preLoad = function(args) {
    chart1 = args[0];
    chart1.Series[0].MouseLeftButtonUp = function(e) {
        onMouseUpMonthlySales(e.AxisXLabel); //Calling the function to replace the chart
    };
};

Use the same logic to replace this chart with a chart with product wise sales for the selected month. The crux of a drilldown chart is to attach an event handler to update the chart on fire of some event. I think we have accomplished the same swiftly in this sample. A link/button to return back to the previous state of the chart would give a holistic user experience.

You can see the sample in action here. The complete solution can be downloaded from here.

Cheers,

Team Visifire.