dygraph

Description:

dygraph

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
copied to clipboard


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


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.