Flat shaped bar and single data label for RangeColumnSeries

[Eli]

Hi, I am trying to plot an electronic band diagram of some stacked structure.

As you can see in the figure, AdornmentPosition="TopAndBottom" is used for RangeColumnSeries.

Basically each element of bound data has both high and low value. 

But for some reason I want to draw flat-shaped graph (which means high value = low value) like the leftmost and the rightmost ones.

Also, I would like to have single data label for flat data (ex: only -4.7 text for leftmost one)

If i put high and low value same, flat colored bar vanishes. 

To resolve that, I set the lower value slightly less (0.05) than the high value. Then I have unwanted data label below the flat bar.

I tried my best to remove those -4.75 and -3.25 text programatically, but I couldn't find the way to detach data binding from RangeColumnSeries.

Would anybody recommend a solutions for this?

[Durgadevi Selvaraj]

Hi Eli, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your requirement and achieved it by using converter to the label template of chart adornment as shown in the below code, 

MainWindow.xaml: 

   <Grid.Resources> 

       <local:LableConverter x:Key="conv"/> 

    </Grid.Resources> 

         

   <chart:SfChart Margin="10"> 

      <chart:SfChart.PrimaryAxis> 

         <chart:NumericalAxis/> 

      </chart:SfChart.PrimaryAxis> 

 

      <chart:SfChart.SecondaryAxis> 

         <chart:NumericalAxis Minimum="-7" Maximum="-2"/> 

      </chart:SfChart.SecondaryAxis> 

 

      <chart:RangeColumnSeries Palette="Metro" ItemsSource="{Binding Collection}" XBindingPath="XValue" High="High" Low="Low"> 

         <chart:RangeColumnSeries.AdornmentsInfo> 

             <chart:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="LabelContentPath" AdornmentsPosition="TopAndBottom" LabelPosition="Outer" > 

                  <chart:ChartAdornmentInfo.LabelTemplate> 

                        <DataTemplate> 

                             <TextBlock Text="{Binding Converter={StaticResource conv}}" FontWeight="Bold"/> 

                        </DataTemplate> 

                   </chart:ChartAdornmentInfo.LabelTemplate> 

              </chart:ChartAdornmentInfo> 

          </chart:RangeColumnSeries.AdornmentsInfo> 

       </chart:RangeColumnSeries> 

</chart:SfChart> 

 

LabelConverter.cs: 

public class LableConverter : IValueConverter 

{ 

      public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

      {           

            var adornment = (value as ChartAdornment); 

            var diff = (adornment.Item as Model).High - adornment.YData; 

 

            if (diff <= 0.05 && diff != 0) 

                return ""; 

            else 

                return adornment.YData;       

 

      } 

 

} 

 

 

Please find the output screenshot, 

 

We have prepared a demo sample for your reference and please find it from below link, 

Sample:Range_Column
 

 

Please let us know if you need any further assistance on this. 

 

Regards,  

 

Durgadevi S 

[Eli]

Wow, thank you so much! I didn't know about LabelConverter and IValueConverter. Also I appreciate for your clean code example.

In addition to that, how can i set different width and spacing of each column? For example, width={7, 1, 8.5, 3, 8, 10} with spacing of width/10 in your code.

Thank you in advance.

Add:

If i change the high and low values and re-assign Collection to the ItemSource, columns in graph update properly, but adornments don't. Why converter function iterates only once? and how to fix it?

[Durgadevi Selvaraj]

Hi Eli, 

Thanks for your update. 

Query 1: how can i set different width and spacing of each column? 

We have analyzed your requirement and currently we don’t have support for setting different width for each column in a series. But we have an option to customize segments width using SegmentSpacing  property as shown in the below code, 

MainWindow.xaml: 

<chart:RangeColumnSeries  Palette="Metro" SegmentSpacing="0.9"   ItemsSource="{Binding Collection}" XBindingPath="XValue" High="High" Low="Low"/> 

Please find the output screenshot, 

 

Also, we have an option to customize ChartArea spacing using Spacing property as like in the below code, 

MainWindow.xaml: 

<chart:RangeColumnSeries  Palette="Metro" chart:ChartSeriesBase.Spacing="0.7"  ItemsSource="{Binding Collection}" XBindingPath="XValue" High="High" Low="Low"/> 

Please find the output screenshot, 

 

However, we have prepare a workaround solution for your requirement(different width for each column in a series) by Setting the CustemTemplate to the series as shown in the below code, 

MainWindow.xaml: 

<chart:RangeColumnSeries  Palette="Metro"   ItemsSource="{Binding Collection}" XBindingPath="XValue" High="High" Low="Low"> 

                <chart:RangeColumnSeries.CustomTemplate> 

                    <DataTemplate> 

                        <Canvas> 

                            <Rectangle Height="{Binding Height}" Fill="{Binding Interior}" Width="{Binding Converter={StaticResource widthConv}}" Canvas.Left="{Binding Converter={StaticResource rectx}}" Canvas.Top="{Binding RectY}"/> 

                        </Canvas> 

                    </DataTemplate> 

                </chart:RangeColumnSeries.CustomTemplate> 

  </chart:RangeColumnSeries> 

Please find the output screenshot, 

 

Please find the sample from below link, 

Sample:Column_Width 

Query 2: If i change the high and low values and re-assign Collection to the ItemSource, columns in graph update properly, but adornments don't. Why converter function iterates only once? and how to fix it? 

We can reproduced the reported issue on our end and the fix for the issue will be included in our Volume 3, Service Pack 2 which will be available in end of September 2017.  

However, we have prepared a workaround solution by setting new collection from ViewModel as ItemsSource when dynamically changing the data. 

Please find the sample from below link, 

Sample:RangeColumn_DataChanging
 

Please find the output screenshots, 

1.Before changing data source, 

 

2.After setting new collection as data source, 

 

  

Regards, 

Durgadevi S