Drawing a shape in RadCartesianChart/Scaling horizontal axis

2 posts, 0 answers
  1. Mladen
    Mladen avatar
    27 posts
    Member since:
    Nov 2012

    Posted 04 Dec 2012 Link to this post

    Hi,

    I have two different questions, but because they are for one chart and therefore are somehow related i'm writting them in one thread. I'll deeply appreciate any help even for one of them.

    1. How to create a shape in RadCartesianChart? I want to create a big circle which marks only the last point in chart. I'm trying to use AreaSeries but instead of drawing the form it fills the space from HorizontalAxis to vertical value of the point.

    2. How to scale HorizontalAxis. I want horizontal axis to have minimum/maximum value just like the vertical axis, which is LinearAxis. When I use CategoricalAxis for HorizontalAxis the graphic is drawn but I cannot scale. If i replace CategoricalAxis with LinearAxis  no needed graphic is drawed anymore, just empty Chart.

    I use the following code:

    this.AreaSeries = new AreaSeries(){};

    this.LineSeries = new LineSeries(){};

    this.LineSeries.CategoryBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.X };

    this.LineSeries.ValueBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.Y };

    this.AreaSeries.CategoryBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.X };

    this.AreaSeries.ValueBinding = new GenericDataPointBinding<Point, double>() { ValueSelector = (p) => p.Y };
    ...

     

    var linePoints = CreateDataPoints();

    LineSeries.ItemsSource = linePoints;

    LineSeries.Stroke = new SolidColorBrush(StrokeColor);

    var firstPoint = CreateDataPoints().Last();

    var areaPoints = CreateAreaPoints(firstPoint);

    AreaSeries.ItemsSource = areaPoints;

    AreaSeries.Fill = new SolidColorBrush(StrokeColor);

    Chart.Series.Add(this.LineSeries);

    Chart.Series.Add(this.AreaSeries);

     

    XAML:

     

    <telerik:RadCartesianChart x:Name="cartesianChart" FontFamily="{StaticResource MetroFontFamily}" >
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis FontFamily="{StaticResource MetroFontFamily}" FontSize="10" MajorStep="10" Title="{Binding XTag}"></telerik:CategoricalAxis>
                 
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Minimum="{Binding Path=YMin}" MajorStep="10" Maximum="{Binding Path=YMax}" FontFamily="{StaticResource MetroFontFamily}"
                                    FontSize="10" Title="{Binding YTag}" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="Y" MajorYLineDashArray="3,4" />
            </telerik:RadCartesianChart.Grid>
        </telerik:RadCartesianChart>

     

    Thank you in advance!!!

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 07 Dec 2012 Link to this post

    Hi Mladen,

    1. You can use the Annotations feature of the RadCartesianChart. Basically you need to add a CartesianCustomAnnotation to the RadCartesianChart.Annotations collection and specify its HorizontalValue, VerticalValue and Content /ContentTemplate properties. For more information you check this help topic.

    2. The CategoricalAxis does not support custom range like the numerical axes (LinearAxis, LogarithmicAxis) do, however you can workaround this by using scatter series instead of categorical ones. (Scatter series work with 2 numerical axes, instead of one categorical and one numerical like categorical series do.) Both LineSeries and AreaSeries have their scatter variants (ScatterLineSeries and ScatterAreaSeries) so you can easily make the switch. 

    I hope this helps.
     
    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
Back to Top