DevExtreme React - JSON Data

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

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        dataSource: "http://www.example.com/dataservices/data.json"
    });
});
Angular
HTML
TypeScript
<dx-pie-chart
    dataSource="http://www.example.com/dataservices/data.json">
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})

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

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?"
    });
});
Angular
HTML
TypeScript
<dx-pie-chart
    dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})

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

See Also