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

JavaScript Array

jQuery

Make changes to the array using standard methods. Then, reassign the updated array to the Funnel using the option(optionName, optionValue) method.

JavaScript
var fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 }
];

fruits.push({ fruit: 'Pineapples', count: 3 });
// Reassigns the "fruits" array to the Funnel 
$("#funnelContainer").dxFunnel("option", "dataSource", fruits);
See Also

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
    ],
    // ...
})

AngularJS

Declare two-way binding between the dataSource property and the scope property that contains an array. For this, configure the bindingOptions object of the Funnel as follows.

HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-funnel="{
        bindingOptions: {
            dataSource: 'fruits'
        },
        argumentField: 'fruit',
        valueField: 'count'
    }"></div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function ($scope) {
        $scope.fruits = [
            { fruit: 'Apples', count: 10 },
            { fruit: 'Oranges', count: 12 },
            { fruit: 'Lemons', count: 15 }
        ];
    });

Now, whenever an item is added or removed from the fruits array, the Funnel will be updated accordingly. If you need to track changes in objects, configure the bindingOptions object as follows.

HTML
<div ng-controller="DemoController">
    <div dx-funnel="{
        bindingOptions: {
            dataSource: {
                dataPath: 'fruits',
                deep: true
            }
        },
        argumentField: 'fruit',
        valueField: 'count'
    }"></div>
</div>

In this case, the Funnel will use the $watch listener instead of the default $watchCollection listener. Note that the use of the $watch listener may impact the Funnel's peformance.

See Also

Knockout

Declare the array observable and bind the dataSource property to it. Whenever an item is added or removed from this array, the Funnel will be updated accordingly.

HTML
JavaScript
<div id="funnelContainer" data-bind="dxFunnel: {
    dataSource: fruits,
    argumentField: 'fruit',
    valueField: 'count'
}"></div>
var viewModel = {
    fruits: ko.observableArray([
        { fruit: 'Apples', count: 10 },
        { fruit: 'Oranges', count: 12 },
        { fruit: 'Lemons', count: 15 }
    ])
};

ko.applyBindings(viewModel);
See Also