Angular PieChart - JSON Data

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

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>

Note that you can also use a JSONP callback parameter.

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>

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

See Also