Angular Funnel - JSON Data

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

app.component.html
app.module.ts
  • <dx-funnel dataSource="http://www.example.com/dataservices/data.json">
  • <!-- ... -->
  • </dx-funnel>
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxFunnelModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxFunnelModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

Note that you can also use a JSONP callback parameter.

app.component.html
app.module.ts
  • <dx-funnel dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
  • <!-- ... -->
  • </dx-funnel>
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxFunnelModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxFunnelModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

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

See Also