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
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.