Bar Graph Label Questions

Bar Graph Label Questions

Posted by: dducharme on 21 October 2019, 7:50 am EST

• 

  dducharme

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 October 2019, 7:50 am EST - Updated 4 October 2022, 12:03 am EST

  I am working on taking some graphs made in excel with Pivot Tables and converting them into a C# WPF application where we will have more control over the data. I have gotten most of our graphs over pretty well and just have a couple of quirky ones left that I hope someone could help point me in the right direction.

  1. 

     712×365 6.03 KB
     I have a graph that displays the median value by a grouping on a bar chart. I have the chart displaying properly with the bars ascending vertically and I have placed the DataLabels showing up overlayed over the bar. What I want to happen is for those DataLabels to have a minimum position above the X axis so that they shift up off of the LabelPosition if they would end up over the axis but to otherwise position with LabelPosition.Bottom.

  2. I have a graph with multiple x axis groupings and I am wondering if this is possible and if so if there is a sample. This graph shows median sale price by quarter and then I want the quarters grouped by year.

  Thanks for pointing me in the right direction with these graphs. I think I have everything else I need at this time figured out, this software really was pretty intuitive once I got the initial table showing up.

• 

  dducharme

  • Post Options:
  • Link
    Copy

  Posted 21 October 2019, 7:51 am EST

  Just a note to make sure I was clear, those images are from my Excel pivot tables and are what I am trying to replicate in WPF.

• 

  basant.khatiyan

  

  • Post Options:
  • Link
    Copy

  Posted 21 October 2019, 9:00 pm EST

  Hi,

  1. DataLabels are positioned with respect to data points and can only be specified whether to show, hide or clip a label going outside the plot area. So, to meet your requirements, we have to apply some rendering transform on the elements displaying DataLabels as needed.

  private void Label_Loaded(object sender, RoutedEventArgs e)
  {
   TextBlock label = sender as TextBlock;
   var axisRect = (flexChart.AxisX as IAxis).Rect;
  
   if (label.RenderTransform != null)
   {
    MatrixTransform mt = label.RenderTransform as MatrixTransform;
    var position = new Point(Canvas.GetLeft(label), Canvas.GetTop(label));
    var size = new Size(label.ActualWidth, label.ActualHeight);
    var isLabelInside = axisRect.Top <= (position.Y + size.Width) + 15; //Consider 15 is minimum position above the X-axis
    if (isLabelInside)
    {
     label.RenderTransform = new MatrixTransform(
     mt.Matrix.M11,
     mt.Matrix.M12,
     mt.Matrix.M21,
     mt.Matrix.M22,
     mt.Matrix.OffsetX,
     mt.Matrix.OffsetY - (position.Y + size.Width - axisRect.Top) - 15); //Consider 15 is minimum position above the X-axis
    }
   }
  }
  

  Please refer to the attached sample (prj_ArrangeDataLabels.zip) for complete implementation.

  2. FlexChart supports 3 possible axis groupings viz. Categorical, Numeric, DateTime. You can refer to the DateTimeGrouping section of the FlexChartExplorer product sample(location: “Documents\ComponentOne Samples\WPF\C1.WPF.FlexChart\CS\FlexChartExplorer”) for your requirements. You can use either a built-in DateTimeGroupProvider or create a custom implementation of IAxisGroupProvider if needed.

  For detail about axis grouping, you can refer to documentation from “https://help.grapecity.com/componentone/NetHelp/FlexChartWin/webframe.html#AxisGrouping.html”.

  Thanks,
  
  Basant

  prj_ArrangeDataLabels.zip

• 

  dducharme

  • Post Options:
  • Link
    Copy

  Posted 22 October 2019, 1:35 am EST - Updated 4 October 2022, 12:03 am EST

  Thanks Basant,

  That second answer looks like exactly what I am looking for and I will work on that next.

  For part 1, that is working great when I have 1 series and is performing exactly how I would expect. When I dynamically add a second series to the chart however, I am seeing different labels not show up at all, and more concerning, the 2 series are displaying the same labels incorrectly even though they have different values. I don’t see anywhere in your sample code where it handles series, which function would I need to modify to be series aware?

  

  815×345 23.5 KB

  Thanks again for all of your assistance,

  Dr. Dan

• 

  basant.khatiyan

  

  • Post Options:
  • Link
    Copy

  Posted 22 October 2019, 4:04 pm EST

  Hello Dr. Dan,

  I am sorry but I could not replicate the issue by changing my sample to use multiple series. Please verify the same with the attached modified sample (prj_ArrangeDataLabels_Mod.zip).

  Since we are finding the data label elements by using its text so, by looking at the picture you provided, I want to share the possible reasons for the issues you are observing:

  Regarding the same text in labels for different series: Please make sure that you have correctly specified the DataLabel.Content to display corresponding y value.

  Regarding labels not being displayed: Please make sure that you have allowed overlapping for DataLabels.

  <c1:C1FlexChart.DataLabel>
   <c1:DataLabel Position="Bottom" Angle="-90" Content="{}{y:c0}" Overlapping="Show"/>
  </c1:C1FlexChart.DataLabel>
  

  Hope it will help.

  Thanks,
  
  Basant

  prj_ArrangeDataLabels_Mod.zip

• 

  dducharme

  • Post Options:
  • Link
    Copy

  Posted 23 October 2019, 3:16 am EST

  Thanks for your help. The issue with the labels copying was due to a Label_Rendering function which I have removed. Adding Overlapping=“Show” did fix the other issue, so I am all set with these issues. Thank you again.

  Dr. Dan