Error Binding String Value to X Axis using MVVM.

[Saurabh]

Hi,

I am using MVVM Architecture, When I tried to bind ClientID (int value) to X Axis, everything seems working fine, but when I tried to bind Client Name (String Value) to X Axis. I am getting Error saying "Input string is not in correct format".

How Can I bind Custom String Value to X Axis using XAML (no Code Behind)?

 

<telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding Data}" Grid.Row="0" Grid.Column="0" Width="700" >

<telerik:RadChart.SeriesMappings>
<telerik:SeriesMappingCollection>
<telerik:SeriesMapping LegendLabel="CandleStick Series" >

 <telerik:SeriesMapping.SeriesDefinition >

<telerik:CandleStickSeriesDefinition /> 
</telerik:SeriesMapping.SeriesDefinition>

<telerik:ItemMapping FieldName="High" DataPointMember="High" />

<telerik:ItemMapping FieldName="Low" DataPointMember="Low" />

<telerik:ItemMapping FieldName="Open" DataPointMember="Open" />

<telerik:ItemMapping FieldName="Close" DataPointMember="Close" />

<telerik:ItemMapping FieldName="CName" DataPointMember="XValue" />
</telerik:SeriesMapping>

</telerik:SeriesMappingCollection>

 </telerik:RadChart.SeriesMappings>

<telerik:RadChart.DefaultView>

<telerik:ChartDefaultView>

<telerik:ChartDefaultView.ChartArea>

<telerik:ChartArea>

<telerik:ChartArea.AxisX>

<telerik:AxisX LabelRotationAngle="90" Title="Client Name"> </telerik:AxisX>

</telerik:ChartArea.AxisX>

<telerik:ChartArea.AxisY> <telerik:AxisY ExtendDirection="Down" AutoRange="False" MinorTickPointMultiplier="5" Step="{Binding Interval}" MinValue="{Binding MinValue}" MaxValue="{Binding MaxValue}" Title="Blood Volume (mL)">

 </telerik:AxisY>

 </telerik:ChartArea.AxisY>

 <telerik:ChartArea.Legend>

 <telerik:ChartLegend Visibility="Collapsed" /> </telerik:ChartArea.Legend>

</telerik:ChartArea> </telerik:ChartDefaultView.ChartArea> </telerik:ChartDefaultView> </telerik:RadChart.DefaultView> 

</telerik:RadChart>

 

[Evgenia]

Hi Saurabh,

The XValue and YValue DataPointMember-s require their corresponding FieldName to be of type double. That's the reason why you can't set string as XValue. Instead you should use XCategory. For more information - refer to this help topic. 

Best wishes,
Evgenia
the Telerik team

[Saurabh]

Hi

<telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding Data}" Grid.Row="0"  Grid.Column="0" Width="700" >

               <telerik:RadChart.SeriesMappings>

                   <telerik:SeriesMappingCollection>

                       <telerik:SeriesMapping LegendLabel="CandleStick Series"  >

                           <telerik:SeriesMapping.SeriesDefinition  >

                               <telerik:CandleStickSeriesDefinition />

                           </telerik:SeriesMapping.SeriesDefinition>

                           <telerik:ItemMapping FieldName="High" DataPointMember="High" />

                           <telerik:ItemMapping FieldName="Low" DataPointMember="Low" />

                           <telerik:ItemMapping FieldName="Open" DataPointMember="Open" />

                           <telerik:ItemMapping FieldName="Close" DataPointMember="Close" />

                           <telerik:ItemMapping FieldName="X" DataPointMember="XValue" />

                           <telerik:ItemMapping FieldName="XCategory" DataPointMember="XCategory" />

                       </telerik:SeriesMapping>

                       <telerik:SeriesMapping >

                           <telerik:SeriesMapping.SeriesDefinition>

                               <telerik:ScatterSeriesDefinition PointShape="Square" PointSize="5" >

                                     

                               </telerik:ScatterSeriesDefinition>

                           </telerik:SeriesMapping.SeriesDefinition>

                           <telerik:ItemMapping FieldName="Y"  DataPointMember="YValue"/>

                           <telerik:ItemMapping FieldName="X" DataPointMember="XValue" />

                           <telerik:ItemMapping FieldName="XCategory" DataPointMember="XCategory" />

                       </telerik:SeriesMapping>

                   </telerik:SeriesMappingCollection>                    

               </telerik:RadChart.SeriesMappings>                

               <telerik:RadChart.DefaultView>

                   <telerik:ChartDefaultView>

                       <telerik:ChartDefaultView.ChartArea>

                           <telerik:ChartArea>

                               <telerik:ChartArea.AxisX >

                                   <telerik:AxisX TicksDistance="2" MinorTicksVisibility="Collapsed"  LabelRotationAngle="90" Title="Client ID">                                                                               

                                   </telerik:AxisX>                                    

                                     

                               </telerik:ChartArea.AxisX>

                                 

                               <telerik:ChartArea.AxisY>

                                   <telerik:AxisY ExtendDirection="Down" AutoRange="False" MinorTickPointMultiplier="5" Step="{Binding Interval}"  MinValue="{Binding MinValue}" MaxValue="{Binding MaxValue}"  Title="Quantity">                                        

                                   </telerik:AxisY>

                               </telerik:ChartArea.AxisY>

                               <telerik:ChartArea.Legend>

                                   <telerik:ChartLegend Visibility="Collapsed" />

                               </telerik:ChartArea.Legend>

                           </telerik:ChartArea>

                       </telerik:ChartDefaultView.ChartArea>                        

                   </telerik:ChartDefaultView>

               </telerik:RadChart.DefaultView>                

           </telerik:RadChart>

Thanks for your response, Issue has been resolved after applying your suggestion.

But ticks on X-Axis are displaying between two Client names, I want to display ticks, candlestick and client name on same line.

See Image for more details.

[Evgenia]

Hi Saurabh,

RadChart allows you to modify the layout of the XAxis for better readability. By using the LayoutMode property of the XAxis you may control the way the Labels and Series are positioned according to the MajorTicks. This is described in our help topic. What you need is having the layoutMode property set to Inside:

RadChart1.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;

Let me know how this works for you.

Greetings,
Evgenia
the Telerik team