Silverlight Chart Control - Part 1

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 :







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