Using amCharts with Dart, can't get to display a chart from a callback

Question

I try to display a simple serial chart with the js lib amCharts called from a dart app.

In the following code, the first call to display() in the main() does display the chart as expected.

But when I comment the first display() and click on the button to call display() from a callback, the chart does not appear.

import 'dart:js';
import 'dart:html';

main(){
  ButtonElement button = new Element.tag("button");
  button.type = "submit";
  querySelector("#button").append(button);
  button.onClick.listen((event) => someCallback());

  display(); // this call does display the chart
}

someCallback() {
  display(); // this call does not display the chart
}

display() {
  var chartData = [
                   {
                     "date": "2012-03-01",
                     "price": 20
                   },
                   {
                     "date": "2012-03-02",
                     "price": 75
                   },
                   {
                     "date": "2012-03-03",
                     "price": 10
                   }
                   ];

  context['AmCharts'].callMethod('ready', [(){

    var chart2 = new JsObject(context['AmCharts']['AmSerialChart']);

    chart2['dataProvider'] = new JsObject.jsify(chartData);
    chart2['categoryField'] = "date";
    chart2['dataDateFormat'] = "YYYY-MM-DD";

    var categoryAxis = chart2['categoryAxis'];
    categoryAxis['parseDates'] = true;
    categoryAxis['minPeriod'] = "DD";
    categoryAxis['dashLength'] = 1;

    var valueAxis = new JsObject(context['AmCharts']['ValueAxis']);
    valueAxis['axisColor'] = "#DADADA";
    valueAxis['dashLength'] = 1;
    chart2.callMethod('addValueAxis', [valueAxis]);

    var graph = new JsObject(context['AmCharts']['AmGraph']);
    graph['title'] = "Price";
    graph['valueField'] = "price";
    chart2.callMethod('addGraph', [graph]);

    chart2.callMethod('write', ["chart"]);
  }]);
}

Answer 1

Although I can't find the documentation of AmCharts.ready I suspect it to only be called once amChart is ready. So perhaps once it's already ready nothing is done when you call it.

You can try to move context['AmCharts'].callMethod('ready', [... from display to main :

import 'dart:js';
import 'dart:html';

main(){
  ButtonElement button = new Element.tag("button");
  button.type = "submit";
  querySelector("#button").append(button);
  button.onClick.listen((event) => someCallback());

  context['AmCharts'].callMethod('ready', [display]);
}

someCallback() {
  display(); // this call does not display the chart
}

display() {
  var chartData = [
                   {
                     "date": "2012-03-01",
                     "price": 20
                   },
                   {
                     "date": "2012-03-02",
                     "price": 75
                   },
                   {
                     "date": "2012-03-03",
                     "price": 10
                   }
                   ];

  var chart2 = new JsObject(context['AmCharts']['AmSerialChart']);

  chart2['dataProvider'] = new JsObject.jsify(chartData);
  chart2['categoryField'] = "date";
  chart2['dataDateFormat'] = "YYYY-MM-DD";

  var categoryAxis = chart2['categoryAxis'];
  categoryAxis['parseDates'] = true;
  categoryAxis['minPeriod'] = "DD";
  categoryAxis['dashLength'] = 1;

  var valueAxis = new JsObject(context['AmCharts']['ValueAxis']);
  valueAxis['axisColor'] = "#DADADA";
  valueAxis['dashLength'] = 1;
  chart2.callMethod('addValueAxis', [valueAxis]);

  var graph = new JsObject(context['AmCharts']['AmGraph']);
  graph['title'] = "Price";
  graph['valueField'] = "price";
  chart2.callMethod('addGraph', [graph]);

  chart2.callMethod('write', ["chart"]);
}

Answer 2

Thank to @Alexandre Ardhuin's answer I found how to do it. Interestingly enough, I do not need to call the 'ready' method:

import 'dart:js';
import 'dart:html';

main(){
  ButtonElement button = new Element.tag("button");
  button.type = "submit";
  querySelector("#button").append(button);
  button.onClick.listen((event) => someCallback());

}

someCallback() {
  display(); // this call _does_ display the chart
}

display() {
  var chartData = [
                   {
                     "date": "2012-03-01",
                     "price": 20
                   },
                   {
                     "date": "2012-03-02",
                     "price": 75
                   },
                   {
                     "date": "2012-03-03",
                     "price": 10
                   }
                   ];

    var chart2 = new JsObject(context['AmCharts']['AmSerialChart']);

    chart2['dataProvider'] = new JsObject.jsify(chartData);
    chart2['categoryField'] = "date";
    chart2['dataDateFormat'] = "YYYY-MM-DD";

    var categoryAxis = chart2['categoryAxis'];
    categoryAxis['parseDates'] = true;
    categoryAxis['minPeriod'] = "DD";
    categoryAxis['dashLength'] = 1;

    var valueAxis = new JsObject(context['AmCharts']['ValueAxis']);
    valueAxis['axisColor'] = "#DADADA";
    valueAxis['dashLength'] = 1;
    chart2.callMethod('addValueAxis', [valueAxis]);

    var graph = new JsObject(context['AmCharts']['AmGraph']);
    graph['title'] = "Price";
    graph['valueField'] = "price";
    chart2.callMethod('addGraph', [graph]);

    chart2.callMethod('write', ["chart"]);
}