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

Clustered Bar Chart - Dual X axis labels. Is this possible?

5 Answers 121 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 12 Sep 2012, 05:34 PM
What I'd like to achieve is like these two image attachments which were created in Excel. I'd like to have two levels of X-Axis labelling. I'd also like to have clustered and stacked.

Is this possible with the Telerik WPF charting tools? 

5 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 13 Sep 2012, 07:36 AM
Hello,

Please, find a Stacked/Clustered Bar demo example here.

As for the dual horizontal axis labeling, you can achieve this by applying a style. It is demonstrated in this example. Here is how the horizontal axis looks like :
<chart:RadCartesianChart.HorizontalAxis>
    <chartView:DateTimeContinuousAxis 
        MajorStep="3"
        MajorStepUnit="Month"
        GapLength="0.8"
        PlotMode="OnTicksPadded"
        LabelTemplate="{StaticResource axisLabelTemplate}">
    </chartView:DateTimeContinuousAxis>

This is the axisLabelTemplate ( from Resources ) :
<DataTemplate x:Key="axisLabelTemplate">
        <TextBlock Text="{Binding Converter={StaticResource axisLabelConverter}}"
                       TextAlignment="Center"
                       Style="{StaticResource axisTextStyleMain}" />
    </DataTemplate>

And the label converter used for the dual labeling looks like this :
public class AxisLabelConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            DateTime date;
            if (value is DateTime)
                date = (DateTime)value;
            else
                date = DateTime.Parse((string)value);
            if (date != null && date.Month == 1)
                return String.Format("{0:MMM}" + Environment.NewLine + "{0:yyyy}", date);
            else
                return String.Format("{0:MMM}", date);
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

You can find the whole code of the demo example in the Code tab. Hope this helps.

Greetings,
Nikolay
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Mike
Top achievements
Rank 1
answered on 13 Sep 2012, 03:25 PM
Thank you for this information.

Would you be able to do do this with non date type values as in my new example I've attached?

Would you be able to put a larger tick mark around the outer X-Axis value? In the example, notice that between Section A and Section B there is a longer tick mark.

Also, from you example, I'm not sure I can see how to do this and have the combine mode be stacked?

0
Nikolay
Telerik team
answered on 14 Sep 2012, 08:11 AM
Hello Mike,

The type of the value, whether it is a DateTime one on a DateTimeContinuous axis or a double one on a Linear axis, for example, would be of no relevance to the dual horizontal axis labeling - it would work in either case,the only difference being in the AxisLabelConverter method.

It is the same with the Bar combine mode - it would work regardless of the type of axis or data that you are using, but please note that the DateTimeContinuous axis would normally be more appropriate for Line/Spline type of series and not Bar series. In your case it seems that the more appropriate horizontal axis type should be either DateTimeCategorical or Categorical.

As for the ticks length, you can alter them by updating the ticks template, here is a sample code demonstrating how this can be achieved :
<telerik:DateTimeContinuousAxis.MajorTickTemplate>
                           <DataTemplate>
                               <Rectangle Fill="Gray" Width="1" Height="4" Margin="0,0,0,2"/>
                           </DataTemplate>
                       </telerik:DateTimeContinuousAxis.MajorTickTemplate>

Regards,
Nikolay
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Mike
Top achievements
Rank 1
answered on 14 Sep 2012, 02:51 PM
Thank you for this information. One thing I am still not sure about, though is how to have a bar chart that is stacked AND clustered. Is that possible?
0
Nikolay
Telerik team
answered on 17 Sep 2012, 08:13 AM
Hi Mike,

Yes, it is possible to have both stacked and clustered bars. If we take our demo example, you can make the first two bars ( green and blue ) stacked by setting their CombineMode to Stacked and then set the CombineMode for the other two bars ( orange and yellow ) as Clustered. This way you can have both, as long as each bar has the same CategoryBinding.

Kind regards,
Nikolay
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

Tags
ChartView
Asked by
Mike
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Mike
Top achievements
Rank 1
Share this question
or