Vue PieChart - JSON Data

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

jQuery
index.js
$(function() {
    $("#pieChartContainer").dxPieChart({
        dataSource: "http://www.example.com/dataservices/data.json",
        // ...
    });
});
Angular
app.component.html
app.module.ts
<dx-pie-chart dataSource="http://www.example.com/dataservices/data.json">
    <!-- ... -->
</dx-pie-chart>
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 data-source="http://www.example.com/dataservices/data.json">
        <!-- ... -->
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import PieChart from 'devextreme-react/pie-chart';

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

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

jQuery
index.js
$(function() {
    $("#pieChartContainer").dxPieChart({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        // ...
    });
});
Angular
app.component.html
app.module.ts
<dx-pie-chart dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
    <!-- ... -->
</dx-pie-chart>
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 data-source="http://www.example.com/dataservices/jsonpdata?callback=?">
        <!-- ... -->
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import PieChart from 'devextreme-react/pie-chart';

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

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

See Also