Angular Funnel - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

To get the DataSource instance, call the Funnel's getDataSource() method:

jQuery
index.js
function getDataSource() {
    return $("#funnelContainer").dxFunnel("getDataSource");
}
Angular
app.component.ts
app.module.ts
import { Component, ViewChild } from '@angular/core';
import { DxFunnelComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxFunnelComponent, { static: false }) funnel: DxFunnelComponent;
    // Prior to Angular 8
    // @ViewChild(DxFunnelComponent) funnel: DxFunnelComponent;
    getDataSource() {
        return this.funnel.instance.getDataSource();
    }
}
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 :ref="funnelRefKey">
        <!-- ... -->
    </DxFunnel>
</template>

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

const funnelRefKey = "my-funnel";

export default {
    components: {
        DxFunnel
    },
    data() {
        return {
            funnelRefKey
        }
    },
    methods: {
        getDataSource: function() {
            return this.funnel.getDataSource();
        }
    },
    computed: {
        funnel: function() {
            return this.$refs[funnelRefKey].instance;
        }
    }
}
</script>
React
App.js
import { useRef } from 'react';
import Funnel from 'devextreme-react/funnel';

export default function App() {
    const funnel = useRef(null);
    const getDataSource = () => {
        return funnel.current.instance.getDataSource();
    }

    return (
        <Funnel ref={funnel}>
            {/* ... */}
        </Funnel>
    );
}

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Funnel will be updated automatically.

JavaScript
getDataSource().store().push([
    { type: "update", key: "Oranges", data: { count: 10 } },
    { type: "remove", key: "Apples" }
]);
See Also
jQuery
Angular
Vue
React

JavaScript Array

Angular

Enclose the dataSource property in square brackets to bind it to an array using one-way binding. Now, whenever an item is added or removed from the array, the Funnel will be updated accordingly.

HTML
TypeScript
<dx-funnel
    [dataSource]="fruits"
    argumentField="fruit"
    valueField="count">
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = [
        { fruit: 'Apples', count: 10 },
        { fruit: 'Oranges', count: 12 },
        { fruit: 'Lemons', count: 15 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})