Documentation ng-apexcharts with API calls

[tom-kotlar]

Could we have documentation on how to use ng-apexcharts with API calls - dynamic data Please? I am planning to create a Dashboard with 10 different graphs.

[tguimmaraess]

Theres no secret, just call data from api, define a variable with data from API and use this variable in your chart data.

Example using the default example from Apex chart site:

import { Component, ViewChild } from "@angular/core";

import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexTitleSubtitle
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
};

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  public dynamicData: any =  []; //Variable that will be used to define dynamic data

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: this.dynamicData   //Instead of [10, 41, 35, 51...] from the default example, we will use the dynamic data variable
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      }
    };
  }

   //Http request to an API to get data
    var re = new XMLHttpRequest();
    re.onreadystatechange = function() { //If state changed
      if(re.readyState == 4 && re.status == 200){ //If it's ready and it was sucessfull, define variable dynamic data with data from api
        this.dynamicData = JSON.parse(re.response); 
      }
    }

    re.open("GET", "your-api", true);
    re.send();

}