Print the values on the AreaChart in winRt Xaml Toolkit

May 30, 2013 at 1:45 PM
Hi,

I have designed the areachart using WinRt Xaml ToolKit. In this when i hover the mouse on graph peek points its showing respective values. Now i want to print these values near to those AreaDataPoints(peek points) respectvily instead of mouse hover.
What i have to make changes.

Please if anyone know the ans then reply me quickly.
Thanks
Coordinator
May 30, 2013 at 2:42 PM
Probably need to edit some template for a data point
May 31, 2013 at 5:38 AM
Ya. Here can i make ToolTip to be visible always? or need to take another textblock to display near to those points??
Here i m not getting how to modify this one.
If you know then please elaborate which tamplate i need to modify?
Coordinator
Jun 1, 2013 at 4:18 AM
Try AreaSeries.DataPointStyle is the one you are looking for and the TargetType is AreaDataPoint. Your DataContext is an item of your series' ItemsSource and the default template I think is this (search the toolkit's source for TargetType="charting:AreaDataPoint").
    <Style
        TargetType="charting:AreaDataPoint">
        <Setter
            Property="Background"
            Value="Orange" />
        <!--<Setter
            Property="BorderBrush"
            Value="Gray" />-->
        <Setter
            Property="BorderThickness"
            Value="1" />
        <Setter
            Property="IsTabStop"
            Value="False" />
        <Setter
            Property="Width"
            Value="4" />
        <Setter
            Property="Height"
            Value="4" />
        <Setter
            Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="charting:AreaDataPoint">
                    <Grid
                        x:Name="Root"
                        Opacity="0">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup
                                x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition
                                        GeneratedDuration="0:0:0.1" />
                                </VisualStateGroup.Transitions>
                                <VisualState
                                    x:Name="Normal" />
                                <VisualState
                                    x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                                            BeginTime="00:00:00"
                                            Duration="00:00:00.0010000"
                                            Storyboard.TargetName="MouseOverHighlight"
                                            Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame
                                                KeyTime="00:00:00"
                                                Value="0.24" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup
                                x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition
                                        GeneratedDuration="0:0:0.1" />
                                </VisualStateGroup.Transitions>
                                <VisualState
                                    x:Name="Unselected" />
                                <VisualState
                                    x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames
                                            BeginTime="00:00:00"
                                            Duration="00:00:00.0010000"
                                            Storyboard.TargetName="SelectionHighlight"
                                            Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame
                                                KeyTime="00:00:00"
                                                Value="0.18" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup
                                x:Name="RevealStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition
                                        GeneratedDuration="0:0:0.5" />
                                </VisualStateGroup.Transitions>
                                <VisualState
                                    x:Name="Shown">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Duration="0"
                                            Storyboard.TargetName="Root"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState
                                    x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Duration="0"
                                            Storyboard.TargetName="Root"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ToolTipService.ToolTip>
                            <ContentControl
                                Content="{TemplateBinding FormattedDependentValue}" />
                        </ToolTipService.ToolTip>
                        <Ellipse
                            Stroke="{TemplateBinding BorderBrush}"
                            Fill="{TemplateBinding Background}" />
                        <Ellipse
                            RenderTransformOrigin="0.661,0.321">
                            <Ellipse.Fill>
                                <LinearGradientBrush
                                    EndPoint="0.5,1"
                                    StartPoint="0.5,0">
                                    <GradientStop
                                        Color="#FFB9D6F7" />
                                    <GradientStop
                                        Color="#FF284B70"
                                        Offset="1" />
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Ellipse
                            x:Name="SelectionHighlight"
                            Opacity="0"
                            Fill="Red" />
                        <Ellipse
                            x:Name="MouseOverHighlight"
                            Opacity="0"
                            Fill="White" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
Jun 1, 2013 at 8:51 AM
This is code is same as in AreaDataPoint.xaml code. But how can i display Data Points in respactive places??? what properties i have to set to display points?
I m freshers in this. Please help me programmetically.
Jun 2, 2013 at 6:02 PM
Please give me solution. Its very urgent.
Coordinator
Jun 3, 2013 at 4:44 AM
I thought I gave you all the information - set AreaSeries.DataPointStyle to the Style I gave you and put a TextBlock in there with its Text bound to a property of your data item you want displayed. If you need me to help you with your project - feel free to contact me privately.
Jun 3, 2013 at 9:22 AM
Thankyou i got the answer.
<charting:AreaSeries.DataPointStyle>
                            <Style TargetType="charting:AreaDataPoint">
                                <Setter Property="Width" Value="40" />
                                <Setter Property="Height" Value="30" />
                                <Setter Property="Background" Value="#26a926"/>
                                <Setter Property="BorderBrush" Value="Black"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="charting:AreaDataPoint">
                                            <TextBlock Text="{Binding Percentage}" />

                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>

                            </Style>
Jan 2, 2014 at 10:05 AM
Can you please let me know how to print value on pie chart by looking at the above example I have tried but chart is not getting displayed.

<Series:PieSeries
                    Title="Population"
                    ItemsSource="{Binding Items}"
                    IndependentValueBinding="{Binding Name}"
                    DependentValueBinding="{Binding Value}"
                    IsSelectionEnabled="True"  >
                    <charting:PieSeries.DataPointStyle>
                        <Style TargetType="charting:PieDataPoint">
                            <Setter Property="Width" Value="40" />
                            <Setter Property="Height" Value="30" />
                            <Setter Property="Background" Value="#26a926"/>
                            <Setter Property="BorderBrush" Value="Black"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="charting:PieDataPoint">
                                            <Grid>
                                            <TextBlock Text="{Binding Value}" />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>

                        </Style>
                    </charting:PieSeries.DataPointStyle>

                </Series:PieSeries>