DevExtreme - New Sankey Diagram (v18.2)

22 February 2019

Please listen up, all you data analysts: DevExtreme now supports a Sankey diagram. This diagram displays relationships between nodes, which are technically called links. From the perspective of the data, this is often about flow, for instance of goods or services – but any type of relation between groups of subjects can be visualized by a Sankey diagram.

As usual, the new functionality is available on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

Sankey Diagram

The diagram above can be rendered using the following code. You can see how the weight values are automatically rendered as links of differing widths.

$(function() {
  $('#sankey').dxSankey({
    dataSource: [
      { source: 'Brazil', target: 'Portugal', weight: 5 },
      { source: 'Brazil', target: 'France', weight: 1 },
      { source: 'Brazil', target: 'England', weight: 1 },
      { source: 'Canada', target: 'Portugal', weight: 1 },
      { source: 'Canada', target: 'France', weight: 5 },
      { source: 'Canada', target: 'England', weight: 1 }
    ],
    link: {
      colorMode: 'gradient'
    }
  });
});

A demo for the Sankey diagram is available, which you can modify and play with yourself. We also have Overview and API documentation available.

Thanks to everybody who already provided us with feedback during the development phase of this widget. We are still interested in your thoughts! Please feel free to leave a comment below, and it would be great if you could submit your responses to this short survey:

3 comment(s)
J Joubert

Hi

Please consider bringing this to the dashboard controls as well.

Thanks

25 February, 2019
Baldur Fürchau

I agree with the above statement.

This will be the only way, where i can use these control, because our application has only the ASPxDashboard.

25 February, 2019
Andrey (DevExpress)

@J Joubert

@Baldur Fürchau

Thank you for your interest in this new control as a part of DevExpress Dashboard.

We will take it into account when planning our next release.

As you know, DevExpress Dashboard is a cross-platform product. Thus we would need to discuss this control implementation in our WinForms / WPF control suites as well. We recently discussed a similar situation in our WinForms Sunburst Control Blog Post community.devexpress.com/.../winforms-sunburst-control-a-circular-treemap-v18-2.aspx

We would appreciate it if you describe a real-life scenario of Sankey Diagram in your dashboard.

26 February, 2019

Please login or register to post comments.