BarSeries Problem of columns heights

4 posts, 0 answers
  1. Avi
    Avi avatar
    25 posts
    Member since:
    Oct 2010

    Posted 08 Jan 2012 Link to this post

    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
  2. Rahul
    Rahul avatar
    116 posts
    Member since:
    Feb 2011

    Posted 08 Jan 2012 Link to this post

    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
  3. DevCraft banner
  4. Avi
    Avi avatar
    25 posts
    Member since:
    Oct 2010

    Posted 08 Jan 2012 Link to this post

    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
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 11 Jan 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top