Charting - How do I remove data point markers?

Sep 15, 2010 at 7:46 AM

Anyone know how to modify the ZAML to remove any data point markers (the small ellipses) on a line graph?

 

Sep 15, 2010 at 7:31 PM

You can do it in a couple ways. You can:

  1. Simply retemplate the LineDataPoint to not have any visuals.
  2. You can use a Binding on Visibility property of the root visual (for the LineDataPoint): <Grid x:Name="Root" Visibility="{Binding Visible, Converter={StaticResource booleanToVisibilityConverter}}">

(Yes, I noticed your question here ... after your question on Snoop. :-) I've done a lot with the toolkit charting component and thought I would help out.)

Sep 16, 2010 at 12:23 AM

thanks - I'm obviously not understanding how the toolkit works in with the XAML here - mind if I ask

a) re posted code below, I've tried putting Visibility="Hidden in the Grid element but this doesn't seem to work?  Why would this be? 

b) tried taking out all the lines in the <ControlTemplate TargetType="chartingToolkit:LineDataPoint"> tag, however this doesn't work. Why would this be?  Should this not override things.  I'm wondering if my whole override template here is really working at all for LineDataPoint?   (I do note that the LineSeries override I have in the below code however do work)

c) Re your suggestion Visibility="{Binding Visible, Converter={StaticResource booleanToVisibilityConverter}}" - didn't work as I guess I've got to create a booleanToVisibilityConverter, however would you be able to indicate why this should work and why one would have to do this to make the markers disappear, as opposed to just saying "Visibile='false'" type of thing.

 

<Window x:Class="MyInternetUsage.EnginePerformance"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:local="clr-namespace:DataVisualizationDemos" xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" Title="EnginePerformance" Height="277" Width="371">
    <Grid>
        <Grid.Resources>
            <local:EngineMeasurementCollection x:Key="EngineMeasurementCollection"/>

            <!--  charting:LineSeries  -->
            <Style TargetType="chartingToolkit:LineSeries">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="PolylineStyle">
                    <Setter.Value>
                        <Style TargetType="Polyline">
                            <Setter Property="StrokeThickness" Value="1" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>

            <!--  charting:LineDataPoint  -->
            <Style TargetType="chartingToolkit:LineDataPoint">
                <Setter Property="Background" Value="Orange" />
                <Setter Property="BorderBrush" Value="Red" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Width" Value="2" />
                <Setter Property="Height" Value="2" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                            <Grid x:Name="Root" Opacity="0" Visibility="Hidden">
                                <Ellipse Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Height="30"/>
                                <Ellipse RenderTransformOrigin="0.661,0.321">
                                    <Ellipse.Fill>
                                        <RadialGradientBrush GradientOrigin="0.681,0.308">
                                            <GradientStop Color="Green" />
                                            <GradientStop Color="#FFFFFFFF" Offset="1" />
                                        </RadialGradientBrush>
                                    </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>

        </Grid.Resources>
        
        <chartingToolkit:Chart Title="Engine Performance">
            <!-- Power curve -->
            <chartingToolkit:LineSeries
                            Title="Power"
                            ItemsSource="{StaticResource EngineMeasurementCollection}"
                            IndependentValueBinding="{Binding Speed}"
                            DependentValueBinding="{Binding Power}">
                <!-- Vertical axis for power curve -->
                <chartingToolkit:LineSeries.DependentRangeAxis>
                    <chartingToolkit:LinearAxis
                                    Orientation="Y"
                                    Title="Power (hp)"
                                    Minimum="0"
                                    Maximum="250"
                                    Interval="50"
                                    ShowGridLines="True"/>
                </chartingToolkit:LineSeries.DependentRangeAxis>
            </chartingToolkit:LineSeries>
            <!-- Torque curve -->
            <chartingToolkit:LineSeries
                            Title="Torque"
                            ItemsSource="{StaticResource EngineMeasurementCollection}"
                            IndependentValueBinding="{Binding Speed}"
                            DependentValueBinding="{Binding Torque}">
                <!-- Vertical axis for torque curve -->
                <chartingToolkit:LineSeries.DependentRangeAxis>
                    <chartingToolkit:LinearAxis
                                    Orientation="Y"
                                    Title="Torque (lb-ft)"
                                    Minimum="50"
                                    Maximum="300"
                                    Interval="50"/>
                </chartingToolkit:LineSeries.DependentRangeAxis>
            </chartingToolkit:LineSeries>
            <chartingToolkit:Chart.Axes>
                <!-- Shared horizontal axis -->
                <chartingToolkit:LinearAxis
                                Orientation="X"
                                Title="Speed (rpm)"
                                Interval="1000"
                                ShowGridLines="True"/>
            </chartingToolkit:Chart.Axes>
        </chartingToolkit:Chart>
    </Grid>
</Window>

thanks

Sep 16, 2010 at 1:07 AM

PS.  I've boiled it down to the fact the template isn't picked up it seem in the code below - but it should be picked up no?  i.e. I have NOT set an x:key against <Style TargetType="chartingToolkit:LineDataPoint">

 

<Window x:Class="MyInternetUsage.EnginePerformance"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:local="clr-namespace:DataVisualizationDemos" xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" Title="EnginePerformance" Height="277" Width="371">
    <Grid>
        <Grid.Resources>
            <local:EngineMeasurementCollection x:Key="EngineMeasurementCollection"/>

            <!--  charting:LineDataPoint  -->
            <Style TargetType="chartingToolkit:LineDataPoint">
                <Setter Property="Background" Value="Orange" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="chartingToolkit:LineDataPoint">

                            <Grid
                                Width="30"
                                Height="30"
                                Background="{TemplateBinding Background}"/>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        
        <chartingToolkit:Chart Title="Engine Performance">
            <!-- Power curve -->
            <chartingToolkit:LineSeries
                            Title="Power"
                            ItemsSource="{StaticResource EngineMeasurementCollection}"
                            IndependentValueBinding="{Binding Speed}"
                            DependentValueBinding="{Binding Power}">

            </chartingToolkit:LineSeries>

        </chartingToolkit:Chart>
    </Grid>
</Window>



Sep 16, 2010 at 1:20 AM

Regarding both a) and b) ... I originally thought your xaml should work. I was surprised it didn't. Took a quick look at cracked open an example of mine ... and noticed that I'm explicitly setting the style/template. I don't know why implicitly setting the style doesn't work ... I'd have to dive in on the source code for that.

<Style x:Key="lineDataPointStyle" TargetType="charting:LineDataPoint">
	<Setter Property="Foreground" Value="DarkGreen"/>
	<Setter Property="IsTabStop" Value="False"/>
	<Setter Property="Width" Value="NaN"/>
	<Setter Property="Height" Value="NaN"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="charting:LineDataPoint">
				<Grid x:Name="Root" Opacity="0">
				</Grid>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

<charting:LineSeries
	IndependentValueBinding="{Binding Frequency}"
	DependentValueBinding="{Binding Level}"
	DataPointStyle="{StaticResource lineDataPointStyle}"
/>

Regarding c), you definitely would need to implement a converter. The idea here, though is to remember (or know) that your derived DataPoint class ... is the DataContext for the charting:LineDataPoint. So, the hidden knowledge is that I have a Visible property on my derived DataPoint class. This lets me selectively choose which data points I want to be visible or not ... based on my data objects.

Option c) may not be necessary for your scenario. For mine it was. :-)

 

Sep 16, 2010 at 1:49 AM

explicitly setting doesn't seem to kelp to... might have to try c) then - don't suppose you have some xaml you've got working with this message you could post?

Sep 16, 2010 at 3:54 AM

oh - I've tried your suggestion c) but it doesn't seem to work (re removing markers) - this is what I've done - is this what  you meant?

 

<Window x:Class="MyInternetUsage.EnginePerformance"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        xmlns:local="clr-namespace:DataVisualizationDemos" 
        xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit" Title="EnginePerformance" Height="277" Width="371">
    
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="boolToVis" />
    </Window.Resources>

    <Grid x:Name="Root" Visibility="{Binding Visible, Converter={StaticResource boolToVis}}">
        <Grid.Resources>
            <local:EngineMeasurementCollection x:Key="EngineMeasurementCollection"/>
        </Grid.Resources>

        <chartingToolkit:Chart Title="Engine Performance">
            <!-- Power curve -->
            <chartingToolkit:LineSeries
                            Title="Power"
                            ItemsSource="{StaticResource EngineMeasurementCollection}"
                            IndependentValueBinding="{Binding Speed}"
                            DependentValueBinding="{Binding Power}">
            </chartingToolkit:LineSeries>
        </chartingToolkit:Chart>
        
    </Grid>
</Window>
Sep 16, 2010 at 6:00 PM

As far as I can tell from your scenario ... you want to turn off the visibility of all data points for a line series. So, c) doesn't really help you ... as that allows you turn off the visibility of certain data points.

I drafted up a quick sample for you ... but I have nowhere to send it. Give me an email address and I'll send it off.

I modified the Engine Performance sample so that one of the curves/lines has no data points visible (the Power curve) while the other one (Torque) is unchanged.

Sep 17, 2010 at 11:22 AM

thanks - have just PM'ed you with my email address

Sep 24, 2010 at 11:55 PM

(cc'ed here too for others cplotts )

thanks for the suggestion - I just realised however after testing that setting the template to null for lineDataPointStyle actually causes the different colors for each line to disappear   :(  That is, so in the legend you can't tell which is which.  

I guess this means I'll need to look into a way within the lineDataPointStyle of dropping the markers without affecting the colors?

Sep 25, 2010 at 12:16 AM

Hmm. In the sample code that I sent you ... that was not happening for me. That is, setting the template for the LineDataPoint to null ... didn't affect the color of the line ... or the line in the legend.

Note however, that you do have to set the Background brush in that LineDataPointStyle to the color that you want the line stroked with.

Oct 26, 2010 at 7:15 PM
Edited Oct 26, 2010 at 7:16 PM

Does anyone know how to do this without having to set the color of the line series through Background brush or any other means and preserve the original functionality of a color just being assigned?

Someone on the WPF forum states that the problem is that the Style overrides the chart pallet.

The discussion about it can be found at http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/215ac129-2b3e-45a3-833a-3990b6f9f0fd/#ade46f7b-188e-47b7-981d-4b994ea7920b.