Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to create a sankey highchart graph with a grouping node

I have some flights data which looks like this:

[{"from":"NY", "to":"Oslo", "company": "Norwegian", "flights":3},
{"from":"NY", "to":"Paris", "company": "Norwegian", "flights":2},
{"from":"Miami", "to":"Berlin", "company": "Norwegian", "flights":1},
{"from":"Miami", "to":"London", "company": "SAS", "flights":1}]

I’m looking for a way to implement a highcharts sankey/alluvial or similar graph where "from" will be on the left side, the company involved will be in the middle and the destination will be on the right.

The problem is that there doesn’t seem to be a way of actually doing it.

I can sort of get the look of it by faking data and doing a: {From => company}, {company => to}-mapping, according to this fiddle: https://jsfiddle.net/1a9h8kz0/1/

Looks ok but doesn't quite work

But it doesn’t really work properly, for example, when hovering on NY, i want it to display all the targets of NY (Oslo and Paris) but it only goes to the "Norwegian".

This is not really strange, because there’s no connection between the source and target destinations, only through the "middle".

So, is there a way of making it recognize the flow of data between from => company => to and properly display the lines when doing tooltips etc?

Tags:

2

Answers


  1. 0

    I think you were very close to the solution!
    After checking the library I tried to edit your configuration file with that values:

    tooltip: {
        pointFormat: '{point.fromNode.name} → {point.toNode.name}: <b>{point.weight}</b>'
    },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['NY', 'Norwegian', 3],
            ['Norwegian', 'Oslo', 3],
            ['NY', 'Norwegian', 2],
            ['Norwegian', 'Paris', 2],
            ['Miami', 'Norwegian', 1],
            ['Norwegian', 'Berlin', 1],
            ['Miami', 'SAS', 1],
            ['SAS', 'London', 1]
        ],
        name: 'Flight Routes'
    }]

    With pointFormat we can custom the tooltip value to render both from and to strings. I used keys with data as a matrix as documented in the highchart docs.

    Let me know if that is what you expected as result!

    Result

    Login or Signup to reply.
  2. 0

    All right, I know what the problem is. The suggested solution would be to create a linksHover function to highlight connected nodes and links dynamically. Here’s the code:

    function linksHover(point, state) {
  if (point.isNode) {
    point.linksFrom.forEach(l =>
      l.toNode.linksFrom.forEach(node => node.setState(state))
    );
  }
}

    And in your chart config:

    plotOptions: {
  sankey: {
    point: {
      events: {
        mouseOver: function () {
          linksHover(this, "hover");
        },
        mouseOut: function () {
          linksHover(this, "");
        },
      },
    },
  },
},

    Demo: https://jsfiddle.net/BlackLabel/qo38yxkm/1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search