Vue Sankey - JSON Data

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

App.vue
  • <template>
  •     <DxSankey data-source="http://www.example.com/dataservices/data.json">
  •         <!-- ... -->
  •     </DxSankey>
  • </template>
  •  
  • <script>
  • import DxSankey from 'devextreme-vue/sankey';
  •  
  • export default {
  •     components: {
  •         DxSankey
  •     },
  •     data() {
  •         return {
  •             // ...
  •         }
  •     }
  • }
  • </script>

Note that you can also use a JSONP callback parameter.

App.vue
  • <template>
  •     <DxSankey data-source="http://www.example.com/dataservices/jsonpdata?callback=?">
  •         <!-- ... -->
  •     </DxSankey>
  • </template>
  •  
  • <script>
  • import DxSankey from 'devextreme-vue/sankey';
  •  
  • export default {
  •     components: {
  •         DxSankey
  •     },
  •     data() {
  •         return {
  •             // ...
  •         }
  •     }
  • }
  • </script>

You should implement the CustomStore if you need to process data after obtaining it. Refer to the Custom Sources topic for more information.

See Also