jQuery 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
Feedback