Using strings for y-axis values

[Clifford]

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.

[Petar Marchev]

Hello Clifford,

I think the best way to go here is to go here is by setting a vertical categorical axis and a horizontal linear. You can easily work-around for the linear axis to show date-time values in a desired format. I have attached a very simple app to demonstrate the suggested approach.

Greetings,
Petar Marchev
the Telerik team

[Chris Lynch]

your XMALreferences a converter

DoubleToDateTimeLabelConverter
but its not include in project can you show what it looks like?

[Petar Marchev]

Hello Chris,

The converter is in the MainWindow.xaml.cs file.

All the best,
Petar Marchev
the Telerik team

[Chris Lynch]

I'm looking to do something similar but with a  ScatterPointSeries
with a categorial Y axis (see attached example)
any help would be appreciated

Imports

 

 

System.Collections.ObjectModel

 

Public

 

 

Class ctlPatternByCat

 

 

 

 

 

Private Sub ctlPatternByCat_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

 

 

 

Dim mycol As New ObservableCollection(Of chartdata)

 

mycol.Add(

 

New chartdata(#12/12/2005#, "W11", 1))

 

mycol.Add(

 

New chartdata(#2/12/2006#, "W11", 1))

 

mycol.Add(

 

New chartdata(#3/12/2006#, "W11", 1))

 

mycol.Add(

 

New chartdata(#4/12/2006#, "W11", 1))

 

mycol.Add(

 

New chartdata(#12/12/2005#, "W12", 2))

 

mycol.Add(

 

New chartdata(#2/12/2006#, "W12", 2))

 

mycol.Add(

 

New chartdata(#3/12/2006#, "W12", 2))

 

mycol.Add(

 

New chartdata(#4/12/2006#, "W12", 2))

 

Series1.ItemsSource = mycol

 

 

End Sub

 

 

 

Public Class chartdata

 

 

 

Private mvarXVAL As Double

 

 

 

Public ReadOnly Property XVal() As Double

 

 

 

Get

 

 

 

Return Me.COMP_DATE.Value.ToOADate()

 

 

 

End Get

 

 

 

End Property

 

 

 

Private mvarYVal As Integer

 

 

 

Public Property YVal() As Integer

 

 

 

Get

 

 

 

Return mvarYVal

 

 

 

End Get

 

 

 

Set(ByVal value As Integer)

 

mvarYVal = value

 

 

End Set

 

 

 

End Property

 

 

 

Private _cOMPDATE As Date?

 

 

 

Public Overridable Property COMP_DATE As Date?

 

 

 

Get

 

 

 

Return Me._cOMPDATE

 

 

 

End Get

 

 

 

Set(ByVal value As Date?)

 

 

 

Me._cOMPDATE = value

 

 

 

End Set

 

 

 

End Property

 

 

 

Private mvarYValDisplay As String

 

 

 

Public Property YValDisplay() As String

 

 

 

Get

 

 

 

Return mvarYValDisplay

 

 

 

End Get

 

 

 

Set(ByVal value As String)

 

mvarYValDisplay = value

 

 

End Set

 

 

 

End Property

 

 

 

Public Sub New(ByVal Comp_Date As Date?, ByVal YDisplay As String, ByVal YVal As Integer)

 

mvarYVal = YVal

mvarYValDisplay = YDisplay

_cOMPDATE = Comp_Date

 

 

End Sub

 

 

 

End Class

 

End

 

 

Class

 

<

 

 

UserControl x:Class="ctlPatternByCat"

 

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

 

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 

 

 

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

 

 

 

xmlns:local="clr-namespace:DART_WPF35"

 

 

 

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

 

 

 

xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"

 

 

 

mc:Ignorable="d"

 

 

 

d:DesignHeight="300" d:DesignWidth="300">

 

 

 

 

<UserControl.Resources>

 

 

 

 

<local:DoubleToDateTimeConverter x:Key="DoubleToDateTimeConverter" />

 

 

 

 

<local:DateToDoubleConverter x:Key="DateToDoubleConverter" />

 

 

 

 

<local:StringToDouble x:Key="StringToDouble" />

 

 

 

 

<local:YValPatternConverter x:Key="YvalConvert" />

 

 

 

 

<DataTemplate x:Key="ListBoxItemTemplate" >

 

 

 

 

<Grid>

 

 

 

 

<StackPanel HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Orientation="Horizontal">

 

 

 

 

<Ellipse Fill="{Binding SeriesColor}" Height="15" Stroke="Black" Width="15" HorizontalAlignment="Center" VerticalAlignment="Top" ToolTip="{Binding PatternTitle}"/>

 

 

 

 

<TextBox TextWrapping="Wrap" MaxWidth="125" VerticalAlignment="Top" Text="{Binding Path=PatternTitle, Mode=TwoWay}"/>

 

 

 

 

</StackPanel>

 

 

 

 

</Grid>

 

 

 

 

 

</DataTemplate>

 

 

 

 

<Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem" >

 

 

 

 

<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />

 

 

 

 

<Setter Property="Width" Value="Auto" />

 

 

 

 

<Setter Property="MaxWidth" Value="200" />

 

 

 

 

</Style>

 

 

 

 

</UserControl.Resources>

 

 

 

 

<Grid Name="LayoutRoot">

 

 

 

 

<Grid.RowDefinitions>

 

 

 

 

<RowDefinition Height="265*" />

 

 

 

 

<RowDefinition Height="35*" />

 

 

 

 

</Grid.RowDefinitions>

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition Width="29*" />

 

 

 

 

<ColumnDefinition Width="271*" />

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<telerik:RadCartesianChart x:Name="chart" MaxHeight="800" MaxWidth="1200" Palette="Flower" AllowDrop="True"

 

 

 

Grid.Column="1" Grid.RowSpan="1">

 

 

 

 

 

 

<telerik:RadContextMenu.ContextMenu>

 

 

 

 

<telerik:RadContextMenu >

 

 

 

 

<telerik:RadMenuItem x:Name="mnuSaveChart" Header="Save Chart to Disk" Visibility="Visible"/>

 

 

 

 

</telerik:RadContextMenu>

 

 

 

 

</telerik:RadContextMenu.ContextMenu>

 

 

 

 

 

 

<telerik:RadCartesianChart.Behaviors>

 

 

 

 

<telerik:ChartTooltipBehavior Placement="Top" VerticalOffset="-10" />

 

 

 

 

<telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>

 

 

 

 

<telerik:ChartSelectionBehavior DataPointSelectionMode="Single" />

 

 

 

 

</telerik:RadCartesianChart.Behaviors>

 

 

 

 

<telerik:RadCartesianChart.TooltipTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<StackPanel>

 

 

 

 

<StackPanel.Background>

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">

 

 

 

 

<GradientStop Color="#FF353535" Offset="0.025"/>

 

 

 

 

<GradientStop Color="#FFA59A9A" Offset="0.813"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

</StackPanel.Background>

 

 

 

 

 

<Image Height="25" Width="75" Source="/DART_WPF35;component/IconImages/H53E_Small.PNG" HorizontalAlignment="Left" VerticalAlignment="Top"/>

 

 

 

 

<TextBlock Text="BUNO" FontSize="12" Foreground="White" VerticalAlignment="Top" />

 

 

 

 

<TextBlock Text="{Binding DataItem.BU_SERNO}" Foreground="White" FontSize="12" FontFamily="Arial" />

 

 

 

 

<TextBlock Text="COMP DATE" FontSize="12" Foreground="White" />

 

 

 

 

<TextBlock Text="{Binding DataItem.COMP_DATE}" Foreground="White" FontSize="12" FontFamily="Arial" TextWrapping="Wrap" />

 

 

 

 

<TextBlock Text="Descrep Narrative" FontSize="10" Foreground="White" />

 

 

 

 

<TextBlock Text="{Binding DataItem.DESCREP_NARR}" MaxWidth="500" Foreground="White" FontSize="10" FontFamily="Arial" TextWrapping="Wrap" />

 

 

 

 

<TextBlock Text="Corrective Action" FontSize="10" Foreground="White" />

 

 

 

 

<TextBlock Text="{Binding DataItem.CORRECT_ACTION}" MaxWidth="500" Foreground="White" FontSize="10" FontFamily="Arial" TextWrapping="Wrap" />

 

 

 

 

 

</StackPanel>

 

 

 

 

</DataTemplate>

 

 

 

 

</telerik:RadCartesianChart.TooltipTemplate>

 

 

 

 

<telerik:RadCartesianChart.Grid>

 

 

 

 

<telerik:CartesianChartGrid MajorLinesVisibility="XY" StripLinesVisibility="Y" IsTabStop="False">

 

 

 

 

<telerik:CartesianChartGrid.YStripeBrushes>

 

 

 

 

<SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />

 

 

 

 

<SolidColorBrush Color="Transparent" />

 

 

 

 

</telerik:CartesianChartGrid.YStripeBrushes>

 

 

 

 

<telerik:CartesianChartGrid.XStripeBrushes>

 

 

 

 

<SolidColorBrush Color="#FFD7D7D7" Opacity="0.3" />

 

 

 

 

<SolidColorBrush Color="Transparent" />

 

 

 

 

</telerik:CartesianChartGrid.XStripeBrushes>

 

 

 

 

</telerik:CartesianChartGrid>

 

 

 

 

</telerik:RadCartesianChart.Grid>

 

 

 

 

<telerik:RadCartesianChart.VerticalAxis>

 

 

 

 

<telerik:LinearAxis ShowLabels="True" >

 

 

 

 

 

</telerik:LinearAxis>

 

 

 

 

</telerik:RadCartesianChart.VerticalAxis>

 

 

 

 

<telerik:RadCartesianChart.HorizontalAxis>

 

 

 

 

<telerik:LinearAxis Name="myChartXaxis"

 

 

 

LabelRotationAngle="90"

 

 

 

LabelFitMode="Rotate">

 

 

 

 

<telerik:LinearAxis.LabelTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock Margin="2" Text="{Binding Converter={StaticResource DoubleToDateTimeConverter}, StringFormat='MMM dd yyyy'}" />

 

 

 

 

</DataTemplate>

 

 

 

 

</telerik:LinearAxis.LabelTemplate>

 

 

 

 

</telerik:LinearAxis>

 

 

 

 

</telerik:RadCartesianChart.HorizontalAxis>

 

 

 

 

<telerik:RadCartesianChart.Series>

 

 

 

 

<chartView:ScatterPointSeries x:Name="Series1"

 

 

 

YValueBinding="YVal"

 

 

 

XValueBinding="XVal"

 

 

 

ItemsSource="{Binding }">

 

 

 

 

<chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<Ellipse Width="16"

 

 

 

Height="18"

 

 

 

Fill="Green"/>

 

 

 

 

</DataTemplate>

 

 

 

 

</chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

 

</chartView:ScatterPointSeries>

 

 

 

 

<chartView:ScatterPointSeries x:Name="Series2"

 

 

 

YValueBinding="YVal"

 

 

 

XValueBinding="XVal"

 

 

 

DisplayName="TEST">

 

 

 

 

<chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<Ellipse Width="12"

 

 

 

Height="12"

 

 

 

Fill="Aqua" />

 

 

 

 

</DataTemplate>

 

 

 

 

</chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

 

</chartView:ScatterPointSeries>

 

 

 

 

<chartView:ScatterPointSeries x:Name="Series3"

 

 

 

YValueBinding="YVal"

 

 

 

XValueBinding="XVal"

 

 

 

>

 

 

 

 

<chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<Ellipse Width="8"

 

 

 

Height="8"

 

 

 

Fill="Blue"/>

 

 

 

 

</DataTemplate>

 

 

 

 

</chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

 

</chartView:ScatterPointSeries>

 

 

 

 

<chartView:ScatterPointSeries x:Name="Series4"

 

 

 

YValueBinding="YVal"

 

 

 

XValueBinding="XVal"

 

 

 

>

 

 

 

 

<chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<Ellipse Width="4"

 

 

 

Height="4"

 

 

 

Fill="Crimson"/>

 

 

 

 

</DataTemplate>

 

 

 

 

</chartView:ScatterPointSeries.PointTemplate>

 

 

 

 

 

</chartView:ScatterPointSeries>

 

 

 

 

</telerik:RadCartesianChart.Series>

 

 

 

 

</telerik:RadCartesianChart>

 

 

 

 

<telerik:RadListBox Name="lstlegend" Grid.Row="1" ItemContainerStyle="{StaticResource DraggableListBoxItem}" ItemTemplate="{StaticResource ListBoxItemTemplate}" Grid.ColumnSpan="2" SelectionMode="Extended" >

 

 

 

 

<telerik:RadListBox.ItemsPanel>

 

 

 

 

<ItemsPanelTemplate>

 

 

 

 

<VirtualizingStackPanel Orientation="Horizontal" />

 

 

 

 

</ItemsPanelTemplate>

 

 

 

 

</telerik:RadListBox.ItemsPanel>

 

 

 

 

 

 

</telerik:RadListBox>

 

 

 

 

</Grid>

 

</

 

 

UserControl>

 

[Petar Marchev]

Hi Chris,

I think you should not use a LinearAxis for the VerticalAxis as you are trying to show categories and not values. You can use the CategoricalAxis for this. In this case you can not use the scatter series (as they do not work with categories). So you can use a LineSeries with a Transparent Stroke and a PointTemplate. Try this and let us know how it goes. You can use the previously attached project as a reference.

Greetings,
Petar Marchev
the Telerik team