dygraph 1.0.0
dygraph: ^1.0.0 copied to clipboard
Dart JS interop for Dygraph - fast, flexible open source JavaScript charting library.
Dygraph (Dart) #
Dart JS interop for Dygraph v2+ - fast, flexible open source JavaScript charting library.
Usage #
-
Register the Dart package in your
pubspec.yaml:dependencies: dygraph: ^1.0.0 -
Load the latest Dygraph source (js and css) in your html layout:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script> -
Create a
Dygraphinstance:import 'dart:html'; import 'package:dygraph/dygraph.dart'; void main() { final el = document.getElementById('chart_container'); final options = DygraphOptions( labels: ['Index', 'X', 'Y'], colors: ['blue', 'red'], ); final data = [ [1, 10, 100], [2, 20, 80], [3, 50, 60], [4, 70, 80], ]; Dygraph(el, data, options); }
Note 1: Dart DateTime objects need to be converted to native js dates by using
dart:html_commonandconvertDartToNative_DateTime().
Note 2: When passing a Dart function as a callback, make sure to wrap it with
allowInterop()orallowInteropCaptureThis().
Check the API reference for detailed documentation.
To view the example, run pub global run webdev serve example from the root directory of this project.