Chart field in FlexReport

Posted by: kevin.krohn on 5 November 2018, 3:10 pm EST

  • Posted 5 November 2018, 3:10 pm 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?
  • Replied 6 November 2018, 5:49 am 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
  • Replied 7 November 2018, 1:54 pm 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?
  • Replied 9 November 2018, 2:50 am 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
  • Replied 9 November 2018, 2:15 pm 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?
  • Marked as Answer

    Replied 13 November 2018, 3:22 am 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels