We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Flat shaped bar and single data label for RangeColumnSeries

Thread ID:

Created:

Updated:

Platform:

Replies:

132372 Aug 29,2017 06:03 AM Sep 4,2017 12:13 AM WPF 3
loading
Tags: SfChart
Eli
Asked On August 29, 2017 06:09 AM

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?

Image

Durgadevi Selvaraj [Syncfusion]
Replied On August 30, 2017 03:33 AM

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
Replied On August 31, 2017 07:28 AM

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 [Syncfusion]
Replied On September 4, 2017 12:13 AM

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, 
Please find the output screenshots, 
1.Before changing data source, 
 
2.After setting new collection as data source, 
 
  
Regards, 
Durgadevi S 


 
 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;