Flutter PDF & Charts

[Baris Kadem]

Hello

I'm developing an application with Flutter.
I read a read-made PDF file and print datas on its pages with Syncfusion Flutter PDF package.

Sample codes;

Future<void> _createPDF(BuildContextcontext) async {
    finaldata=awaitrootBundle.load('assets/results.pdf');
    finalUint8Listbytes=Uint8List.fromList(data.buffer.asUint8List());
    finalPdfDocumentdocument=PdfDocument(inputBytes:bytes);
    finalByteDatafontData=awaitrootBundle.load('assets/calibri.ttf');
    finalUint8ListfontBytes=fontData.buffer.asUint8List();

 finalPdfPagepage=document.pages[0];
    finalPdfGraphicsgraphics=page.graphics;
    finalPdfTrueTypeFontfont=PdfTrueTypeFont(fontBytes, 10);
    finalPdfSolidBrushbrush=PdfSolidBrush(PdfColor(0, 0, 0));
    finalPdfStringFormatformat=PdfStringFormat();
    format.alignment=PdfTextAlignment.center;

graphics.drawString(atimUzunlugu.toStringAsFixed(3), font,
        brush:brush,
        bounds:constRect.fromLTWH(163, 312, 150, 100),
        format:format);

I create a table on the 3rd page of the PDF with a for loop. I want to add this table datas as a chart to the 3rd page of the PDF using the Syncfusion Chart package. How can I do that?

 final PdfPage page3 = document.pages[2];
    final PdfGraphics graphics3 = page3.graphics;

    graphics3.drawString('Percent Passing, %', font,
        brush: brush,
        bounds: const Rect.fromLTWH(50, 110, 200, 20),
        format: format);

    graphics3.drawString('Size, m', font,
        brush: brush,
        bounds: const Rect.fromLTWH(150, 110, 200, 20),
        format: format);

    double size = 0.0;
    double yOffset = 130;
    double percentPassing = 0.0;
    const double epsilon = 0.001;

    for (size = 0.00; size <= 10.00; size += 0.05) {
      percentPassing =
          100 - (exp(-pow(size / karakteristikBoyut, uniformite))) * 100;

      graphics3.drawString(percentPassing.toStringAsFixed(2), font,
          brush: brush,
          bounds: Rect.fromLTWH(50, yOffset, 200, 20),
          format: format);

      graphics3.drawString(size.toStringAsFixed(2), font,
          brush: brush,
          bounds: Rect.fromLTWH(150, yOffset, 200, 20),
          format: format);

      yOffset += 10;

      if ((percentPassing - 100).abs() < epsilon) {
        break;
      }
    }

[Jeyalakshmi Thangamarippandian]

Hi,

We do not have direct support for inserting chart data into a PDF grid in the Flutter library. Therefore, you can convert the chart to an image first, and then add the image to the grid. For further details, please refer to the UG documentation:

How to export the cartesian chart as a pdf document (SfCartesianChart) ? | Syncfusion

Exporting in Flutter Cartesian Charts widget | Syncfusion

Tables in Flutter PDF library | Syncfusion

Regards,

Jeyalakshmi T 

[Baris Kadem]

Hello,
Thank you for your answer sir. 
I reviewed the documents you sent, but I couldn't understand how to convert the table I created with the for loop into chart. I getting errors.

[Jeyalakshmi Thangamarippandian]

Currently, we are analyzing this, and we will update with further details on March 12th, 2024.

[Baris Kadem]

Thank you sir, I'm waiting 

[Jeyalakshmi Thangamarippandian]

Thank you for waiting. We will provide further details on March 12th, 2024.

[Jeyalakshmi Thangamarippandian]

To convert the data in the table created with a for loop into a chart, we suggest listing that data in a model and assigning the model to the ‘dataSource’ of the series.

 

Code Snippet:

 

List<ChartData> chartData = []; // Declare chartData as a member variable

 

 @override

 void initState() {

   _generateChartData(); // Generate chart data

   super.initState();

 }

 

 void _generateChartData() {

   double size = 0.0;

   double percentPassing = 0.0;

   const double epsilon = 0.001;

   double karakteristikBoyut = 0.5;

   double uniformite = 0.5;

 

   for (size = 0.00; size <= 10.00; size += 0.05) {

     percentPassing =

         100 - (exp(-pow(size / karakteristikBoyut, uniformite))) * 100;

 

     percentPassing.toStringAsFixed(2);

     size.toStringAsFixed(2);

 

      chartData.add(ChartData(double.parse(percentPassing.toStringAsFixed(2)),

          double.parse(size.toStringAsFixed(2))));

 

     if ((percentPassing - 100).abs() < epsilon) {

       break;

     }

   }

 }

 

 @override

 Widget build(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       title: const Text('Syncfusion Flutter Charts'),

     ),

     body: SfCartesianChart(

         series: <CartesianSeries<ChartData, int>>[

           LineSeries<ChartData, int>(

             dataSource: chartData,

             xValueMapper: (ChartData data, _) => data.x,

             yValueMapper: (ChartData data, _) => data.y,

           )

         ]),

   );

 }

}

 

class ChartData {

 ChartData(this.x, this.y);

 final int x;

 final double y;

}

 

 

To export the cartesian chart as a pdf document, we have a user guide (UG) and knowledge base (KB). We have shared it below for your reference. You can refer this user guide and knowledge base to achieve your requirements.

 

UG Link: https://help.syncfusion.com/flutter/cartesian-charts/export-cartesian-chart#export-pdf

 

KB Link: https://support.syncfusion.com/kb/article/11557/how-to-export-the-cartesian-chart-as-a-pdf-document-sfcartesianchart

Kindly use the following link to download the working sample for creating a chart using for loop and adding it to a PDF document.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_demo_sample_13-1859130018.zip

[Baris Kadem]

Hello sir.

Thank you for your help.

It worked, I was able to add the chart to the pdf.

This time I had a problem like this;

I show the chart to the user on a different page.

I do not want this graph to appear again in the scaffold of the report creation page. It should only appear in the pdf.

I tried hiding it using the Visibilty feature, this time I get an error in creating the pdf. How can I prevent the chart from being shown to the user on the Create Report page?

The page where I show the chart to the user in the application: https://i.ibb.co/kQNcZhW/2024-05-08-03-12.png

The page where I do not want to show the chart to the user in the application, but the image is taken for pdf: https://i.ibb.co/fFZHhqR/2024-05-08-03-12-1.png

[Jeyalakshmi Thangamarippandian]

Sorry for inconvenience, currently we are validating to convert the chart to PDF without adding it into Scaffold. We will inform further details within one business day on May 10 2024.

[Karmegam Seerangan]

Hi,

We would like to inform you that without adding a chart widget in the widget tree, there is no option to achieve your requirement. When converting the chart to PDF, first the chart need to be converted into an image using the toImage from the currentState of the _cartesianChartKey in the SfCartesianChart. If you want to show the chart after converting it into PDF but without displaying it, you should need to add the chart in the widget tree to access currentState. To achieve your requirement, we suggest you to add the chart in the widget tree using the Stack widget and hide the chart by placing the form above the chart. We have shared a code snippet, screen recording, and a sample for your reference. You can modify the sample based on your needs. Please let us know if you require any further assistance.

Code Snippet:

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

title: const Text('Syncfusion Flutter Charts'),

      ),

      body: Stack(

children: [

_sfCartesianChart,

Container(

height: double.infinity,

width: double.infinity,

color: Colors.white,

child: Row(

mainAxisSize: MainAxisSize.min,

mainAxisAlignment: MainAxisAlignment.center,

children: [

TextButton(

onPressed: () {

_renderPDF();

                  },

child: const Text('Convert To PDF'),

                ),

              ],

            ),

          ),

        ],

      ),

    );

  }

 

Attachment: forum_187021_charttopdf_83d49847.zip

Regards,

Karmegam