Vue 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.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>