Silverlight Chart Control - Part 1

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..