DevExtreme Angular - JSON Data

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

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

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

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

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

See Also