Are there undocumented MVVM limitations for Bullet chart? Documentation for ToolTip needed also.

[Rob Kerr]

I've built the following Bullet Graph, and it works OK.

However I have two problems:

1. Some properties do not bind properly. I can bind the ComparativeMeasure and FeaturedMeasure only.  I need to bind other properties like the QualitativeRangeEnd properties and the Maximum property.  As filters change, these values should change--but from what I can see I can only hard-code these values.  This is not OK because the qualitative ranges vary depending on the Comparative Measure value for different filter selections.  The documentation says  MVVM is supported, but no details about this limitation.  The sample program code doesn't show how to use MVVM with this control--it hard codes these values as well.

2. How can the tooltip be made to work properly? With this BulletGraph, if I change ShowToolTip to "True", the tooltip always displays zero (0).  There is a property for the tool tip data template, but no documentation how to use it, and the example code has the ShowToolTip set to "False". 

<BulletGraph:SfBulletGraph
    Grid.Row="0"
    Margin="0"
    Padding="0"
    Visibility="Visible"
    x:Name="monthBullet"
    HorizontalAlignment="Left"
    VerticalAlignment="Center"
    Orientation="Horizontal" LabelStroke="#222222" LabelSize="10" MajorTickStrokeThickness="1" LabelOffset="-8" LabelPosition="Below" 
    FeaturedMeasure="{Binding MonthBulletActualHours}" FeaturedMeasureBarStroke="#1F77B4"  ShowToolTip="False"
    ComparativeMeasure="{Binding MonthBulletTargetHours}" ComparativeMeasureSymbolStroke="#B40F1E" ComparativeMeasureSymbolStrokeThickness="2"
    Minimum="0" Maximum="160" Interval="20" FlowDirection="Forward"
    QualitativeRangesSize="20"
    QuantitativeScaleLength="370">
    <BulletGraph:SfBulletGraph.Caption>
        <StackPanel Margin="0,0,10,0" Width="170">
            <TextBlock Text="{Binding MonthBulletCaption1}" Foreground="#222222" FontSize="10" FontFamily="Segoe UI" HorizontalAlignment="Center"/>
            <TextBlock Text="{Binding MonthBulletCaption2}" Foreground="#222222" FontSize="10" FontFamily="Segoe UI" HorizontalAlignment="Center"/>
        </StackPanel>
    </BulletGraph:SfBulletGraph.Caption>
    <BulletGraph:SfBulletGraph.QualitativeRanges>
        <BulletGraph:QualitativeRange RangeEnd="70" RangeStroke="#CAB69A" RangeOpacity="1" />
        <BulletGraph:QualitativeRange RangeEnd="90" RangeStroke="#E7D1B3" RangeOpacity="1"/>
        <BulletGraph:QualitativeRange RangeEnd="160"  RangeStroke="#FDEFD8" RangeOpacity="1"/>
    </BulletGraph:SfBulletGraph.QualitativeRanges>

[Jeyasri M]

Hi Rob,

Sorry for the inconvenience caused.

Regarding Binding the BulletGraph properties.

We are able to reproduce the mentioned issue of “QualitativeRangeEnd property is not bind properly” and we have logged an issue report regarding this. The fix for this issue will be available in any of our upcoming release. We will update you once the implementation has been rolled out or else if you need patch in advance you can create incident in below link.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents/incidents/newincident

 

Regarding MVVM Support.

As of now most of the BulletGraph control’s property support MVVM pattern behavior. We have prepared the simple sample to use MVVM with BulletGraph control. Please find the same in below attachment.

Note: We are unable to reproduce the issue of SfBulletGraph Maximum property is not bind properly. So could you please modify the provided sample to reproduce the mentioned issue or else provide us more information regarding this issue, so that we could analyze based on that and provide you better solution.

Regarding ToolTip Template in BulletGraph.

Tooltip in BulletGraph is used to view the values of FeaturedMeasure, ComparativeMeasure and QualitativeRange in user required design. The BulletGraph tooltip will be displayed only when the ShowToolTip property is set to true.

Please refer the below code snippet for FeaturedMeasureToolTipTemplate.

Code Snippet:

[XAML]

 

   <syncfusion:SfBulletGraph>

            <syncfusion:SfBulletGraph.FeaturedMeasureToolTipTemplate>

                <DataTemplate>

                    <Border BorderBrush="#D3D3D3" BorderThickness="1.5" Background="#232323" CornerRadius="5">

                        <TextBlock Text="{Binding}" FontSize="14" Foreground="#D3D3D3" Margin="12 8"/>

                    </Border>

                </DataTemplate>

            </syncfusion:SfBulletGraph.FeaturedMeasureToolTipTemplate>

        </syncfusion:SfBulletGraph>

 

 

Please refer the below code snippet for ComparativeMeasureToolTipTemplate.

Code Snippet:

[XAML]

  <syncfusion:SfBulletGraph>  

            <syncfusion:SfBulletGraph.ComparativeMeasureToolTipTemplate>

                <DataTemplate>

                    <Border BorderBrush="#D3D3D3" BorderThickness="1.5" Background="#232323" CornerRadius="5">

                        <TextBlock Text="{Binding}" FontSize="14" Foreground="#D3D3D3" Margin="12 8"/>

                    </Border>

                </DataTemplate>

            </syncfusion:SfBulletGraph.ComparativeMeasureToolTipTemplate>

        </syncfusion:SfBulletGraph>

 

 

Please refer the below code snippet for QualitativeRangeToolTipTemplate.

Code Snippet:

[XAML]

 

<syncfusion:SfBulletGraph>

        

            <syncfusion:SfBulletGraph.QualitativeRangeToolTipTemplate>

                <DataTemplate>

                    <Border BorderBrush="#D3D3D3" BorderThickness="1.5" CornerRadius="5">

                        <Border Background="{Binding RangeStroke}" Opacity="0.7" CornerRadius="5">

                            <StackPanel Orientation="Horizontal" Margin="12 8" >

                                <TextBlock Text="{Binding RangeStart}" FontSize="14" Foreground="Black"/>

                                <TextBlock Text="-" FontSize="14" Foreground="Black" Width="10" TextAlignment="Center"/>

                                <TextBlock Text="{Binding RangeEnd}" FontSize="14" Foreground="Black"/>

                            </StackPanel>

                        </Border>

                    </Border>

                </DataTemplate>

            </syncfusion:SfBulletGraph.QualitativeRangeToolTipTemplate>

        </syncfusion:SfBulletGraph>

 

 

And the above details will also be added in the user guide document in the upcoming Volume 4, 2014 release.

 

Please let us know if you need any further assistance.

Regard,

Jeyasri M

Attachment: BulletGraph_MVVM_f1dd20fe.zip

[Rob Kerr]

Jeyasri,

Thanks for the details on the templates.  That helps a great deal!

Looking at your example, I think I see the binding problem (which I still think are bugs in the control).  The difference b/w the sample and my real-world program is that while your sample program does use binding, you are binding to values that are set in the ViewModel constructor--but these ViewModel properties never change during the run of the program. The control does appear to read the values set in the ViewModel constructor (probably before the UI for the control is created), but as values change when the user interacts with the page, not all values used to render the control are being re-read from properties.

I modified your sample to reflect how I would bind values in a program that changes the data during the run of the program.  The zip is attached.

When I do this, the following still work fine:

1. Binding of the Actual -- the bullet actual bar moves as it should.

2. Binding of the target -- the vertical bar moves as it should

The following problems surface:

1. The maximum never changes from the value set in the ViewModel constructor.  So as actual/target become more than the initial max value, they just go to the end of the bullet and stop since the maximum is fixed to its original value.  The maximum should change along with actual/target

2. The QualitativeRangeEnd values (bound in XAML in my revision) do not display at all (not even initially).  Your sample hard-codes these values, and they do display--but cannot be changed at runtime.  In a bullet chart, usually the qualitative ranges will be based on the maximum, so as the maximum changes, the ranges should also change. It is a requirement for the maximum to change and not be hard-coded at programming time.

3. The tooltip displays only the value that is set to the property in the ViewModel constructor.  This is not correct.  As the actual/target values change, the tooltip should reflect the new values, not the original values.

Thanks for your quick response.  I hope the example and detail help better understand the problems I'm encountering.  LMK if I'm just going about this the wrong way.

Best regards,

Rob 

Attachment: RobKerr_BulletGraph_MVVM_31939759.zip

[Jeyasri M]

Hi Rob,

 

Sorry for the inconvenience caused.

 

We are analysing on the reported scenarios and the issue reported in sample level. We will let you know the details of this in two business days (November 28, 2014). We appreciate your patience until then.

 

Please let us know if you need any further clarification.

 

Regards,

Jeyasri M

[Jeyasri M]

Hi Rob,

 

Sorry for delay in getting back to you.

 

Regarding SfBulletGraph ToolTip and QualitativeRangeEnd value Binding.

We are able to reproduce the mentioned issue of “QualitativeRangeEnd values and tooltip value displays not updated while changing the value at run time”. We have also logged an issue report on tooltip value displays and the fix for reported issue will be available in our upcoming Volume 4, 2014 main release. We will update you once it has been rolled out. We appreciate your patience until then.

 

Regarding SfBulletGraph Maximum Value Binding:

In the provided sample we have note that the local property of BulletGraphMaximum not listened by property changed event handler which is used bind Maximum property of BulletGraph.

Please find the modified code to change the Maximum value at run time by listening local property of BulletGraphMaximum.

 

C#

  public double BulletGraphMaximum

        {

            get

            {

                return maximum;

            }

            set

            {

                this.maximum = value;

                OnPropertyChanged("BulletGraphMaximum");

            }

        }

 

Based on this we have modified the sample and find the same in below attachment.

 

Please let us know if you have any concerns.

Regards,

Jeyasri M

Attachment: BulletGraph_SampleModified_6cdebf50.zip

[Jeyasri M]

Hi Rob,             

 

We have fixed the reported “SfBulletGraph ToolTip and QualitativeRangeEnd value Binding” issue and fix for this reported issue has been included in our Essential Studio Volume 4 2014 release, which is available for download under the following link.

 

www.syncfusion.com/forums/117834/essential-studio-2014-volume-4-final-release-v12-4-0-24-available-for-download

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

 

Regards,

Jeyasri M