Jump to content
Software FX Community

Changing axis labels appearance on highlight?


thubble

Recommended Posts

I have a chart and I want to have the item highlighting such that not only the point bars, but also the axis labels, change appearance when the point is highlighted.

 The way I've done it is as follows:

-----------------------------------------------------

Private Sub chtTest_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles chtTest.DataBound

For i As Integer = 1 To chtTest.Data.X.Count

 Dim sec As New ChartFX.WPF.AxisSection()

 sec.From = CType(i, ChartFX.WPF.DataUnit)

 sec.To = CType(i, ChartFX.WPF.DataUnit)

 chtTest.AxisX.Sections.Add(sec)

Next

End Sub

Private lastPoint As Integer = -1

Private Sub chtTest_Highlighting(ByVal sender As Object, ByVal args As ChartFX.WPF.HighlightingEventArgs) Handles chtTest.Highlighting

Dim point As Integer = CType(args.Object, ChartFX.WPF.SeriesPoint).Point

If args.Highlighting Then

 chtTest.AxisX.Sections(point).Foreground = Windows.Media.Brushes.Red

 chtTest.AxisX.Sections(point).FontWeight = FontWeights.Bold

 If (lastPoint >= 0) And (point <> lastPoint) Then

chtTest.AxisX.Sections(lastPoint).Foreground = Windows.Media.Brushes.Black

chtTest.AxisX.Sections(point).FontWeight = FontWeights.Normal

 End If

 lastPoint = point

Else

 chtTest.AxisX.Sections(point).Foreground = Windows.Media.Brushes.Black

 chtTest.AxisX.Sections(point).FontWeight = FontWeights.Normal

End If

 End Sub

-----------------------------------------------------

This works for the most part, but it's kind of clumsy and setting the font to bold doesn't always work (I need to move the mouse a bit before it refreshes, even if I call chtTest.Refresh()). Is there a better way to do this? Ideally I'd like to do it using a template for AxisX, but I can't find a way to do this since the "Highlighted" property of the current point isn't accessible from the AxisX template.

Also, there seems to be no way to make the text underlined since the TextDecoration property isn't exposed. Since the labels seem to be done with TextBlocks, is there a way to do this?

Thanks in advance.

Link to comment
Share on other sites

As you suspected the right way to accomplish this is using a template for the AxisX labels. We have fixed a minor issue in our internal build so that you can create triggers for both Highlighted and Dimmed. e.g.

<DataTemplate x:Key="RichContentLegend">  <StackPanel Orientation="Horizontal" x:Name="stack">   <Image x:Name="BarImg" Source="{Binding Path=DataItem.Image}" Width="20" Height="40" />   <TextBlock x:Name="BarText" Text="{Binding Path=DataItem.Product}" VerticalAlignment="Center"/>  </StackPanel<DataTemplate.Triggers>   <DataTrigger Binding="{Binding Path=Dimmed}">   <DataTrigger.Value>   <sys:Boolean>True</sys:Boolean>   </DataTrigger.Value>   <Setter Property="Opacity" Value="0.25" TargetName="stack" />   </DataTrigger</DataTemplate.Triggers></DataTemplate>

About TextDecoration: Internally we use "low-level" rendering for our axes unless you change the template, once you are templating you can use TextDecorations, e.g.

<DataTrigger Binding="{Binding Path=Highlighted}">  <DataTrigger.Value>   <sys:Boolean>True</sys:Boolean</DataTrigger.Value<Setter Property="TextDecorations" Value="Underline" TargetName="BarText" /></DataTrigger>

This should be available in our next hotfix.

Regards,

JuanC

Link to comment
Share on other sites

This still doesn't seem to work in version 8.0.3439.25180. Here's an example that doesn't seem to work properly:

-------------------------------------------------------------------------------------------

<DataTemplate x:Key="AxisXTemplate">

 <StackPanel HorizontalAlignment="Center" Orientation="Vertical">

<TextBlock x:Name="textContent" DockPanel.Dock="Right" Foreground="#FF0000FF" Text="{Binding Path=DataItem.PerformanceGroup}" VerticalAlignment="Center" />

 </StackPanel>

 <DataTemplate.Triggers>

<DataTrigger Binding="{Binding Path=Highlighted}" Value="True">

 <Setter Property="TextDecorations" Value="Underline" TargetName="textContent" />

</DataTrigger>

 </DataTemplate.Triggers>

</DataTemplate>

<cfx:Chart x:Name="chtTest" ItemsSource="{Binding Path=TestData, ElementName=Window1Name}">

<cfx:SeriesAttributes BindingPath="Count" />

<cfx:SeriesAttributes BindingPath="Target" />

<cfx:Chart.AxisX>

<cfx:Axis FontSize="11" FontFamily="Arial" Foreground="#FF0000" PixelsPerUnit="26" Template="{DynamicResource AxisXTemplate}" />

 </cfx:Chart.AxisX>

 </cfx:Chart>

... Public ReadOnly Property TestData() As System.Collections.ObjectModel.ObservableCollection(Of TestDataRow) ...

-------------------------------------------------------------------------------------------

This has a few problems:

1. It works OK when there is only one series, but with more than one series the highlighting doesn't work at all (mousing over one axis label will dim ALL bars and not highlight any).

2. The scrolling doesn't work properly - when you scroll, the label at the top doesn't go off the screen, it stays at the top and overlaps with the other labels as they scroll up.

3. The highlighting doesn't work at all until you move the scrollbar.

 

Any ideas on this? Thanks in advance.

Link to comment
Share on other sites

We have been able to duplicate 1 and 2 and are already working on fixes for this but we have not been able to duplicate problem #3. Can you try to generate this issue in a dummy app?

There are also additional unresolved issues related to templated axis labels, particularly if you change axis properties after the axis has been rendered, we are also working on these.

Regards,

JuanC

Link to comment
Share on other sites

While creating a test app to reproduce #3 (labels only work after you move the scrollbar) I found that it only happens if you manually set PixelsPerUnit on the axis. If this isn't set the problem in #3 doesn't occur, but the labels move all over the place (sometimes to the middle of the chart, over top of the bars) when you move the scrollbar.

I suspect this might be related to the other problems. I can still send you the test app if you'd like, just let me know where to send it.

Thanks again.

Link to comment
Share on other sites

I just tested with build 3442 - the first 2 bugs are fixed, but the third (label styling on highlight doesn't work until you move the scrollbar) is still a problem. I have a test app that reproduces this - I can send it to you if you'd like, just let me know where. Thanks.

Link to comment
Share on other sites

  • 1 month later...

I'm using build 3499. There seems to still be an issue with axis data templates where it sometimes doesn't hide the label when the label's point is outside the scroll viewer's visible area. This seems to happen most when scrolling slowly so I suspect it's showing labels if the point is even partially in the visible area (even though the scroll behaviour is to either completely show a point or not show it at all). I'm using the following template:

<cfx:Axis.Template>

 <DataTemplate>

  <TextBlock Text="{Binding Text}" />

 </DataTemplate>

</cfx:Axis.Template>

Any ideas?

Thanks.

Link to comment
Share on other sites

We have been unable to duplicate this issue.

We did find an issue where labels may not be properly hidden when resizing the scroll bar thumb i.e. changing the range of visible elements.

The problem might be related to a combination of size and the number of visible elements, if you can post/send an application that exhibits this behavior we would appreciate it.

JuanC

Link to comment
Share on other sites

Attached is a test app which reproduces the issue.

Note that there now seems to be 2 separate issues - the first time you load the data (by clicking the button at the bottom) there is the issue with the labels not being hidden (you may have to scroll slowly to reproduce this). If you reload the data again, another issue happens where the labels will be too far to the right and will overlap the scrollbar.

Please let me know if you need any more info - thanks again.

Link to comment
Share on other sites

  • 4 weeks later...

Some of these issues have been fixed in recent builds, however there is an issue where if you resize the chart horizontally the labels disappear and there is a lot of flicker in the labels when resizing vertically. This happens in build 3532. I've attached an app that reproduces this.

Thanks.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...