Vue Funnel - JSON Data

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

jQuery
index.js
$(function() {
    $("#funnelContainer").dxFunnel({
        dataSource: "http://www.example.com/dataservices/data.json",
        // ...
    });
});
Angular
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 { }
Vue
App.vue
<template>
    <DxFunnel data-source="http://www.example.com/dataservices/data.json">
        <!-- ... -->
    </DxFunnel>
</template>

<script>
import DxFunnel from 'devextreme-vue/funnel';

export default {
    components: {
        DxFunnel
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import Funnel from 'devextreme-react/funnel';

export default function App() {
    return (
        <Funnel dataSource="http://www.example.com/dataservices/data.json">
            {/* ... */}
        </Funnel>
    );
}

Note that you can also use a JSONP callback parameter.

jQuery
index.js
$(function() {
    $("#funnelContainer").dxFunnel({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        // ...
    });
});
Angular
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 { }
Vue
App.vue
<template>
    <DxFunnel data-source="http://www.example.com/dataservices/jsonpdata?callback=?">
        <!-- ... -->
    </DxFunnel>
</template>

<script>
import DxFunnel from 'devextreme-vue/funnel';

export default {
    components: {
        DxFunnel
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import Funnel from 'devextreme-react/funnel';

export default function App() {
    return (
        <Funnel dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
            {/* ... */}
        </Funnel>
    );
}

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

See Also