Exporting in Flutter Cartesian Charts (SfCartesianChart)
19 Apr 202213 minutes to read
SfCartesianChart
provides support to export the Cartesian chart as a PNG image or as PDF document.
Export image
To export the Cartesian chart as a PNG image, we can get the image by calling toImage
method in repaint boundary.
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class ExportChart extends StatefulWidget {
const ExportChart({Key? key}) : super(key: key);
@override
_ExportState createState() => _ExportState();
}
class _ExportState extends State<ExportChart> {
_ExportState();
late GlobalKey<SfCartesianChartState> _cartesianChartKey;
late List<ChartSampleData> _chartData;
@override
void initState() {
_cartesianChartKey = GlobalKey();
_chartData = <ChartSampleData>[
ChartSampleData(x: 'Jan', y: 12),
ChartSampleData(x: 'Feb', y: 28),
ChartSampleData(x: 'Mar', y: 35),
ChartSampleData(x: 'Apr', y: 27),
ChartSampleData(x: 'May', y: 42),
ChartSampleData(x: 'Jun', y: 33)
];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SfCartesianChart(
key: _cartesianChartKey,
primaryXAxis: CategoryAxis(),
series: <ColumnSeries<ChartSampleData, String>>[
ColumnSeries<ChartSampleData, String>(
dataSource: _chartData,
xValueMapper: (ChartSampleData data, _) => data.x,
yValueMapper: (ChartSampleData data, _) => data.y,
)
]
),
TextButton(
child: const Text('Export as image'),
onPressed: () {
_renderChartAsImage();
},
)
]
),
);
}
Future<void> _renderChartAsImage() async {
final ui.Image data =
await _cartesianChartKey.currentState!.toImage(pixelRatio: 3.0);
final ByteData? bytes =
await data.toByteData(format: ui.ImageByteFormat.png);
final Uint8List imageBytes =
bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
await Navigator.of(context).push<dynamic>(
MaterialPageRoute<dynamic>(
builder: (BuildContext context) {
return Scaffold(
body: Image.memory(imageBytes)
);
},
),
);
}
}
class ChartSampleData {
ChartSampleData({this.x, this.y});
final String? x;
final num? y;
}
Export PDF
Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.
It is necessary to include the platform-specific file generating codes to save the file as a PDF document. So, create two dart files (save_file_mobile
and save_file_web
) to save and launch the file in different platforms.
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import '../save_file_mobile.dart'
if (dart.library.html) '../save_file_web.dart';
import 'dart:async';
/// Chart import.
import 'package:syncfusion_flutter_charts/charts.dart';
/// Pdf import.
import 'package:syncfusion_flutter_pdf/pdf.dart';
class Export extends StatefulWidget {
const Export({Key? key}) : super(key: key);
@override
_ExportState createState() => _ExportState();
}
class _ExportState extends State<Export> {
_ExportState();
late GlobalKey<SfCartesianChartState> _cartesianChartKey;
late List<ChartSampleData> _chartData;
@override
void initState() {
_cartesianChartKey = GlobalKey();
_chartData = <ChartSampleData>[
ChartSampleData(x: 'Jan', y: 35),
ChartSampleData(x: 'Feb', y: 28),
ChartSampleData(x: 'Mar', y: 33),
ChartSampleData(x: 'Apr', y: 32),
ChartSampleData(x: 'May', y: 40),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SfCartesianChart(
key: _cartesianChartKey,
primaryXAxis: CategoryAxis(),
series: <LineSeries<ChartSampleData, String>>[
LineSeries<ChartSampleData, String>(
dataSource: _chartData,
xValueMapper: (ChartSampleData data, _) => data.x,
yValueMapper: (ChartSampleData data, _) => data.y,
)
]
),
TextButton(
child: const Text('Export as PDF'),
onPressed: () {
_renderPDF();
},
)
]
);
}
Future<void> _renderPDF() async {
final List<int> imageBytes = await _readImageData();
final PdfBitmap bitmap = PdfBitmap(imageBytes);
final PdfDocument document = PdfDocument();
document.pageSettings.size =
Size(bitmap.width.toDouble(), bitmap.height.toDouble());
final PdfPage page = document.pages.add();
final Size pageSize = page.getClientSize();
page.graphics.drawImage(
bitmap, Rect.fromLTWH(0, 0, pageSize.width, pageSize.height));
await FileSaveHelper.saveAndLaunchFile(
document.save(), 'cartesian_chart.pdf');
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5))),
duration: Duration(milliseconds: 2000),
content: Text('Chart has been exported as PDF document.'),
));
}
Future<List<int>> _readImageData() async {
final ui.Image data =
await _cartesianChartKey.currentState!.toImage(pixelRatio: 3.0);
final ByteData? bytes =
await data.toByteData(format: ui.ImageByteFormat.png);
return bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
}
}
class ChartSampleData {
ChartSampleData({this.x, this.y});
final String? x;
final num? y;
}