DevExtreme DataSource
To get the DataSource instance, call the PieChart's getDataSource() method:
jQuery
index.js
function getDataSource() {
return $("#pieChartContainer").dxPieChart("getDataSource");
}Angular
app.component.ts
app.module.ts
import { Component, ViewChild } from '@angular/core';
import { DxPieChartComponent } from 'devextreme-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent;
// Prior to Angular 8
// @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
getDataSource() {
return this.pieChart.instance.getDataSource();
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxPieChartModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxPieChartModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
App.vue
<template>
<DxPieChart :ref="pieChartRefKey">
<!-- ... -->
</DxPieChart>
</template>
<script>
import DxPieChart from 'devextreme-vue/pie-chart';
const pieChartRefKey = "my-pie-chart";
export default {
components: {
DxPieChart
},
data() {
return {
pieChartRefKey
}
},
methods: {
getDataSource: function() {
return this.pieChart.getDataSource();
}
},
computed: {
pieChart: function() {
return this.$refs[pieChartRefKey].instance;
}
}
}
</script>React
App.js
import { useRef } from 'react';
import PieChart from 'devextreme-react/pie-chart';
export default function App() {
const pieChart = useRef(null);
const getDataSource = () => {
return pieChart.current.instance.getDataSource();
}
return (
<PieChart ref={pieChart}>
{/* ... */}
</PieChart>
);
}Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The PieChart will be updated automatically.
JavaScript
getDataSource().store().push([
{ type: "update", key: "Oranges", data: { count: 10 } },
{ type: "remove", key: "Apples" }
]);See Also
jQuery
Make changes to the array using standard methods. Then, reassign the updated array to the PieChart 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 PieChart
$("#pieChartContainer").dxPieChart("option", "dataSource", fruits);See Also
Feedback