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

[Leandro]

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.

[Lance | Senior Manager Technical Support]

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

[Leandro]

Thanks so much Lance, your reply was really helpful, sorry about misplacing the question.