google / chartjs.dart

ARCHIVED/UNMAINTAINED Dart API for Chart.js
https://pub.dev/packages/chartjs
Other
143 stars 53 forks source link

Please update your sample / dynamic chart update #10

Open MikeMitterer opened 7 years ago

MikeMitterer commented 7 years ago

Hi, can you add a timer to show how you can update the chart dynamically?

import 'dart:async';
import 'dart:html';
import 'dart:math' as math;

import 'package:chartjs/chartjs.dart';

void main() {
  var rnd = new math.Random();
  var months = <String>["January", "February", "March", "April", "May", "June"];

  final LinearChartData data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
    new ChartDataSets(
        label: "My First dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        data: months.map((_) => rnd.nextInt(100)).toList()),
    new ChartDataSets(
        label: "My Second dataset",
        backgroundColor: "rgba(151,187,205,0.2)",
        data: months.map((_) => rnd.nextInt(100)).toList())
  ]);

  final ChartConfiguration config = new ChartConfiguration(
      type: 'line', data: data, options: new ChartOptions(responsive: true));

  final Chart chart = new Chart(querySelector('#canvas') as CanvasElement, config);

  new Timer.periodic(new Duration(milliseconds: 500),(_) {
      data.datasets.first.data[1] = rnd.nextInt(100);
      data.datasets.first.data[2] = rnd.nextInt(100);
      chart.update();
  });
}