How to get a chart from an open-source chart library into twine game

Question

Hi :)

I'm just wondering if anyone knows how I would get a line graph from an open-source chart library to display in a passage of my twine game (for example, from rgraph)?

Thanks a lot,

Nat

Answer 1

If you just need help loading the library, then putting this code at the top of your JavaScript section should work:

if (window.hasOwnProperty("storyFormat")) {
	// Change this to the path where the JavaScript file is
	// located if you want to run this from inside Twine.
	setup.Path = "C:/Games/YourGame/";  // Running inside Twine application
} else {
	setup.Path = "";  // Running in a browser
}

setup.JSLoaded = false;
importStyles(setup.Path + "jquery-ui.css");
importScripts(setup.Path + "jquery-ui.js")
	.then(function() {
		setup.JSLoaded = true;
	}).catch(function(error) {
		alert(error);
	}
);

That code will work both within Twine and as an HTML file, because the first part sets up an absolute path if you're in Twine, otherwise it uses a relative path.  (You will need to edit that path in the code.)

The second part shows how to load CSS and JS files in, and how to detect whether they loaded or not (using the JSLoaded variable on the setup object), and displays an error popup (using the JavaScript "alert()" function) if it fails.

See the importStyles() and importScripts() functions in the SugarCube documentation for details.

Once the library is loaded, you should be able to use it as normal (barring any quirks of interactions with Twine).

Hope that helps!

Comments

Thanks a lot for you help - really appreciate it! :) Just trying to get it working now!

---

Sorry I'm not all that great with the basics of programming...

Would you be able to tell me what relative and absolute paths to put in above if my game is called say "twinegame", located in the "games" folder in "Documents" on a mac? Sorry for such a basic question

Thanks again for your help :)

---

I don't really know Macs, but the easiest way to see the absolute path would be to open the HTML file on your computer in a browser and look in the URL bar to see what path you should use.

For example, on Windows I might get something like this in the URL bar of my browser:

file:///C:/Games/MyGame/GameName.html

so the absolute path would be "C:/Games/MyGame/", assuming you're putting the JavaScript files in the same directory as the HTML.  The relative path, in that case, would be "" (an empty string), since it's the same directory as the HTML.

If you have the JavaScript files in, for example, a directory named "scripts", then you could do either this:

if (window.hasOwnProperty("storyFormat")) {
	// Change this to the path where the JavaScript file is
	// located if you want to run this from inside Twine.
	setup.Path = "C:/Games/MyGame/scripts/";  // Running inside Twine application
} else {
	setup.Path = "scripts/";  // Running in a browser
}

or this:

setup.JSLoaded = false;
importStyles(setup.Path + "scripts/jquery-ui.css");
importScripts(setup.Path + "scripts/jquery-ui.js")
	.then(function() {
		setup.JSLoaded = true;
	}).catch(function(error) {
		alert(error);
	}
);

but not both.

Also, make sure you always use the same upper- and lower-case names as the directories and filenames, since some OSes and browsers are case sensitive.

Have fun!

---

That's brilliant, thanks again for your help! :)

Answer 2

@natstudent
Are you using the Twine 2.x application to build your story HTML, or a command line TWEE compiler like TweeGo?

I ask because adding large JavaScript libraries (like RGraph) to a story is generally easier when using something like TweeGo.