Timing external javascript with ArcGIS Online embedded map

Question

I have an ArcGIS Online time-enabled map on a webpage. When the map loads, the time slider begins moving. I would like to have a chart that moves along with the time slider, but I don't think ESRI has an option for embedded animated charts (please correct me if I am wrong).

I can place an animated chart below the iFrame, however the biggest issue is that my chart is loading faster than the ESRI map and it throws the timing off. I'm not quite sure what I could use as a mutual variable between the embedded ESRI map and my animated chart. Any suggestions here on how to animate a chart in time with an ESRI embedded map?

Answer 1

While it is possible to share variables between an iframe and the parent webpage, if both are hosted on the same domain (eg. using Global variables), I would highly recommend not going that route if you can avoid it.

I would recommend not using the iframe, and instead hosting the web application code on your own server(s) instead of Esri's. This will allow many more options for sharing the temporal aspects of both the web mapping application and your chart/graphs.

One thing I would suggest adding to your question is which Charting/Graphing JS Library you are considering for that part. I have had good experiences using Leaflet and HighCharts as well as Leaflet and D3 in the past. I would be happy to share some code if you specify which JS Library you are working with.