Ajax Request

Documentation

If your server stores data in JSON format, making AJAX requests is inevitable. But instead of configuring these requests manually, assign the URL of your data storage (in this demo, a JSON file) to the dataSource option, and the Chart will do the rest.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Copy to CodeSandBox

Apply

Reset

<template> <dx-chart id="chart" :rotated="true" data-source="../../../../data/simpleJSON.json" title="Daily Sales" > <dx-argument-axis> <dx-label :customize-text="customizeLabelText"/> </dx-argument-axis> <dx-value-axis> <dx-label :visible="false"/> </dx-value-axis> <dx-series argument-field="day" value-field="sales" type="bar" color="#79cac4" > <dx-label :visible="true" background-color="#c18e92" /> </dx-series> <dx-legend :visible="false"/> <dx-export :enabled="true"/> </dx-chart> </template> <script> import DxChart, { DxArgumentAxis, DxExport, DxSeries, DxValueAxis, DxLabel, DxLegend } from 'devextreme-vue/chart'; export default { components: { DxChart, DxArgumentAxis, DxExport, DxSeries, DxValueAxis, DxLabel, DxLegend }, data() { return { customizeLabelText(e) { return `Day ${e.valueText}`; } }; } }; </script> <style> #chart { height: 440px; } </style>

import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });

<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>

System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });