Search code examples
highcharts

NetworkGraph: fit into view & redraw

I'm using a network graph where nodes can be displayed or hidden (I'm using a toggle ancestors buttons to hide providers and regions).

Is there a way to force the graph to fit into it's container? I've tried chart.reflow(), but it was unsuccessful...

Each time I toggle on ancestors, the map is well updated, but when hidded, the map remain moved like if ancestors are still displayed.

enter image description here

This first screen is the initial state of my network. On the bottom right, you can see some buttons, which are the one I'm trying to implement.

The refresh button is supposed to redraw the graph, as if it was the first rendering.

It is tied to the following code:

function redraw() {
    chart.series.at(0).render();
}

The button immediatly on its right, which look like a small graph, is used in order to enable ancestors.

It is tied to the following code:

dataset = extractSeries(stubedNetwork, enableAncestors);

chart.series.at(0).update({
    data: dataset.data,
    nodes: dataset.nodes,
}, true);

Once ancestors have been enabled, ancestors are well displayed, but the simulation does not seems to be restarted.

enter image description here

My first question may be dumb, but... How can I really restart the simulation once data has been updated?

The second one is regarding nodes. If data is used by network graph in order to compute nodes, nodes intels are supposed to be provided to the serie using the node key.

I can't see how to update those nodes, but I think I miss something in the documentation. Can someone point me to the right direction?

Another strategy may be to use different series for routers and ancestors, but I'm not sure I can link them together using different series...

Solution

  • My first question may be dumb, but... How can I really restart the simulation once data has been updated?

    The simplest way is to recreate the chart with new data:

      chart = Highcharts.chart('container', {
    ...chartOptions,
    series: [{
      ...,
      data: [...]
    }]
  });

    I can't see how to update those nodes, but I think I miss something in the documentation. Can someone point me to the right direction?

    You can update a specific node in the below way:

      chart.series[0].nodes[0].update({
    marker: {
        radius: 10
    }
  });

    Live demo: https://jsfiddle.net/BlackLabel/q6teyn1o/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update