DevExtreme Angular - JSON Data

To bind the Chart to data in a JSON format, assign the data's URL to the dataSource option.

HTML
TypeScript
  • <dx-chart dataSource="http://www.example.com/dataservices/data.json">
  • <dxi-series ... ></dxi-series>
  • </dx-chart>
  • import { DxChartModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

HTML
TypeScript
  • <dx-chart dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
  • <dxi-series ... ></dxi-series>
  • </dx-chart>
  • import { DxChartModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })

If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.

View Demo

See Also