This post is a complement to Getting Started with Infographics in Tumult Hype and shows off a few methods to work with live numbers, text, and data pulled at regular intervals for use in your visualizations. There are three examples, and sometimes a ‘wall of code’ but I promise these techniques will come in handy if you want to make use of live data in charts, animations, or interactions.

Tumult Hype runs off static JavaScript, HTML, and CSS, so it doesn’t out of the box require or any server side technologies. You can completely avoid any server-side language and make use of the contents of a regular text file. To use the contents of a text file anywhere in your Hype document, you would use a simple XMLHttpRequest which loads a remote URL and grab its contents:

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://tumult.com/support/examples/dynamic-javascript-content-txt-file/text.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file exists.
//allText = txtFile.responseText;
//lines = txtFile.responseText.split("n"); // Will separate each line into an array
var customTextElement = hypeDocument.getElementById('RedRobin');
customTextElement.innerHTML = txtFile.responseText;
}
}
}
txtFile.send(null);

The code above will load the contents of the text.txt URL, and then place it within Hype Element with the ID: RedRobin.

Because of security restrictions, you will only be able to load this on a locally running or remote server. If you receive XML warnings, you may need to adjust your Cross Origin Resource sharing settings on the server containing the .txt file but this should work as is.

Some details about how this works: The above technique pulls in regular text (as a ‘string’ in JavaScript parlance) but you could easily convert it to a number using parseInt(). You could use parseInt(txtFile.response); to ensure you have a real number. This would return ’33’ if the contents of the text file was: “The answer is 33.”

Of course, this technique can pull in data from any number of text files to load different data. To download this basic example, visit this forum post.

Thermometer Hype API Example

For a practical example of how this type of live data can work with your Hype animations, here’s an example Fundraising Thermometer that uses a single number (representing the amount raised) to run an animation. This little guy was created to help my favorite non-profit Global Glimpse to raise some dough (They quickly surpassed their goal!). This number is currently hardcoded into the JavaScript function we use, but it could easily be retrieved from another plain text file.

For example, you could include the ‘raised amount’ variable within hidden text in a WordPress post. Any time you edit that value, the thermometer would reflect the change. You would use something like:

Below is the file, which can also be downloaded here.

And here is the code that controls this contraption:

    // Insert the amount raised
    var raised = 5000

    // And the goal (don't use commas)
    var goal = 40000

    // show these numbers wherever the goal or 'raised amount' is used,
    // and make sure it looks like a number with correct comma placement. 
    document.getElementById('raisedamount').innerHTML = raised.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
    document.getElementById('goal').innerHTML = goal.toString().replace(/B(?=(d{3})+(?!d))/g, ",");

    // No need to edit this: 
    var difference = goal - raised
    var raisedpercentage = difference / goal
    var topflask = hypeDocument.getElementProperty(flask, 'top');
    var currentthermheight = hypeDocument.getElementProperty(flask, 'height')
    var newThermsHeight = currentthermheight * raisedpercentage

    // This is the speed and easing transition of the height of the Thermometer's red portion:
    hypeDocument.setElementProperty(flask, 'height', newThermsHeight, 2.0, 'easeout')

    // Move the arrow as well:
    var topflask = hypeDocument.getElementProperty(flask, 'top');
    var toparrow = hypeDocument.getElementProperty(arrow, 'top');
    var arrowmovement = (toparrow - topflask);
    var thisthat = arrowmovement - (raisedpercentage * arrowmovement); 
    var newpositionarrow = toparrow - thisthat;

    // You may want to edit the 'easeout' transition at the end here:
    hypeDocument.setElementProperty(arrow, 'top', newpositionarrow, 2.0, 'easeout')

This thermometer can easily be resized, modified, or copied into your document.

So far, our examples haven’t been ‘live’ in the true sense. They are pulling static data from a potentially ‘live’ source, but they won’t update automatically if the source of their data changes.

This post from Hans Classen on our forums demonstrates how to extract the contents of a CSV file, and display it within a Tumult Hype document. It requires some server-side code to fetch the CSV file, but then its data is handled entirely within Hype and used to control a voting map. View the page here.

This document makes use of a sprinkling of jQuery and the CountUp.js library to easily animate the increasing value of a number.

And here’s another approach by Mike Heavers which pulls in data from an external file.

If you’re working on Infographics or working with live data, we’d love to see your work! Please get in touch on the forums or @hypeapp.