Binding Silverlight Chart to XML data source

There are scenarios where one would need to bind the component to an XML data source. Specially presenting the XML data in human readable form is a very common requirement. This blog talks about how you can bind ComponentOne Chart for Silverlight to an XML data source. To demonstrate it lets take an example where user needs to showcase Monthly Expenses of the Department. For this first create an XML file with some data which would showcase the Monthly Expense example in ComponentOne Chart for Silverlight. Name this xml file as "MonthlyExpense.xml" and add it to the project where you are using Chart. Set the BuildAction for this xml file to "Resource"

<?xml version="1.0" encoding="utf-8" ?>  
<expenselists>  
  <expenselist Month="January" EmployeeSalary="18000" MarketingBudget="4000" RecruitmentBudget="9000"/>  
  <expenselist Month="February" EmployeeSalary="15000" MarketingBudget="2500" RecruitmentBudget="10000" />  
  <expenselist Month="March" EmployeeSalary="30500" MarketingBudget="1000" RecruitmentBudget="2000"/>  
</expenselists>  

Due to the limitation of Silverlight you will have to consume this xml file in to a stream to load it an XMLDocument. Here is the code for the same:-

var resource = Application.GetResourceStream(new Uri("/" + new AssemblyName(Assembly.GetExecutingAssembly().FullName).Name + ";component/MonthlyExpense.xml", UriKind.Relative));  
XDocument myXML = XDocument.Load(resource.Stream);  

"myXML" file which we created now contains the xml data from "MonthlyExpense.xml" file. Now create a class with properties similar to data in xml file Using the facility provided by .Net 3.5 you can leave these properties without the body and just use set and get

public class ExpenseList  
    {  
        public string Month { get; set; }  
        public int EmployeeSalary { get; set; }  
        public int MarketingBudget { get; set; }  
        public int RecruitmentBudget { get; set; }  
    }  

Now create a list for ExpenseList type class and fill it with data from "myXML" using code below:-

List<ExpenseList> expenselist =  
            (from list in myXML.Descendants("expenselist")  
             select new ExpenseList()  
             {  
                 Month = list.Attribute("Month").Value,  
                 EmployeeSalary = int.Parse(list.Attribute("EmployeeSalary").Value),  
                 MarketingBudget = int.Parse(list.Attribute("MarketingBudget").Value),  
                 RecruitmentBudget = int.Parse(list.Attribute("RecruitmentBudget").Value),  

             }).ToList();  

You are all set now to set the ItemsSource for ComponentOne Chart for Silverlight:-

c1Chart1.Data.ItemsSource = countrylist;  

Once you have set the ItemsSource for Chart, go to the XAML page and bind the DataSeries for ComponentOne chart to desired property

    <c1:C1Chart c1:C1NagScreen.Nag="True" ChartType="Column" Margin="0,4,12,12" Name="c1Chart1" Palette="Office" Grid.Row="1">  
            <c1:C1Chart.Data >  
                <c1:ChartData ItemNameBinding="{Binding Month}">  
                    <c1:DataSeries  Label="Employee Salary" ValueBinding="{Binding EmployeeSalary}" c1:C1NagScreen.Nag="True" />  
                    <c1:DataSeries  Label="Marketing Budget" ValueBinding="{Binding MarketingBudget}" c1:C1NagScreen.Nag="True" />  
                    <c1:DataSeries  Label="Recrutiment Budget" ValueBinding="{Binding RecruitmentBudget}" c1:C1NagScreen.Nag="True" />  
                </c1:ChartData>  
            </c1:C1Chart.Data>  
            <c1:C1ChartLegend c1:C1NagScreen.Nag="True"></c1:C1ChartLegend>  
           </c1:C1Chart >  

This is how then your output Chart binded with XML DataSource will look like:- You may download the sample application for a better demonstration from here. C1ChartXMLBinding