public
class
PlotItemViewModel
{
//y-axis value
public
string
City {
get
;
set
; }
//x-axis value
public
DateTime StartTime {
get
;
set
; }
//added to provide a value useful to a linear axis
public
int
Sequence {
get
;
set
; }
}
public
class
PlotItems
{
public
ObservableCollection<PlotItemViewModel> Items {
get
;
set
; }
public
DateTime RangeStart {
get
;
set
; }
public
DateTime RangeEnd {
get
;
set
; }
public
PlotItems()
{
Items =
new
ObservableCollection<PlotItemViewModel>();
var dateTime = DateTime.Now;
Items.Add(
new
PlotItemViewModel() { City =
"Atlanta"
, StartTime = dateTime.AddMinutes(50), Sequence = 6 });
Items.Add(
new
PlotItemViewModel() { City =
"Atlanta"
, StartTime = dateTime.AddMinutes(10), Sequence = 6 });
Items.Add(
new
PlotItemViewModel() { City =
"New York"
, StartTime = dateTime.AddMinutes(100), Sequence = 5 });
Items.Add(
new
PlotItemViewModel() { City =
"Miami"
, StartTime = dateTime.AddMinutes(120), Sequence = 4 });
Items.Add(
new
PlotItemViewModel() { City =
"Miami"
, StartTime = dateTime.AddMinutes(150), Sequence = 4 });
Items.Add(
new
PlotItemViewModel() { City =
"Savannah"
, StartTime = dateTime.AddMinutes(200), Sequence = 3 });
Items.Add(
new
PlotItemViewModel() { City =
"Birmingham"
, StartTime = dateTime.AddMinutes(250), Sequence = 2 });
Items.Add(
new
PlotItemViewModel() { City =
"New Orleans"
, StartTime = dateTime.AddMinutes(280), Sequence = 1 });
Items =
new
ObservableCollection<PlotItemViewModel>(Items.OrderBy(x => x.StartTime));
RangeStart = Items.First().StartTime.AddMinutes(-Items.First().StartTime.Minute);
RangeEnd = Items.Last().StartTime.AddMinutes(-Items.Last().StartTime.Minute).AddHours(1);
}
}
<
telerik:RadCartesianChart
Margin
=
"5"
>
<
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:DateTimeContinuousAxis
Title
=
"Time"
MajorStepUnit
=
"Hour"
MajorStep
=
"1"
LabelFormat
=
"h:mm tt"
Minimum
=
"{Binding RangeStart}"
Maximum
=
"{Binding RangeEnd}"
>
</
telerik:DateTimeContinuousAxis
>
</
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:LinearAxis
Title
=
"Cities"
/>
</
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:RadCartesianChart.Series
>
<
telerik:LineSeries
ItemsSource
=
"{Binding Items}"
CategoryBinding
=
"StartTime"
ValueBinding
=
"Sequence"
Stroke
=
"Orange"
StrokeThickness
=
"2"
>
</
telerik:LineSeries
>
</
telerik:RadCartesianChart.Series
>
</
telerik:RadCartesianChart
>
I'm working on a simple application with a burn-down chart that will display city names along the y-axis while displaying time values along the x-axis. I am having difficulty getting the chart to display when setting up the line series to display both the string property and date time property.
Is there a way to do this by default? Which axes would provide this functionality if any? I've provided an image of what currently displays, which is what I would like; except that rather than the integers I would like to see the city names. I have provided the integer values as that has been the only way I have been able to get the data to plot in a way that most resembles the final product I wish to have.