WPF DynamicDataDisplay templating axis labels with icon images based on value

Question

While searching an open charting library for WPF, I found the DynamicDataDisplay library.

However I couldn't find a way (probably due to poor documentation) to format the axis labels that they contain images based on the value.

Why I need this ?

I currently write a tool that tracks market prices of a game (GW2).

These prices are displayed as Gold, Silver and Copper and I get the prices based on the copper value and I want the vertical axis displaying prices.

So hopefully someone knows a way to template the axis labeling of D3.

score 3 · Answer 1 · answered Dec 19 '12 at 15:39

Thanks to Mikhail Brinchuk pointing me in the right Direction. Here is the solution I came up with:

<Window x:Class="ChartTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    xmlns:chart="clr-namespace:ChartTest.Chart"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <chart:MoneyLabelProvider x:Key="MoneyLabelProvider"></chart:MoneyLabelProvider>
</Window.Resources>
<Grid>
    <d3:ChartPlotter x:Name="Plotter">
        <d3:ChartPlotter.VerticalAxis>
            <d3:VerticalIntegerAxis x:Name="Axis" LabelProvider="{StaticResource MoneyLabelProvider}">
            </d3:VerticalIntegerAxis>
         </d3:ChartPlotter.VerticalAxis>

        <d3:ChartPlotter.HorizontalAxis>
            <d3:HorizontalDateTimeAxis x:Name="DateTimeAxis">
            </d3:HorizontalDateTimeAxis>
        </d3:ChartPlotter.HorizontalAxis>
    </d3:ChartPlotter>
</Grid>

public class MoneyLabelProvider : GenericLabelProvider<int>
{
    public override System.Windows.UIElement[] CreateLabels(Microsoft.Research.DynamicDataDisplay.Charts.ITicksInfo<int> ticksInfo)
    {
        var customElements = new UIElement[ticksInfo.Ticks.Length];

        for (int i = 0; i < customElements.Length; i++)
        {
            var mv = new MoneyView(); // View provides the money style format
            var money = new Money(0, 0, ticksInfo.Ticks[i]); // Data class provides the calculation
            mv.DataContext = money; // Bind the data to the view

            customElements[i] = mv;
        }

        return customElements;
    }
}

I have a close question in this link and I think you can answer my question , please help http://stackoverflow.com/questions/14335790/how-to-use-uielement-createlabels-method-in-numericlabelproviderbase-class-to — Khaleel Hmoz, Jan 15 '13 at 10:35

score 1 · Accepted Answer · answered Dec 19 '12 at 14:23

1

Axis contains a LabelProvider property. You can create your custom label provider and in overriden method CreateLabels create all controls you need.

answered Dec 19 '12 at 14:23

Mikhail Brinchuk

656
6
16

WPF DynamicDataDisplay templating axis labels with icon images based on value

2 Answers2