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

UWP RadCartesianChart does not work with horizontal linear and vertical linear axes

2 Answers 89 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Leandro
Top achievements
Rank 1
Leandro asked on 23 Feb 2019, 07:40 PM

Hi.

I'm trying to plot a function with numeric domain and image in an UWP app. For that I'm using RadCartesianChart and a LineSeries. I downloaded the TelerikUWP library from Nuget.

Both axes are LinearAxis, ItemsSource is an ObseravableCollection<SampleData>, where SampleData is a Class with two properties 1) double Value 2) int Category

the chart shows empty on screen

When I change the horizontal axis from linear to CategoricalAxis, the data shows, the LineSeries appears.

but I do not want that, because when the data is irregular spaced, the domain axis will be equally spaced. And that would not be correct.

for example if I want to show {0, 10},{1,5},{10,2}, the three points will be equally spaced in horizontal axis.

I also want to use Logarithmic axis in the horizontal axis, since I also need to show logarithmic curves (with 300 or more points)

Thanks in advance.

2 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 25 Feb 2019, 11:18 PM
Hello Leandro,

I recommend using ScatterLineSeries or ScatterSplineSeries for two numerical/logarithmic axes. This series types were designed specifically to work with two numerical axes.

Here's both of them in the same chart with the same data shape you mentioned. The  is in red and the ScatterSpline is in yellow.



Find this demo attached, here's the code.

<chart:RadCartesianChart>
    <chart:RadCartesianChart.VerticalAxis>
        <chart:LinearAxis />
    </chart:RadCartesianChart.VerticalAxis>
    <chart:RadCartesianChart.HorizontalAxis>
        <chart:LinearAxis />
    </chart:RadCartesianChart.HorizontalAxis>
    <chart:RadCartesianChart.Series>
        <chart:ScatterLineSeries ItemsSource="{Binding DataPoints}">
            <chart:ScatterLineSeries.XValueBinding>
                <chart:PropertyNameDataPointBinding PropertyName="Category" />
            </chart:ScatterLineSeries.XValueBinding>
            <chart:ScatterLineSeries.YValueBinding>
                <chart:PropertyNameDataPointBinding PropertyName="Value" />
            </chart:ScatterLineSeries.YValueBinding>
        </chart:ScatterLineSeries>
        <chart:ScatterSplineSeries ItemsSource="{Binding DataPoints2}" >
            <chart:ScatterSplineSeries.XValueBinding>
                <chart:PropertyNameDataPointBinding PropertyName="Category" />
            </chart:ScatterSplineSeries.XValueBinding>
            <chart:ScatterSplineSeries.YValueBinding>
                <chart:PropertyNameDataPointBinding PropertyName="Value" />
            </chart:ScatterSplineSeries.YValueBinding>
        </chart:ScatterSplineSeries>
    </chart:RadCartesianChart.Series>
    <chart:RadCartesianChart.Palette>
        <chart:ChartPalette>
            <chart:ChartPalette.FillEntries>
                <chart:PaletteEntryCollection>
                    <SolidColorBrush Color="DarkRed"/>
                    <SolidColorBrush Color="Goldenrod"/>
                </chart:PaletteEntryCollection>
            </chart:ChartPalette.FillEntries>
            <chart:ChartPalette.StrokeEntries>
                <chart:PaletteEntryCollection>
                    <SolidColorBrush Color="Goldenrod"/>
                    <SolidColorBrush Color="DarkRed"/>
                </chart:PaletteEntryCollection>
            </chart:ChartPalette.StrokeEntries>
        </chart:ChartPalette>
    </chart:RadCartesianChart.Palette>
</chart:RadCartesianChart>


public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        var rand = new Random();
         
        DataPoints = new ObservableCollection<SampleData>();
 
        for (int i = 0; i < 15; i++)
        {
            DataPoints.Add(new SampleData { Category = i, Value = rand.Next(8, 20)});
        }
 
        DataPoints2 = new ObservableCollection<SampleData>();
 
        for (int i = 0; i < 15; i++)
        {
            DataPoints2.Add(new SampleData { Category = i, Value = rand.Next(1, 10) });
        }
    }
 
    public ObservableCollection<SampleData> DataPoints { get; set; }
 
    public ObservableCollection<SampleData> DataPoints2 { get; set; }
}
 
public class SampleData
{
    public double Value { get; set; }
    public int Category { get; set; }
}

Although I believe you're using the same property names as you seen in the documentation's sample class (you just changed to ), I recommend renaming the X axis's property name. Category usually indicates a categorical value as opposed to a numerical value.

Side Note:
The demo project uses the UI for UWP Extension SDK and not the open source version. This is because the Telerik Forums and Support system are available for the licensed version of the product, while the open source version support can be found on StackOverflow or GitHub Issues. That being said, you can just change the projects references to use whatever version you prefer :)

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Leandro
Top achievements
Rank 1
answered on 26 Feb 2019, 04:07 AM
Thanks so much Lance, your reply was really helpful, sorry about misplacing the question.
Tags
Chart
Asked by
Leandro
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Leandro
Top achievements
Rank 1
Share this question
or