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 :







Create a Silverlight enabled service as shown below :



public class DataService
    {
        [OperationContract]
        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:Chart.Series>
                <toolkit:ColumnSeries x:Name="DynamicSingleSeriesWithAxes" DependentValueBinding ="{Binding Runs}"
                                    IndependentValueBinding ="{Binding Batsman}"   /> 
            </toolkit:Chart.Series>
        </toolkit:Chart>
    </Grid>

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

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

Lets give this a run :



Great. Works..