Scroll To Top
Reader Level:

Silverlight Chart Control - Part 1

By Mahadesh Mahalingappa on Aug 28, 2011
In this article we are going to see how we can use the Silverlight Chart Control to create Charts which are always the best way of data visualization.

We are going to see in a series of article how we use Silverlight Charts to visualise data in a exciting way.

In particular we are going to see a Column Series.

Before that lets do some database work.

create table Scorecard
    Batsman varchar(50),
Runs int

insert into Scorecard values ('Sachin Tendulkar',0);
insert into Scorecard values ('Rahul Dravid',100);
insert into Scorecard values ('Virendar Sehwaj',10);

Create a Data Model as shown below :

Data Model in silverlight

Data Model Wizard in silverlight

silverlight Data Model

Create a Silverlight enabled service as shown below :

WCFservice in silverlight

public class DataService
        public IEnumerable<Scores> GetScores()
            CricketDBEntities context = new CricketDBEntities(); 
            var query = from scorecard in context.Scorecards
                        select new Scores
                            Batsman = scorecard.Batsman,
                            Runs = scorecard.Runs
            return query;
        // Add more operations here and mark them with [OperationContract]
    public class Scores
        public string Batsman { get; set; }
        public int? Runs { get; set; }

Modify the code of the Chart1.xaml to look as follows :

<Grid x:Name="LayoutRoot" Background="White">
        <toolkit:Chart  x:Name ="chartControl"  >
                <toolkit:ColumnSeries x:Name="DynamicSingleSeriesWithAxes" DependentValueBinding ="{Binding Runs}"
                                    IndependentValueBinding ="{Binding Batsman}"   /> 

Add the Service reference and then modify the code behind of Chart1 as shown below :

public partial class Chart1 : UserControl
        public Chart1()
              //(this .chartControl.Series[ 0 ]).  =  users ; 
            DataServiceClient client = new DataServiceClient();
            client.GetScoresCompleted += new EventHandler<GetScoresCompletedEventArgs>(client_GetScoresCompleted);
        void client_GetScoresCompleted(object sender, GetScoresCompletedEventArgs e)
            ColumnSeries series0 = (ColumnSeries)chartControl.Series[0];
            series0.ItemsSource = e.Result;

Lets give this a run :

silverlight chart control

Great. Works..