Angular Chart - Web API Service

DevExtreme provides the DevExtreme.AspNet.Data extension to access an ASP.NET Web API service. This extension consists of two parts: the server-side part implements data processing on the server according to the protocol the Chart uses; the client-side part creates and configures a CustomStore to access the server from the client. The following code shows how to use the extension's client-side createStore method.

app.component.html
app.component.ts
app.module.ts
  • <dx-chart [dataSource]="store">
  • <!-- ... -->
  • </dx-chart>
  • import { Component } from '@angular/core';
  • import CustomStore from 'devextreme/data/custom_store';
  • import { createStore } from "devextreme-aspnet-data-nojquery";
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • store: CustomStore;
  • constructor() {
  • const serviceUrl = "https://url/to/my/service";
  • this.store = createStore({
  • key: 'ID',
  • loadUrl: serviceUrl + "/GetAction"
  • });
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxChartModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxChartModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }