how to use AmCharts Methods in component

[rahulscp]

how can i access the predefined methods of amcharts for various functionalities for example in the below code

 private chart: any = makeChart({
      dataProvider: this.data,
      fillColors: "red"
      });

how to use .validateNow() method on the variable chart

hoping for a quick response. any help is much appreciated

[Pauan]

Hi @rahulscp,

You do not need to call validateNow(), instead it is called for you automatically when the chart changes.

If you want to call other methods, the best way is to use the init event listener which gives you access to the chart:

const makeChart = ({ dataProvider, fillColors } : Configuration) => {
  return {
    "type": "serial",
    "theme": "light",
    ...
    "listeners": [{
      "event": "init",
      "method": function (x: any) {
        x.chart.zoomOut();
      }
    }]
  };
};

[QuocMinhTran]

Hi, I tried to add 1 more item to the dataset but nothing changed. Onclick() { this.data.push({"category": "Module #6", "segments": [{ "start": 4, "end": 6, "color": "#448e4d", "task": "Gathering requirements" }, { "start": 7, "end": 9, "task": "Producing specifications" }, { "start": 11, "end": 15, "task": "Development" }, { "start": 16, "end": 18, "task": "Testing and QA" }]}) console.log(this.data); this.chart.dataProvider = this.data; } }

[Pauan]

@QuocMinhTran As explained on the main page, if you want to make a change to your chart's configuration, you need to first make a deep copy:

// Make a copy of the existing config
this.chart = JSON.parse(JSON.serialize(this.chart));

// Change the config
this.chart.dataProvider.push(...);

Alternatively you can use a function to generate the configuration and then call that function on every change:

function makeConfig(dataProvider) {
  return {
    "type": "serial",
    "theme": "light",
    "dataProvider": dataProvider
    ...
  };
}

// Change the config
this.chart = makeConfig([...]);

The reason this is necessary is because of how Angular2 handles data updates.