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

Match a value to its category

2 Answers 40 Views
Chart
This is a migrated thread and some comments may be shown as answers.
florent
Top achievements
Rank 1
florent asked on 17 Mar 2014, 11:08 AM
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

2 Answers, 1 is accepted

Sort by
0
florent
Top achievements
Rank 1
answered on 18 Mar 2014, 08:12 AM
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 !

0
Boris
Telerik team
answered on 20 Mar 2014, 04:05 PM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
Tags
Chart
Asked by
florent
Top achievements
Rank 1
Answers by
florent
Top achievements
Rank 1
Boris
Telerik team
Share this question
or