CODEWITHSUNDEEP
javascriptplotly
PintoDoido
PintoDoido

Reputation: 1051

Plotly.js -Heatmap animation not showing

I am trying to animate a heat map using Plotly using this tutorial https://plot.ly/javascript/animations/#animating-many-frames-quickly. So far I defined a matrix rho, containing 100 x 100 entries, that are updated using the compute() function:

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
    <div id="graph" style="position: relative; width: 600px; height: 500px;"></div>

    <script>

    /* Define matrix that represents physical quantity */  

    var rho = [];
    for(var n=0; n<100; n++) {
        rho[n] = [];
        for(var l=0; l<100; l++) {
            rho[n][l] = n * l;
        }
    }

    var dummy = 1;

    var data = [
      {
        z: rho,
        type: 'heatmap'
      }
    ];

    Plotly.newPlot('graph', data);

    function compute(){
        dummy++;
        for(n = 0; n < 100; n++)
        {
            for(l = 0; l < 100; l++)
            {
            data[0].z[n][l] = Math.sin(0.2 * (n * l- 0.05 * dummy) );
            }
        } 
    }


    function update() {

        compute();

        Plotly.animate('graph', {data: [{z: rho,type: 'heatmap'}]},
        {transition: {duration: 0}, frame: {duration: 0, redraw: false}}
        )

    requestAnimationFrame(update);
    }

    requestAnimationFrame(update);

  </script>

</body>

</html>

The page will display the plot element and the Firefox terminal/debugger will only output the non-related error:

The character encoding of the HTML document was not declared.

However, the graph does not show, nevermind the animation. I can see that the values of rho are being updated via the mouse coursor.

Why is the animation not visible?

Thanks

Upvotes: 0

Views: 711

Answers (1)

Marco Sandri
Marco Sandri

Reputation: 24262

You need to define rho inside update. See below.

var rho = [];
    for(var n=0; n<100; n++) {
        rho[n] = [];
        for(var l=0; l<100; l++) {
            rho[n][l] = n * l;
        }
    }

    var dummy = 1;

    var data = [
      {
        z: rho,
        type: 'heatmap'
      }
    ];

    function compute() {
        dummy++;
        for(n = 0; n < 100; n++)
        {
            for(l = 0; l < 100; l++)
            {
            data[0].z[n][l] = Math.sin(0.2 * (n * l- 0.05 * dummy) );
            }
        }
    }

    Plotly.newPlot('graph', data);
	
    function update() {
        compute();
        rho = data[0].z;
        Plotly.animate('graph', 
                       {data: [{z: rho, type: 'heatmap'}]}, 
                       {transition: {duration: 750}, 
                        frame: {duration: 1000, redraw: true}})
        requestAnimationFrame(update); 
    }

    requestAnimationFrame(update);
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
    <div id="graph" style="position: relative; width: 600px; height: 500px;"></div>

Upvotes: 1

Related Questions