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
Dygraph
instance: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_common
andconvertDartToNative_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.