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

BarSeries Problem of columns heights

3 Answers 143 Views

Chart

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

This question is locked. New answers and comments are not allowed.

Avi asked on 08 Jan 2012, 10:18 AM

error.jpg

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">

<telerik:ChartDefaultView.ChartTitle>

<telerik:ChartTitle Visibility="Collapsed" />

</telerik:ChartDefaultView.ChartTitle>

<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>

<telerik:ChartDefaultView.ChartArea>

<telerik:ChartArea ItemWidthPercent="30"

LabelFormatBehavior="Scientific"

SmartLabelsEnabled="True">

<telerik:ChartArea.AxisX>

<telerik:AxisX DefaultLabelFormat="MMM-yyyy"

IsDateTime="True"

LabelRotationAngle="-25"

LayoutMode="Inside">

</telerik:AxisX>

</telerik:ChartArea.AxisX>

<telerik:ChartArea.AxisY>

<telerik:AxisY DefaultLabelFormat="c"

ExtendDirection="None"

Visibility="Collapsed" />

</telerik:ChartArea.AxisY>

<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

3 Answers, 1 is accepted

answered on 08 Jan 2012, 12:14 PM

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">

<telerik:ChartDefaultView.ChartTitle>

<telerik:ChartTitle Visibility="Collapsed" />

</telerik:ChartDefaultView.ChartTitle>

<telerik:ChartDefaultView.ChartLegend>

<telerik:ChartLegend>

<telerik:ChartLegendItem Background="#25A0DA" />

<telerik:ChartLegendItem Background="#EB7A2A" />

</telerik:ChartLegend>

</telerik:ChartDefaultView.ChartLegend>

<telerik:ChartDefaultView.ChartArea>

<telerik:ChartArea ItemWidthPercent="30"

LabelFormatBehavior="Scientific"

SmartLabelsEnabled="True">

<telerik:ChartArea.AxisX>

<telerik:AxisX DefaultLabelFormat="MMM-yyyy"

IsDateTime="True"

LabelRotationAngle="-25"

LayoutMode="Inside">

</telerik:AxisX>

</telerik:ChartArea.AxisX>

<telerik:ChartArea.AxisY>

<telerik:AxisY DefaultLabelFormat="c"

ExtendDirection="None"

Visibility="Collapsed" />

</telerik:ChartArea.AxisY>

<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

answered on 08 Jan 2012, 04:07 PM

error.jpg

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">

<telerik:ChartDefaultView.ChartTitle>

<telerik:ChartTitle Visibility="Collapsed" />

</telerik:ChartDefaultView.ChartTitle>

<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>

<telerik:ChartDefaultView.ChartArea>

<telerik:ChartArea ItemWidthPercent="30"

LabelFormatBehavior="Scientific"

SmartLabelsEnabled="True">

<telerik:ChartArea.AxisX>

<telerik:AxisX DefaultLabelFormat="MMM-yyyy"

IsDateTime="True"

LabelRotationAngle="-25"

LayoutMode="Inside">

</telerik:AxisX>

</telerik:ChartArea.AxisX>

<telerik:ChartArea.AxisY>

<telerik:AxisY DefaultLabelFormat="c"

ExtendDirection="None"

Visibility="Collapsed" />

</telerik:ChartArea.AxisY>

<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

answered on 11 Jan 2012, 09:09 AM

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 >>