CODEWITHSUNDEEP
highchartsreact-highchartsangular-highchartshighcharts-react-native
newcomer
newcomer

Reputation: 1

How to add animation flashing for netwrok graph highcharts?

I want to add each node to flash after one minute interval, is there a way to do that ? Can someone please help, Here is my codepen with code so far

https://codepen.io/wranter/pen/zYWEoXO

Upvotes: 0

Views: 175

Answers (1)

Sebastian Hajdus
Sebastian Hajdus

Reputation: 1560

It's options to add point with delay in load event with setTimeout. You can zero maxIterations property and define custom postions for the new points in redraw event:

  chart: {
    events: {
      load: function() {
        var chart = this;

        setTimeout(function() {
          chart.series[0].addPoint(['G', 'Z'], true);
        }, 2000);
        setTimeout(function() {
          chart.series[0].addPoint(['A', 'X'], true);
        }, 4000);
      },
      redraw: function() {
        var newNode = this.series[0].nodes[7];

        newNode.plotX = 100;
        newNode.plotY = 100;
      }
    }
  },

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

series.networkgraph.layoutAlgorithm.maxIterations

chart.events.load

chart.events.redraw

------ EDIT -------

You can use the update method to change the color of the node in the static version of the networkgraph, which by default redraws until the end of the animation. The update method already has redraw in it so after each color change the graph is redrawn.

  chart: {
    type: 'networkgraph',
    events: {
      load: function() {
        var chart = this,
          node = chart.series[0].nodes[2];

        setInterval(function() {
          if (node.color !== 'yellow') {
            node.update({
              color: 'yellow'
            })
          } else {
            node.update({
              color: 'green'
            })
          }
        }, 500)
      },
    }
  },

Demo: https://jsfiddle.net/BlackLabel/j421r6we/2/

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

Upvotes: 0

Related Questions