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