DevExtreme Angular - JSON Data

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

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

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

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

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

See Also