This project is read-only.

How to display string value in X-Axis label

Feb 22, 2012 at 2:40 PM
Edited Feb 23, 2012 at 6:13 AM

Hi,

I want to diaply a text in x-Axis label in my charting. Presently what i can do is, can only display a double/DateTime value which i will bind through the "SetXMapping" function of "EnumerableDataSource". Instead i want to display a text corresponding to the double value (I have a mapping table for each value i bind to X-coordinate) i bind through the "SetXMapping" function.

Looking forward for a response.....

Thanks,

Sathish B.R

Apr 14, 2012 at 8:43 AM

I'm looking forward to this solution too! If anybody has some idea how to manage this I would appreciate it!

Apr 17, 2012 at 8:50 PM

I got close to a solution, but then the feature got cancelled for my project.  You'll have to write a custom implementation of LabelProviderBase<T>, or maybe NumericLabelProviderBase.  Pay particular attention to the CreateLabels method, which you'll have to implement - this method gets an ITicksInfo<T> argument, which is a value associated with an axis tick, and expects you to do something to that and return the actual tick label as any UIElement.  Good luck!

May 4, 2012 at 4:01 PM
Edited May 4, 2012 at 4:15 PM

I was able to do that.

Its maybe not the best solution but here what I have done.

First I am using the Figure control like this :

<d3:Figure>

	<d3:PlotAxis x:Name="leftAxis"
				 AxisOrientation="Left"
				 d3:Figure.Placement="Left"
				 Foreground="White" />
	<d3:PlotAxis x:Name="bottomAxis"
				 AxisOrientation="Bottom"
				 d3:Figure.Placement="Bottom"
				 Foreground="White" 
				 Style="{StaticResource PlotDateAxis}"/>

	<d3:AxisGrid x:Name="axisGrid" />

	<d3:MouseNavigation />
</d3:Figure>
Notice the PlotDateAxis custom style of the bottomAxis. Here is my implementation of the style:
<Style TargetType="d3:PlotAxis" x:Key="PlotDateAxis">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="d3:PlotAxis">
				<Grid>
					<DMS:RtAxis x:Name="PART_Axis" AxisOrientation="{Binding AxisOrientation, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Ticks="{Binding Ticks, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Foreground="{Binding Foreground, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
					<ContentPresenter />
				</Grid>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
	<Setter Property="IsTabStop" Value="False" />
</Style>

Notice the control "DMS:RtAxis".
DMS is my personal namespace. I have created a classe named RtAxis inherithing from Axis. This new implementation call the base contructor passing a custom LabelProvider:

namespace DMS {
    public class RtAxis : Axis {
        public RtAxis() : base(new CustomLabelProvider(),  new TicksProvider()) {            
        }
    }

    public class CustomLabelProvider : ILabelProvider {        
        public FrameworkElement[] GetLabels(double[] ticks) {
            if (ticks == null)            
                throw new ArgumentNullException("ticks");

            return ticks.Select(num => new TextBlock {
                                            Text = DateTime.FromFileTimeUtc((long)num).ToString("dd")
                                        }).ToArray();
        }
    }
}
The implementation of GetLabels from ILabelProvider generate a new TextBlock for each ticks but instead of converting the number to a string, I convert the number to a DateTime then format the output. Note that my X values are DateTimes converted to numbers using the DateTime function ToFileTimeUtc.
A lot of space for improvements
This is maybe not exactly what you are looking for but maybe a hint on how you can achieve your goal.
best luck !
Sebastien Chandonnet
May 12, 2012 at 5:19 AM
Edited May 12, 2012 at 10:32 AM

Sebastien,

If possible can you share a little more how you got this to work? I'm struggling with it (using Blend 5 preview), I have used the same XAML as you shared above with the new style in App.xaml, and a new class RtAxis. However the xaml in app.xaml cannot resolve the properties of AxisOrientation and Ticks although I spent some time trying to work out how to reference one of my own classes in the xaml so that may be the problem. The (VB) class I used is below.

I appreciate its a silverlight question not a D3 question however my knowledge isn't sufficient to work out what is needed.

Merci.

app.xaml snippets

  xmlns:DMS="clr-namespace:HA_Client_SL5"

.......

<DMS:RtAxis x:Name="PART_Axis" AxisOrientation="{Binding AxisOrientation, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Ticks="{Binding Ticks, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Foreground="{Binding Foreground, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />

Public Class RtAxis
		Inherits Axis
		Public Sub New()
			MyBase.New(New CustomLabelProvider(), New TicksProvider())
		End Sub
End Class

Public Class CustomLabelProvider
	Implements ILabelProvider
	Public Function GetLabels(ticks As Double()) As FrameworkElement()
		If ticks Is Nothing Then
			Throw New ArgumentNullException("ticks")
		End If
		Return ticks.[Select](Function(num) New TextBlock() With { _
				.Text = DateTime.FromFileTimeUtc(CLng(num)).ToString("dd")}).ToArray()
	End Function
End Class