Chart field in FlexReport

Chart field in FlexReport

Posted by: kevin.krohn on 5 November 2018, 6:10 am EST

• 

  kevin.krohn

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 November 2018, 6:10 am EST

  I would like to use the chart field in a report with > 1000 records to show in the chart. It seems to not be designed for that number of items to be displayed. I tried to set the auto height property to can grow and shrink but it only keeps the size set in design mode. The flexgrid in the wijmo components seems to be the same way.

  Is there any way I can use either one of these components for this?

• 

  esha.dhir

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2018, 8:49 pm EST

  Hello,

  Charts are visible on FlexReport as image and no scrolling or extending is possible in this case. AutoHeight, etc properties work at control level but cannot control the plot area.
  
  Similarly with FlexGrid for Wijmo.
  
  However, you can use FlexChart in Wijmo that can help you with large number of records using Range Selectors or Axis Scrollbar.
  
  https://demos.wijmo.com/5/PureJS/LearnWijmo/LearnWijmo/#vctwhrnw
  
  https://demos.wijmo.com/5/Angular/AxisScrollbar/AxisScrollbar/
  
  Hope it helps.

  Best Regards,
  
  Esha

• 

  kevin.krohn

  • Post Options:
  • Link
    Copy

  Posted 7 November 2018, 4:54 am EST

  Can the DataLabel.Content value be anything other than {y}? I would like to put other information in it besides the y value. Also, is there a way to do two y axis like in the flexchart?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 8 November 2018, 5:50 pm EST

  You may assign a function to DataLabel.content to customize the dataLabels . The assigned function should accept one parameter of HitTestInfo type and return a string value to be used as dataLabel.

  Yes, you may have 2 Y axis in flexChart, please refer to the following code snippet to add extra Y axis:

  
  var axisY2 = new wijmo.chart.Axis();
    axisY2.position = 'Right';
    axisY2.title = 'Extra';
    axisY2.axisLine = true;
    theChart.series[1].axisY = axisY2;
  

  https://stackblitz.com/edit/js-65j1tt?file=index.js

• 

  kevin.krohn

  • Post Options:
  • Link
    Copy

  Posted 9 November 2018, 5:15 am EST

  So for the DataLabel.content question, I created a function and tried to assign it as {GetLabel()} in the DataLable.content field. This just produced a big method not implemented exception when it tried to render the report. How am I supposed to assign it the function in the FlexChartField in FlexReport?

  For the 2 Y axis question, I am looking for a solution using the FlexChartField in FlexReport. Is there a way to do that one?

• 

  Pragati.Kaushik

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2018, 6:22 pm EST

  Hi,

  The above specified requirements are not directly possible using FlexChartField in FlexReport as it provides only a restricted set of FlexChart features. However, as an alternative, you can perform the required functionality on FlexChart itself and then use it as an image inside FlexReport. So, you can perform it as follows :

  1. Create a FlexChart having 2 Y Axis, one for FlexChart itself and other one for series to be added.

  
  flexChart1.Series.Add(new C1.Win.Chart.Series { Name = "Sales", Binding = "Sales", AxisY = new C1.Win.Chart.Axis { Position = C1.Chart.Position.Left, MajorGrid = true, AxisLine = true, Labels = true, Title="Absolute Sales"} });
  
  flexChart1.AxisY.Position = C1.Chart.Position.Right;
  flexChart1.AxisY.AxisLine = true;
  
  

  2. Use Labelrendering event on FlexChart to customize DataLabel text as follows:

  
  private void FlexChart1_LabelRendering(object sender, C1.Win.Chart.RenderDataLabelEventArgs e)
  {
   e.Text = string.Format("{0:p1}", (e.Item as DataItem).Sales / _totalSale);
  }
  
  

  3. Now Save FlexChart as an Image and use that image in FlexReport.

  Please refer the attached sample for detailed implementation.

  Thank you.
  
  CustomDataLabel.zip