All docs
V20.2
22.1 (CTP)
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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.

jQuery
index.js
$(function() {
    const serviceUrl = "https://url/to/my/service";

    $("#chartContainer").dxChart({
        dataSource: DevExpress.data.AspNet.createStore({
            key: 'ID',
            loadUrl: serviceUrl + "/GetAction"
        }),
        // ...
    });
});
Angular
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/odata/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 { }
Vue
App.vue
<template>
    <DxChart :data-source="store">
        <!-- ... -->
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "https://url/to/my/service";

const store = createStore({
    key: 'ID',
    loadUrl: serviceUrl + "/GetAction"
});

export default {
    components: {
        DxChart
    },
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
import Chart from 'devextreme-react/chart';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "https://url/to/my/service";

const store = createStore({
    key: 'ID',
    loadUrl: serviceUrl + "/GetAction"
});

export default function App() {
    return (
        <Chart dataSource={store}>
            {/* ... */}
        </Chart>
    );
}