Refreshing the view in Hype Data Magic

Hi Max

On the example posted when you click the preview button the data inside the test file is displayed.
How can one update the file while the data is previewed? Almost like a live update on dataMagic.

The reason for the question is that i would like to create a template to display different numbers, and that would then be linked back to a .Json file, which would change every few seconds based on if there is new data to display.

That is easy, Just call the fetch function again. Only thing to keep in mind, you would need to have a URL that produces new data. Given that the example only uses a static JSON file from the resources folder, fetch will always return the same data. Where does the data originate from, and what are the conditions that would trigger a fetch? Fixed time interval?

Hi Max

I have called the fetch function more than once on the timeline,
We would update the Static Json file over and over again.

Okay, if it’s the same url a classic source for stale data is the browser caching the data. Maybe just add a random number, the date or time (microsecond) to the URL as a GET parameter. BTW, I (or others) can help better with a file to view what your trying todo if this doesn’t fix it.


'${resourcesFolderName}/test.json?'+ window.performance.now()

1 Like

Hi Max

Hope all is well,

simple_fetch_example_with_hype_data_magic.hype.zip (63.8 KB)

I've attached your original project based on Data Magic, and was hoping you could help me to update the Test.json file, in the resourcesFolderName.

As you would noticed i'm calling the fetch function more than once in timeline, and have added in the suggested change '${resourcesFolderName}/test.json?'+ window.performance.now() to project,
but once i have launched the project i'm unable to get the data to reflect the changes made in text file.

Hope to hear from you soon.

I cleaned minimal, but no changes in function. Works for me.

What do you mean by "started". Is it running on a webserver while you change the data? Running if from file:// or cross-origin from localhost is not possible because of CORS or you would need to use a JS file with data instead of JSON (less restrictive).

You surly are not changing the data in the localhost server of the preview from Hype? Runs from the scratch disk with no easy access to the file. Putting it on a server works perfect. As seen in the video. File I am editing is via FTP.

Little tip: To have the animation and the data refresh in line. Don't start the timeline automatic, but in the on load handler.

If it needs to be file:// have a look at JSONP (fancy word for data as a JS file):

You can also configure a server to disable CORS:

Using the.htaccess method, for example:

<Files "*.json">
  Header set Access-Control-Allow-Origin "*"
</Files>

Now I can run locally and even from file:// and change the data on the server.
The only thing I changed in the Hype file in this setup…
I am loading the file from the prepared online folder

fetch('https://playground.maxziebell.de/CORS-free-JSON/test2.json?'+ window.performance.now())
1 Like