JavaScript/jQuery Sankey - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

To get the DataSource instance, call the Sankey's getDataSource() method:

index.js
  • function getDataSource() {
  • return $("#sankeyContainer").dxSankey("getDataSource");
  • }

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Sankey will be updated automatically.

JavaScript
  • getDataSource().store().push([
  • { type: "update", key: "Oranges", data: { count: 10 } },
  • { type: "remove", key: "Apples" }
  • ]);
See Also

JavaScript Array

You can use the standard methods to make changes to the array. Then, use the option(optionName, optionValue) method to reassign the updated array to the Sankey.

JavaScript
  • var sankeyData = [
  • { source: "Brazil", target: "Spain", weight: 4 },
  • { source: "Brazil", target: "Portugal", weight: 5 },
  • { source: "Brazil", target: "England", weight: 2 },
  • { source: "Canada", target: "Portugal", weight: 2 },
  • { source: "Canada", target: "England", weight: 1 },
  • { source: "Mexico", target: "Portugal", weight: 9 },
  • { source: "Mexico", target: "Spain", weight: 5 }
  • ];
  •  
  • sankeyData.push({ source: "Mexico", target: "Spain", weight: 2 });
  • // Reassigns the "sankeyData" array to the Sankey
  • $("#sankeyContainer").dxSankey("option", "dataSource", sankeyData);
See Also