Match a value to its category

[florent]

Hi,

I'm implementing an application and I'd like to use a bar chart to show connexion on a website per day on the last week.
I need to bind my values from my model (Y axis), but also to bind the days that need to be displayed on the screen (X axis)
I can add my values that will be displayed in the chart.
I also can set my chart so that it only display the days from the past week.

However I don't know how to match my values ( = my bars) on a specific day (x axis).

<telerik:RadChart.SeriesMappings>
                    <telerikCharting:SeriesMapping ItemsSource="{Binding DailyValues, Mode=TwoWay}" >
                        <telerikCharting:ItemMapping DataPointMember="YValue" />
                    </telerikCharting:SeriesMapping>
                    <telerikCharting:SeriesMapping >
                        <telerikCharting:ItemMapping DataPointMember="XCategory"/>
                    </telerikCharting:SeriesMapping>
                </telerik:RadChart.SeriesMappings>

                <telerikChart:RadChart.DefaultView>
                    <telerikCharting:ChartDefaultView >
                        <telerikCharting:ChartDefaultView.ChartArea>
                            <telerikCharting:ChartArea>
                                <telerikCharting:ChartArea.AxisX>
                                    <telerikCharting:AxisX IsDateTime="True" DefaultLabelFormat="dd MMM" AutoRange="False" MinValue="{Binding MinDateTime}" MaxValue="{Binding MaxDateTime}" Step="1" LayoutMode="Between" Title="Jours">
                                    </telerikCharting:AxisX>
                                </telerikCharting:ChartArea.AxisX>
                                <telerikCharting:ChartArea.AxisY>
                                    <telerikCharting:AxisY Title="Nombre d'appels"></telerikCharting:AxisY>
                                </telerikCharting:ChartArea.AxisY>
                            </telerikCharting:ChartArea>
                        </telerikCharting:ChartDefaultView.ChartArea>
                    </telerikCharting:ChartDefaultView>
                </telerikChart:RadChart.DefaultView>
            </telerikChart:RadChart>

Thanks for your replies,

Florent

[florent]

I tried another method but with no effective result:

A class called Data:

public class Data
    {
        public int ConnexionCount {
            get {
                return ConnexionTimes.Count;
            }
        }
        public List<TimeSpan> ConnexionTimes { get; set; }
        public DateTime ConnexionDate { get; set; }
    }

A list of Data in my viewmodel:

private ObservableCollection<Data> _dailyValues;
        public ObservableCollection<Data> DailyValues
        {
            get
            {
                return _dailyValues;
            }
            set
            {
                _dailyValues = value;
            }
        }

And the xaml from my view:

<telerikChart:RadChart x:Name="radChart" Height="400" Width="800">
                <telerik:BarSeries ItemsSource="{Binding DailyValues, Mode=TwoWay}" PaletteMode="DataPoint">
                    <telerik:BarSeries.CategoryBinding>
                        <telerik:PropertyNameDataPointBinding PropertyName="ConnexionDate"/>
                    </telerik:BarSeries.CategoryBinding>
                    <telerik:BarSeries.ValueBinding>
                        <telerik:PropertyNameDataPointBinding PropertyName="ConnexionCount"/>
                    </telerik:BarSeries.ValueBinding>

                </telerik:BarSeries>
                <telerik:RadChart.SeriesMappings>
                    <telerikCharting:SeriesMapping ItemsSource="{Binding DailyValues, Mode=TwoWay}">
                        <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="ConnexionCount"/>
                        <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="ConnexionDate"/>
                    </telerikCharting:SeriesMapping>

                </telerik:RadChart.SeriesMappings>

                <telerikChart:RadChart.DefaultView>
                    <telerikCharting:ChartDefaultView >
                        <telerikCharting:ChartDefaultView.ChartArea>
                            <telerikCharting:ChartArea>

                                <telerikCharting:ChartArea.AxisY>
                                    <telerikCharting:AxisY Title="Nombre d'appels"></telerikCharting:AxisY>
                                </telerikCharting:ChartArea.AxisY>
                            </telerikCharting:ChartArea>
                        </telerikCharting:ChartDefaultView.ChartArea>
                    </telerikCharting:ChartDefaultView>
                </telerikChart:RadChart.DefaultView>
            </telerikChart:RadChart>

I still don't get what I'm missing,
Any help would be very appreciated !

[Boris]

Hello Florent,

Sorry for the delayed response. 

The reason for your issues is because you are trying to use a RadChartView control functionality in a RadChart control (the BarSeries). We highly encourage you not to use both controls in the same application. The reason for this is that there might be ambiguities when you reference both the Chart and Charting assemblies. For example there is a class named LineSeries in the Chart assembly, and there is a different class with the same name LineSeries in the Charting assembly. Now, both of these classes are mapped to the Telerik schema, so when you type <telerik:LineSeries /> the XAML parser does not know which of the two you mean. Thus an error occurs.Here the schema is defined like this:
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

The fix is also very simple. Instead of using the schema, you can use the desired namespace:
xmlns:telerikChartView="clr-namespace:Telerik.Windows.Controls.ChartView"
<telerikChartView:LineSeries />

This is why we highly encourage you to use only the RadChartView control. It is easier to use and it supports nearly all the functionalities of the old RadChart. You can find more details about the differences in the RadChartView vs. RadChart documentation article. 

I attached a sample project which uses the RadChartView and demonstrates how you can bind your values to a specific day. 

Please examine the sample project and let us know if you need any further assistance.

Regards,
Boris Penev
Telerik