Is possible to do animation map method?

[deryann]

Dear: I use example like doc in plotly ( https://plotly.com/javascript/map-animations/#map-animations )

I do not know how to add then function in the plug in to let control workable. in grafana plotly panel I add following script in the Script

If there is a solution or some workaround method, please let me know. Thank you.

data_arr = [{"time":4,"latitude":"54.98","longitude":"13.199", "value":10},  
            {"time":5,"latitude":"56.98", "longitude":"13.199", "value":5},  
            {"time":6,"latitude":"59.98", "longitude":"13.199", "value":0}];  

function filter_and_unpack(rows, key, time) {  
return rows.filter(row => row["time"] == time).map(row => row[key])}

var frames = [];
var slider_steps = [];
var array_d = [4,5,6]
for (var i = 0; i < 3; i++) {
   d = array_d[i]
   var latitude= filter_and_unpack(data_arr , "latitude", d);
   var longitude= filter_and_unpack(data_arr , "longitude", d);
   var color= filter_and_unpack(data_arr , "value", d);
   frames[i] = {data: [{lat: latitude , lon: longitude, color: color}], name: d}
    console.log(i);
    console.log(frames[i]);

   slider_steps.push ({
     label: d.toString(),
     method: "animate",
     args: [[d], {
         mode: "immediate",
         transition: {duration: 300},
         frame: {duration: 300}
        }
      ]
    })
  }

var data = [{
    type: 'scattermapbox',
    lat: frames[0].data[0].lat,
    lon: frames[0].data[0].lon,
    mode: 'markers',
    marker: {
      color: frames[0].data[0].color,
      cmin: 0,
      cmax: 10,
      }
}];

var layout = {
    title: 'Plot Title',
    updatemenus: [{
      x: 0.1,
      y: 0,
      yanchor: "top",
      xanchor: "right",
      showactive: false,
      direction: "left",
      type: "buttons",
      pad: {"t": 87, "r": 10},
      buttons: [{
        method: "animate",
        args: [null, {
          fromcurrent: true,
          transition: {
            duration: 200,
          },
          frame: {
            duration: 500
          }
        }],
        label: "Play"
      }, {
        method: "animate",
        args: [
          [null],
          {
            mode: "immediate",
            transition: {
              duration: 0
            },
            frame: {
              duration: 0
            }
          }
        ],
        label: "Pause"
      }]
    }],
    sliders: [{
      active: 0,
      steps: slider_steps,
      x: 0.1,
      len: 0.9,
      xanchor: "left",
      y: 0,
      yanchor: "top",
      pad: {t: 50, b: 10},
      currentvalue: {
        visible: true,
        prefix: "date:",
        xanchor: "right",
        font: {
          size: 20,
          color: "#666"
        }
      },
      transition: {
        duration: 300,
        easing: "cubic-in-out"
      }
    }]
};

Plotly.setPlotConfig({
  mapboxAccessToken: "FAKE_KEY"
})
 Plotly.newPlot('myDiv', data, layout).then(function() {
     Plotly.addFrames('myDiv', frames);
   });