google / chartjs.dart

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

EXCEPTION: TypeError: Cannot read property 'Chart' of undefined #28

Closed rafbermudez closed 5 years ago

rafbermudez commented 5 years ago

When I try to use the example code (or any other code to create charts) in angular 5 (Dartlang 2 stable) I always get this error: EXCEPTION: TypeError: Cannot read property 'Chart' of undefined

I'm debugging the code, everything seems correct except the last line.

(Devtools screenshot) issue_attachement

I tried renaming the import (as prefix) and the problem persisted. ¿Any Idea?

These are my dependencies:

dependencies:
  angular: ^5.0.0
  angular_forms: ^2.0.0
  angular_router: ^2.0.0-alpha+19
  bootstrap_sass: any
  json_serializable: ^1.2.1
  chartjs: ^0.5.0

dev_dependencies:
  angular_test: ^2.0.0
  build_runner: ^0.10.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  test: ^1.0.0
  sass_builder: ^2.0.0

And this is the code:

void ngOnInit() {
    new Future.delayed(const Duration(seconds: 2), () => createChart());
  }

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

    var 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())
    ]);

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

    CanvasElement canvas = querySelector('#canvas');

    new Chart(canvas, config);
  }

Cheers

rafbermudez commented 5 years ago

Solved! I made an error with the Chart.js library path in the head of my index.html

Works fine with a correct file path

<script src="correct-path/Chart.js"></script>