dygraph 1.0.0

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

1. Register the Dart package in your pubspec.yaml:

   dependencies:
     dygraph: ^1.0.0
   

   copied to clipboard

2. 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>
   

   copied to clipboard

3. 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);
   }
   

   copied to clipboard

Note 1: Dart DateTime objects need to be converted to native js dates by using dart:html_common and convertDartToNative_DateTime().

Note 2: When passing a Dart function as a callback, make sure to wrap it with allowInterop() or allowInteropCaptureThis().

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.