Using strings for y-axis values

6 posts, 0 answers
  1. Clifford
    Clifford avatar
    2 posts
    Member since:
    Oct 2011

    Posted 04 Feb 2013 Link to this post

    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.
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 07 Feb 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Chris Lynch
    Chris Lynch avatar
    15 posts
    Member since:
    Mar 2010

    Posted 18 Feb 2013 Link to this post

    your XMALreferences a converter

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

  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 19 Feb 2013 Link to this post

    Hello Chris,

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

    All the best,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Chris Lynch
    Chris Lynch avatar
    15 posts
    Member since:
    Mar 2010

    Posted 08 Mar 2013 Link to this post

    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>

     

  7. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 12 Mar 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready