React 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.
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.