A Flutter widget to embed vega-lite charts to flutter web and flutter apps using webview_flutter. Works consistently in Flutter web as of now. Internally it uses vega-embed js library to embed these specs using JS interops and HTMLElementView.
Vega-lite charts are visual grammar based charts which are specified using vega-lite specifications in the form of json files.
A Demo page with examples for different vega-embed options is available below.
https://abhilash-chandran.github.io/vega_embed_flutter/
A full fledged demo page with various charts utilizing this package is available here
A webview_flutter based widget is also exposed which allows rendering vega-lite charts in mobile devices.
This feature is still experimental. Please report any issues in this regard.
This widget is made possible only because of the great works done by the team behind vega-embed, vega-Lite and vega. For a detailed documentation of how visualize using Vega-lite specs please head to their doumentation page.
Start by adding the script tag for vega related java script files. For example.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<title>vega_flutter</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Vega-Lite and Vega defines its visualization in the form of json file. So for you project it would be easy to maintain all this vega-lite spec files in a folder say vega_lite_specs folder. For example
$Project_root\vega_lite_specs
|_ bart_chart.json
|_ interactive_multiline_plot.json
|_ interactive_splom.json
In order for the web build to pick up the json schemas add it your pubspec.yaml. For e.g.
flutter:
uses-material-design: true
# This line includes all the files these directories during the build process
# and placess them under build/web/assets folder.
assets:
- vega_lite_specs/
Just import the vega_embed_flutter library as below
import 'package:vega_embed_flutter/vega_embed_flutter.dart';
Create a normal stateless/ful widget and use it as a normal stateless/ful widget.
class BarChart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return VegaLiteEmbedder(
viewFactoryId: 'MyBarChart',
vegaLiteSpecLocation: '/assets/vega_lite_specs/bar_chart.json',
);
}
}
Follow the Add your vega lite schema files section and Add assets entry in pupspec.yaml as mentioned above.
Import the vega embed view specific library as shown below
import 'package:vega_embed_flutter/vega_embed_webview.dart';
Create a normal stateless/ful widget and use it as a normal stateless/ful widget.
class ExampleWebViewApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Center(
child: Column(
children: [
Expanded(
child: VegaLiteWebViewEmbedder(
vegaLiteSpecLocation: 'vega_lite_specs/bar_chart copy.json',
),
),
Expanded(
child: VegaLiteWebViewEmbedder(
vegaLiteSpecLocation:
'vega_lite_specs/interactive_index_chart.vl.json',
vegaEmbedOptions: VegaEmbedOptions(theme: 'dark'),
),
),
],
),
),
),
);
}
}
Following vega-embed options are tested and are available as part of demo page. If you need further comprehensive options to be tested or enabled please do raise and issue so that I can spend time on options which are necessary.
For a detailed description of what each vega embed options check this page. https://github.com/vega/vega-embed#options
| Embed Options | Working | Comments |
|---|---|---|
| mode | 🚧 | Avialble but not tested. |
| theme | 💯 | Check here for detials on the themes. Valid values are [excel, ggplot2, quartz, vox, fivethirtyeight , dark, latimes, urbaninstitute, googlecharts] |
| defaultStyle | ✔️ | |
| renderer | ✔️ | |
| logLevel | 🚧 | |
| tooltip | 🤔 | Let me know if you need it |
| loader | ❌ | |
| patch | ❌ | |
| width | ✔️ | Note: |
| height | ✔️ | Note: |
| padding | ✔️ | |
| actions | 🚧 | Note: |
| scaleFactor | ✔️ | Note: This is a scale factor for the exported file, not the plot. |
| config | 🤔 | Let me know if you need it. Porting config object to dart will take lot of effort to test. |
| editorUrl | 🚧 | Avialble but not tested. |
| sourceHeader | 🚧 | Avialble but not tested. |
| sourceFooter | 🚧 | Avialble but not tested. |
| hover | 🤔 | Let me know if you need it. |
| i18n | ✔️ | |
| downloadFileName | ✔️ | |
| formatLocale | 🚧 | Avialble but not tested. |
| timeFormatLocale | 🚧 | Avialble but not tested. |