DevExtreme React - JSON Data

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

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        dataSource: "http://www.example.com/dataservices/data.json",
        argumentField: 'arg',
        valueField: 'val'
    });
});
Angular
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().

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        argumentField: 'arg',
        valueField: 'val'
    });
});
Angular
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