0

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

newcomer
  • 1
  • 3

1 Answers1

0

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

Sebastian Hajdus
  • 1,422
  • 1
  • 5
  • 14
  • I wanted the graph to be static, but each node to be flashing at interval of 60 second one after another, something similar to http://jsfiddle.net/BlackLabel/bxa64930/ , can you help me how to achieve that for network graph where each node will flicker in sequence one after another after 1 minute? – newcomer Jul 27 '22 at 14:01
  • I tried to add .graphic.animate to chart.series[0].options.data[0] but it says graphic not present . – newcomer Jul 27 '22 at 14:17
  • You can use `chart.series[0].nodes[2]`, to get to the nodes and change node color, [Demo](https://jsfiddle.net/BlackLabel/q3j61s7m/3/) – Sebastian Hajdus Jul 28 '22 at 10:58
  • Thanks for your comment and help, but I see you are using key animation frames which doesn’t work with react native highcharts is there another way to use only config file of highcharts to get this animation? Would really appreciate your help – newcomer Jul 28 '22 at 13:21
  • https://jsfiddle.net/newbster/ah4fLw3b/ , i tried to modify it without css but i see that animation happen. only on hover over node or click, can we have it automated , for example at 11AM first node blinks, then after 1 minute next two node and so on – newcomer Jul 28 '22 at 17:54
  • You can use the update method to change the color [demo](https://jsfiddle.net/BlackLabel/j421r6we/2/) – Sebastian Hajdus Jul 29 '22 at 15:52
  • Thanks for the help, so for each node i will have to have multiple settimeout? As what i want is something like : 11AM first node lights up and stays lit up , then 11:01AM after one mintue second node lights up and stay slit up, then at 11:03AM 3rd and 4th node is lit up and stays lit up . Let me know how to go about it cleanly. Thanks once again for your help – newcomer Jul 29 '22 at 22:57
  • [Chained promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#chained_promises) should fit good in that case, with setTimeout inside promise. – Sebastian Hajdus Jul 31 '22 at 10:25