Custom Scatter Area Series

8 posts, 1 answers
  1. Amige
    Amige avatar
    44 posts
    Member since:
    Dec 2013

    Posted 08 Apr Link to this post

    Hi,

    I'd like to know if it is possible to create a custom ScatterAreaSeries like the one shown in the attached image.

    I'd like to indicate some point and only the area between the line and that point to be colored.

    Thanks,

    Alberto

  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 12 Apr Link to this post

    Hello Amige,

    You can use the OriginValue property of the series.
    <telerik:ScatterAreaSeries OriginValue="3" />
    I hope this works for you.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Amige
    Amige avatar
    44 posts
    Member since:
    Dec 2013

    Posted 12 Apr in reply to Martin Link to this post

    Hello Martin,

    Unfortunately I am using the Telerik.Windows.Controls.Chart dll 2014.1.331.40 version, I read that property is available on the 2016.1.215.40 version.

    Is there another way to accomplish that?

    Regards,

    Alberto

  5. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 14 Apr Link to this post

    Hi Alberto,

    Yes, the property is available since Q1 2016. Before that it was possible to achieve such visualization with area series by using the RangeSeries of the chart. Here is an example in code:
    <telerik:RadCartesianChart >          
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>           
        <telerik:RangeSeries>
            <telerik:RangeSeries.DataPoints>
                <telerik:RangeDataPoint Category="1" Low="3" High="3" />
                <telerik:RangeDataPoint Category="2" Low="3" High="5" />
                <telerik:RangeDataPoint Category="3" Low="3" High="3" />
                <telerik:RangeDataPoint Category="4" Low="3" High="10" />
                <telerik:RangeDataPoint Category="5" Low="3" High="9" />
                <telerik:RangeDataPoint Category="6" Low="3" High="7" />
                <telerik:RangeDataPoint Category="7" Low="3" High="3" />
            </telerik:RangeSeries.DataPoints>
        </telerik:RangeSeries>
    </telerik:RadCartesianChart>

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Amige
    Amige avatar
    44 posts
    Member since:
    Dec 2013

    Posted 14 Apr in reply to Martin Link to this post

    Hi Martin,

    That works perfect for me.

    Thanks,

    Alberto

  7. Benny
    Benny avatar
    2 posts
    Member since:
    Jun 2016

    Posted 23 Jun Link to this post

    Hi,

    I ran into a very similar problem. I have two ScatterLineSeries and I want  to colorize the space between them.

    I don't want to use the 'RangeSeries', because that forces me to use 'CategoricalAxis' instead of 'LinearAxis'. My point is, I have a startvalue (x > 0, y > 0) and an endvalue. Those two values should be connected by a line and the horizontal axis should start with 0.

    Thanks for reply,

    Benny

  8. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 28 Jun Link to this post

    Hi Benny,

    The Cartesian chart component doesn't have a built-in mechanism to color the space between line series. In order to achieve such visualization you can try several approaches:
    • You can use RangeSeries as described in my previous approach.
    • Or you can use a custom annotation which could display a Path that represents the area between the lines. However, using this approach you will need to recalculate the Data of the custom shape every time the chart is updated.
    • If you do not have grid defined in the chart, you can try an approach with couple ScatterAreaSeries. The first one will represent the bottom line series and it will have a Fill that matches the background of the plot area. This way only the stroke of the series will be noticeable and it will look like a line. The second area series will represent the second line (above the first one) and it will be defined behind the first series. Its fill will be the area between the lines.

    I hope this information helps.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  9. Benny
    Benny avatar
    2 posts
    Member since:
    Jun 2016

    Posted 29 Jun in reply to Martin Link to this post

    Hi Martin,

    thanks for your reply. I found out, that it's possible to define multiple axis for one direction, so I took a serial and a categorical axis for the horizontal direction. This soolved my problem. I'm not totally happy with this, but it works for me.

    Regards, Benny

Back to Top
UI for WPF is Visual Studio 2017 Ready