[Solved] BulletGraph goes nuts on databound min/max change depending on notification ordering

[Chris]

I have a bulletgraph in Windows 8 XAML (store app) tracking a value against acceptable ranges with some qualitative red/yellow/green graphics. The user can go to app settings and choose the units for this value (such as kg vs lbs). Everything is data-bound - min, max, comparative value, qualitative range size, etc.

The problem I am having is that if the bulletgraph is being shown and the user goes and changes the units, the bulletgraph goes completely nuts.

Specifically:
    - Qualitative Ranges disappear completely (sometimes)
    - Comparative Measure does not update and ends up drawn in the wrong place.
    - tick step doesn't update, so too many or too few ticks show up (often to the point that it is a white smear)
    - labels end up in the wrong place

It appears that this is a similar problem to an issue I reported on the Windows 7 phone controls, where if the databound value went out of range of min\max all the bindings broke and nothing updated anymore. Based on that assumption, I added some code to do a little dance with the value in the binding such that I first extended the ranges to encompass both old and new values, then set the values, and then reset the ranges to their final new values (with synchronous PropertyChanged notifications to force each change to take effect before the next). This fixed some of the problems, but the qualitative ranges still vanish sometimes. I don't see why the change in units would matter since qualitativerange length values are documented as ratios and not absolute values against min/max, but somehow the change in units (numeric values of min/max) is causing things to fall apart.

Here is a stripped down version of the XAML:

 

<telerikDataVisualization:RadBulletGraph

    Orientation="Vertical"
    ComparativeMeasure="{Binding BulletDisplayValue, Mode=OneWay}"

     StartValue="{Binding MinBullet, Mode=OneWay}"

     EndValue="{Binding MaxBullet, Mode=OneWay}"

     TickStep="{Binding BulletTick, Mode=OneWay}"

     LabelStep="{Binding BulletTick, Mode=OneWay}">



<telerikDataVisualization:RadBulletGraph.QualitativeRanges>
      <telerikDataVisualization:BarIndicatorSegment Length="{Binding BulletPreWidth}" Stroke="{StaticResource bulletBelowRangeVertical}"
            Thickness="50">

    </telerikDataVisualization:BarIndicatorSegment>

    <telerikDataVisualization:BarIndicatorSegment Length="{Binding BulletOkWidth, Mode=OneWay}" Stroke="{StaticResource bulletInRange}"

Thickness="50"/>

     <telerikDataVisualization:BarIndicatorSegment Length="{Binding BulletPostWidth, Mode=OneWay}"

     Stroke="{StaticResource bulletAboveRangeVertical}"

     Thickness="50"/>

</telerikDataVisualization:RadBulletGraph.QualitativeRanges>

</telerikDataVisualization:RadBulletGraph>

Has anybody gotten comparative ranges to update correctly when min and max change?

- Chris

(Also, vertical bullet graphs are HORRIBLE to work with. It looks like it just slaps a rotation transform on the whole control. That means when writing your templates everything is rotated (top margin is right margin, etc), there are clipping issues with rotated text, and so on. My brain hurts trying to make them look right)

[Ivaylo Gergov]

Hi Chris,

Thank you for contacting us.

I admit that setting the EndValue property to a less value than the default Value (100) breaks the current bindings. I have forwarded your feedback to our developers and this bug will be fixed in our 2013 Q2 official release, that will be available next week.

About the vertical bulletgraph - could you please elaborate on what exactly is the issue that you experience? If you could send us a sample code for the scenario it will be helpful. Also, you can take a look at the examples for vertical bulletgraph in our QSF Demo, that is placed in the following folder - C:\Program Files (x86)\Telerik\RadControls for Windows 8 XAML Qx 2013\Demos.

Let me know if this helps. Also, I have updated your Telerik points for your valuable feedback.

Regards,
Ivaylo Gergov
Telerik

[Chris]

Thank you for the followup. I will retry my scenario after the next version comes out.


As for the vertical bulletgraph issue, I have been digging into the issue a bit and it appears to not be as bad as I initially thought. It is primarily an issue with templates referenced in the vertical bullet needing to have a rotation render transform applied at the top level of your template for things to work the way I would expect..

As an example, here is an instance with a ComparativeMeasure template, which attempts to set a bar across the width of the graph at the location of the comparative measure. Note that the template doesn't have a rotation transform specified for the grid.

Because of this:
1) The width of the grid in the template is controlled by the grid's "Height" attribute instead of "Width", and vice-versa.
2) The text is rotated vertically even though nothing about that is said in the template.
3) The components of the grid behave counter-intuitively. HorizontalAlignment="Left" actually means VerticalAlignment="Top". VerticalAlignment="Top" actually means HorizontalAlignment="Right", etc, etc.
4) Similarly, horizontal margins control vertical spacing, etc.

Once I added a rotation transform to the top-level grid, things start to work more intuitively but it took me a bit to determine that the graph was unexpectedly applying a rotation to the templates (perhaps I was extra dense that day) and nothing was mentioned in the docs about this behavior. 

I will try again with my complex template definition - maybe with a top-level transform I can get things to layout correctly. 

-Chris

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BulletTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:DataVisualization="using:Telerik.UI.Xaml.Controls.DataVisualization"
    x:Class="BulletTest.MainPage"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="BulletGraphComparativeMeasureTemplate">
            <Grid
                    Height="100"
                    Width="Auto"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" >
                <Rectangle
                    Grid.Row="0"
                    Grid.Column="0"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Opacity="1"
                    Width="6"
                    Height="90"
                    Margin="0,0,0,10"
                    Fill="{StaticResource ApplicationForegroundThemeBrush}"/>
                <Polygon
                    Grid.Row="0"
                    Grid.Column="0"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Width="12"
                    Opacity="1"
                    Height="12"
                    Points="6,0 12,6 6,12, 0,6"
                    Margin="0,0,0,0"
                    Fill="{StaticResource ApplicationForegroundThemeBrush}"/>
                <TextBlock Text="Test" HorizontalAlignment="Right"/>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <DataVisualization:RadBulletGraph
            Orientation="Vertical"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"

            Height="600"
            Width="200"

            ComparativeMeasure="60"
            ComparativeMeasureTemplate="{StaticResource BulletGraphComparativeMeasureTemplate}"

            Margin="0,0,0,0"/>

    </Grid>
</Page>

[Ivaylo Gergov]

Hi Chris,

Thank you for the explanation.

Indeed, the current implementation of the Vertical BulletGraph applies RenderTransform on its labels and ticks. It is our omission to explain this in the documentation and we will update it. Also, we have plans to improve the behavior of RadBulletGraph when its Orientation is vertical, but for now we do not have a particular time frame set.

You can use our Ideas and Feedback portal to log this as an idea. Thus, our community will be able to vote for it and raise its priority.

If you have any other questions or suggestions do not hesitate to contact us again.

 

Regards,
Ivaylo Gergov
Telerik

[Chris]

The recently released 611 version of the controls seems to have fixed the BulletGraph QualitativeRanges issue.

Thanks,
Chris