BarSeries Problem of columns heights

[Avi]

Hello,

I created the following chart :

<telerik:RadChart x:Name="ReportChart"
                                 ItemsSource="{Binding PaymentsPerDateCollection}"
                                 LegendStyle="{StaticResource chartLegend}"
                                 Visibility="{Binding IsPaymentsPerDateChartVisible,Converter={StaticResource boolToVisibilityConverter}}">

                   <telerik:RadChart.SeriesMappings>
                       <telerik:SeriesMapping LegendLabel="{Binding AppStrings.PaidAmount, Source={StaticResource StringsLocator}}">
                           <telerik:SeriesMapping.SeriesDefinition>
                               <telerik:BarSeriesDefinition ItemLabelFormat="#Y{C0}"
                                                            ItemStyle="{StaticResource paymentBarStyle}"
                                                            SeriesItemLabelStyle="{StaticResource labelStyle}" />

                           </telerik:SeriesMapping.SeriesDefinition>
                           <telerik:SeriesMapping.ItemMappings>
                               <telerik:ItemMapping DataPointMember="YValue" FieldName="PaymentAmount" />
                               <telerik:ItemMapping DataPointMember="XCategory" FieldName="HandledOn" />
                           </telerik:SeriesMapping.ItemMappings>
                       </telerik:SeriesMapping>
                       <telerik:SeriesMapping LegendLabel="{Binding AppStrings.DepositAmount, Source={StaticResource StringsLocator}}">
                           <telerik:SeriesMapping.SeriesDefinition>
                               <telerik:BarSeriesDefinition AxisName="Secondary"
                                                            ItemLabelFormat="#Y{C0}"
                                                            ItemStyle="{StaticResource depositBarStyle}"
                                                            SeriesItemLabelStyle="{StaticResource labelStyle}" />
                           </telerik:SeriesMapping.SeriesDefinition>
                           <telerik:SeriesMapping.ItemMappings>
                               <telerik:ItemMapping DataPointMember="YValue" FieldName="DepositAmount" />
                               <telerik:ItemMapping DataPointMember="XCategory" FieldName="HandledOn" />
                           </telerik:SeriesMapping.ItemMappings>
                       </telerik:SeriesMapping>
                   </telerik:RadChart.SeriesMappings>

                   <telerik:RadChart.DefaultView>
                       <telerik:ChartDefaultView ChartLegendPosition="Top">

                           <!--  Title  -->
                           <telerik:ChartDefaultView.ChartTitle>
                               <telerik:ChartTitle Visibility="Collapsed" />
                           </telerik:ChartDefaultView.ChartTitle>

                           <!--  Legend  -->
                           <telerik:ChartDefaultView.ChartLegend>
                               <telerik:ChartLegend>
                                   <telerik:ChartLegendItem Background="#25A0DA" Label="{Binding AppStrings.PaidAmount, Source={StaticResource StringsLocator}}" />
                                   <telerik:ChartLegendItem Background="#EB7A2A" Label="{Binding AppStrings.DepositAmount, Source={StaticResource StringsLocator}}" />
                               </telerik:ChartLegend>
                           </telerik:ChartDefaultView.ChartLegend>

                           <!--  ChartArea  -->
                           <telerik:ChartDefaultView.ChartArea>
                               <telerik:ChartArea ItemWidthPercent="30"
                                                  LabelFormatBehavior="Scientific"
                                                  SmartLabelsEnabled="True">
                                   <!--  Axis X  -->
                                   <telerik:ChartArea.AxisX>
                                       <telerik:AxisX DefaultLabelFormat="MMM-yyyy"
                                                      IsDateTime="True"
                                                      LabelRotationAngle="-25"
                                                      LayoutMode="Inside">
                                       </telerik:AxisX>
                                   </telerik:ChartArea.AxisX>
                                   <!--  Axis Y  -->
                                   <telerik:ChartArea.AxisY>
                                       <telerik:AxisY DefaultLabelFormat="c"
                                                      ExtendDirection="None"
                                                      Visibility="Collapsed" />
                                   </telerik:ChartArea.AxisY>
                                   <!--  Axis AdditionalYAxes  -->
                                   <telerik:ChartArea.AdditionalYAxes>
                                       <telerik:AxisY AxisName="Secondary"
                                                      DefaultLabelFormat="c"
                                                      ExtendDirection="None"
                                                      Visibility="Collapsed">
                                       </telerik:AxisY>
                                   </telerik:ChartArea.AdditionalYAxes>
                               </telerik:ChartArea>
                           </telerik:ChartDefaultView.ChartArea>

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

               </telerik:RadChart>

The strange thing is the height of the column does not really reflect the difference data
And it seems like there is no dependency between two columns (Orange and Blue(
Cases where there is a difference of half the information is it not displays correctly at t he charts.
I mark the states with red circling at the attached picture
How can I solve this problem?

Thanks,
Aviv

[Rahul]

Hi Avi,
      
        I reproduced your issue and found the problem.
You are missing group descriptor for your chart.
Please find below modified code for your issue.

<telerik:RadChart x:Name="ReportChart">

           <telerik:RadChart.SeriesMappings>
               <telerik:SeriesMapping >
                   <telerik:SeriesMapping.SeriesDefinition>
                       <telerik:BarSeriesDefinition ItemLabelFormat="#Y{C0}"/>

                   </telerik:SeriesMapping.SeriesDefinition>
                   <telerikCharting:SeriesMapping.GroupingSettings>
                       <telerikCharting:GroupingSettings >
                           <telerikCharting:GroupingSettings.GroupDescriptors>
                               <telerikCharting:ChartGroupDescriptor Member="HandledOn"/>
                           </telerikCharting:GroupingSettings.GroupDescriptors>
                       </telerikCharting:GroupingSettings>
                   </telerikCharting:SeriesMapping.GroupingSettings>
                   <telerik:SeriesMapping.ItemMappings>
                       <telerik:ItemMapping DataPointMember="YValue" FieldName="PaymentAmount" />
                       <telerik:ItemMapping DataPointMember="XCategory" FieldName="HandledOn" />
                   </telerik:SeriesMapping.ItemMappings>
               </telerik:SeriesMapping>
               <telerik:SeriesMapping >
                   <telerik:SeriesMapping.SeriesDefinition>
                       <telerik:BarSeriesDefinition AxisName="Secondary"
                                                           ItemLabelFormat="#Y{C0}"/>
                   </telerik:SeriesMapping.SeriesDefinition>
                   <telerikCharting:SeriesMapping.GroupingSettings>
                       <telerikCharting:GroupingSettings >
                           <telerikCharting:GroupingSettings.GroupDescriptors>
                               <telerikCharting:ChartGroupDescriptor Member="HandledOn"/>
                           </telerikCharting:GroupingSettings.GroupDescriptors>
                       </telerikCharting:GroupingSettings>
                   </telerikCharting:SeriesMapping.GroupingSettings>

                       <telerik:SeriesMapping.ItemMappings>
                       <telerik:ItemMapping DataPointMember="YValue" FieldName="DepositAmount" />
                       <telerik:ItemMapping DataPointMember="XCategory" FieldName="HandledOn" />
                   </telerik:SeriesMapping.ItemMappings>

               </telerik:SeriesMapping>

           </telerik:RadChart.SeriesMappings>


           <telerik:RadChart.DefaultView>
               <telerik:ChartDefaultView ChartLegendPosition="Top">

                   <!--  Title  -->
                   <telerik:ChartDefaultView.ChartTitle>
                       <telerik:ChartTitle Visibility="Collapsed" />
                   </telerik:ChartDefaultView.ChartTitle>

                   <!--  Legend  -->
                   <telerik:ChartDefaultView.ChartLegend>
                       <telerik:ChartLegend>
                           <telerik:ChartLegendItem Background="#25A0DA"  />
                           <telerik:ChartLegendItem Background="#EB7A2A"  />
                       </telerik:ChartLegend>
                   </telerik:ChartDefaultView.ChartLegend>

                   <!--  ChartArea  -->
                   <telerik:ChartDefaultView.ChartArea>
                       <telerik:ChartArea ItemWidthPercent="30"
                                                 LabelFormatBehavior="Scientific"
                                                 SmartLabelsEnabled="True">
                           <!--  Axis X  -->
                           <telerik:ChartArea.AxisX>
                               <telerik:AxisX DefaultLabelFormat="MMM-yyyy"
                                                     IsDateTime="True"
                                                     LabelRotationAngle="-25"
                                                     LayoutMode="Inside">
                               </telerik:AxisX>
                           </telerik:ChartArea.AxisX>
                           <!--  Axis Y  -->
                           <telerik:ChartArea.AxisY>
                               <telerik:AxisY DefaultLabelFormat="c"
                                                     ExtendDirection="None"
                                                     Visibility="Collapsed" />
                           </telerik:ChartArea.AxisY>
                           <!--  Axis AdditionalYAxes  -->
                           <telerik:ChartArea.AdditionalYAxes>
                               <telerik:AxisY AxisName="Secondary"
                                                     DefaultLabelFormat="c"
                                                     ExtendDirection="None"
                                                     Visibility="Collapsed">
                               </telerik:AxisY>
                           </telerik:ChartArea.AdditionalYAxes>
                       </telerik:ChartArea>
                   </telerik:ChartDefaultView.ChartArea>

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

       </telerik:RadChart>

Hope it will help you.

Regards
Rahul

[Avi]

I change my code as you offered and the code looks like this now :

<telerik:RadChart x:Name="ReportChart"
                                 ItemsSource="{Binding PaymentsPerDateCollection}"
                                 LegendStyle="{StaticResource chartLegend}"
                                 Visibility="{Binding IsPaymentsPerDateChartVisible,Converter={StaticResource boolToVisibilityConverter}}">

                   <telerik:RadChart.SeriesMappings>
                       <telerik:SeriesMapping LegendLabel="{Binding AppStrings.PaidAmount, Source={StaticResource StringsLocator}}">
                           <telerik:SeriesMapping.SeriesDefinition>
                               <telerik:BarSeriesDefinition ItemLabelFormat="#Y{C0}"
                                                            ItemStyle="{StaticResource paymentBarStyle}"
                                                            SeriesItemLabelStyle="{StaticResource labelStyle}" />
                           </telerik:SeriesMapping.SeriesDefinition>
                           <telerik:SeriesMapping.GroupingSettings>
                               <telerik:GroupingSettings >
                                   <telerik:GroupingSettings.GroupDescriptors>
                                       <telerik:ChartGroupDescriptor Member="HandledOn"/>
                                   </telerik:GroupingSettings.GroupDescriptors>
                               </telerik:GroupingSettings>
                           </telerik:SeriesMapping.GroupingSettings>
                           <telerik:SeriesMapping.ItemMappings>
                               <telerik:ItemMapping DataPointMember="YValue" FieldName="PaymentAmount" />
                               <telerik:ItemMapping DataPointMember="XCategory" FieldName="HandledOn" />
                           </telerik:SeriesMapping.ItemMappings>
                       </telerik:SeriesMapping>
                       <telerik:SeriesMapping LegendLabel="{Binding AppStrings.DepositAmount, Source={StaticResource StringsLocator}}">
                           <telerik:SeriesMapping.SeriesDefinition>
                               <telerik:BarSeriesDefinition AxisName="Secondary"
                                                            ItemLabelFormat="#Y{C0}"
                                                            ItemStyle="{StaticResource depositBarStyle}"
                                                            SeriesItemLabelStyle="{StaticResource labelStyle}" />
                           </telerik:SeriesMapping.SeriesDefinition>
                           <telerik:SeriesMapping.GroupingSettings>
                               <telerik:GroupingSettings >
                                   <telerik:GroupingSettings.GroupDescriptors>
                                       <telerik:ChartGroupDescriptor Member="HandledOn"/>
                                   </telerik:GroupingSettings.GroupDescriptors>
                               </telerik:GroupingSettings>
                           </telerik:SeriesMapping.GroupingSettings>
                           <telerik:SeriesMapping.ItemMappings>
                               <telerik:ItemMapping DataPointMember="YValue" FieldName="DepositAmount" />
                               <telerik:ItemMapping DataPointMember="XCategory" FieldName="HandledOn" />
                           </telerik:SeriesMapping.ItemMappings>
                       </telerik:SeriesMapping>
                   </telerik:RadChart.SeriesMappings>

                   <telerik:RadChart.DefaultView>
                       <telerik:ChartDefaultView ChartLegendPosition="Top">

                           <!--  Title  -->
                           <telerik:ChartDefaultView.ChartTitle>
                               <telerik:ChartTitle Visibility="Collapsed" />
                           </telerik:ChartDefaultView.ChartTitle>

                           <!--  Legend  -->
                           <telerik:ChartDefaultView.ChartLegend>
                               <telerik:ChartLegend>
                                   <telerik:ChartLegendItem Background="#25A0DA" Label="{Binding AppStrings.PaidAmount, Source={StaticResource StringsLocator}}" />
                                   <telerik:ChartLegendItem Background="#EB7A2A" Label="{Binding AppStrings.DepositAmount, Source={StaticResource StringsLocator}}" />
                               </telerik:ChartLegend>
                           </telerik:ChartDefaultView.ChartLegend>

                           <!--  ChartArea  -->
                           <telerik:ChartDefaultView.ChartArea>
                               <telerik:ChartArea ItemWidthPercent="30"
                                                  LabelFormatBehavior="Scientific"
                                                  SmartLabelsEnabled="True">
                                   <!--  Axis X  -->
                                   <telerik:ChartArea.AxisX>
                                       <telerik:AxisX DefaultLabelFormat="MMM-yyyy"
                                                      IsDateTime="True"
                                                      LabelRotationAngle="-25"
                                                      LayoutMode="Inside">
                                       </telerik:AxisX>
                                   </telerik:ChartArea.AxisX>
                                   <!--  Axis Y  -->
                                   <telerik:ChartArea.AxisY>
                                       <telerik:AxisY DefaultLabelFormat="c"
                                                      ExtendDirection="None"
                                                      Visibility="Collapsed" />
                                   </telerik:ChartArea.AxisY>
                                   <!--  Axis AdditionalYAxes  -->
                                   <telerik:ChartArea.AdditionalYAxes>
                                       <telerik:AxisY AxisName="Secondary"
                                                      DefaultLabelFormat="c"
                                                      ExtendDirection="None"
                                                      Visibility="Collapsed">
                                       </telerik:AxisY>
                                   </telerik:ChartArea.AdditionalYAxes>
                               </telerik:ChartArea>
                           </telerik:ChartDefaultView.ChartArea>

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

               </telerik:RadChart>

Unfortunately still orange and the blue column is not related to each other
and their thickness is very thin.
Unfortunately the solution did not work or I did something wrong.

What I really need is that two Y-Axis (orange && blue) will relate both to the same Y-Axis

TNX

[Petar Marchev]

Hello,

I looked at your code and there I can see an additional Y axis. You are plotting the first series against the original Y axis and you are plotting the second series against the additional Y axis and these axes are not synchronized. Since you have set both axis to be collapsed - it is hard to understand what is going on.

The above should explain why you get such an output and why it seems that the actual values are not reflected properly.

When you get rid of this AxisName="Secondary" in the second series definition - everything should plot fine.

Adding group descriptors is not a solution for you. Please delete the GroupingSettings for both of the series. I think now you must get the expected output.

Hope this helps.

Greetings,
Petar Marchev
the Telerik team