This is a migrated thread and some comments may be shown as answers.

Custom Scatter Area Series

7 Answers 26 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Amige
Top achievements
Rank 1
Veteran
Amige asked on 08 Apr 2016, 10:12 PM

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

7 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 12 Apr 2016, 01:53 PM
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.
0
Amige
Top achievements
Rank 1
Veteran
answered on 12 Apr 2016, 10:26 PM

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

0
Accepted
Martin Ivanov
Telerik team
answered on 14 Apr 2016, 10:49 AM
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.
0
Amige
Top achievements
Rank 1
Veteran
answered on 14 Apr 2016, 03:53 PM

Hi Martin,

That works perfect for me.

Thanks,

Alberto

0
Benny
Top achievements
Rank 1
answered on 23 Jun 2016, 12:34 PM

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

0
Martin Ivanov
Telerik team
answered on 28 Jun 2016, 08:36 AM
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.
0
Benny
Top achievements
Rank 1
answered on 30 Jun 2016, 04:09 AM

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

Tags
Chart
Asked by
Amige
Top achievements
Rank 1
Veteran
Answers by
Martin Ivanov
Telerik team
Amige
Top achievements
Rank 1
Veteran
Benny
Top achievements
Rank 1
Share this question
or