Graphing for sugarcube?

Question

Hello, I am working on a project which will include changing variables. The idea I have is that a graph will show the changes that variable one went through, similar to a line graph. (Example below)

 https://datavizcatalogue.com/methods/images/top_images/line_graph.png

What im hoping is possible is that there is either some code o a plugin that could shot multiple variables changing over time.

Answer 1

You could take a look at Chart.js, it looks like it can do what you want.

Comments

Thank,s it looks like it should work. If its not too much to ask, how do you install it in twine?

---

I use code like this to load external JavaScript files:

if (window.hasOwnProperty("storyFormat")) {
	// Change this to the path where your HTML file is
	// located if you want to run this from inside Twine.
	setup.Path = "C:/Twine/Sample_Code/";  // Running inside Twine
} else {
	setup.Path = "";  // Running a published HTML version
}

setup.JSLoaded = false;
importScripts(setup.Path + "chart.js"
	).then(function() {
		setup.JSLoaded = true;
	}).catch(function(error) {
		alert(error);
	});

That will set "setup.JSLoaded" to true once the chart.js file is loaded, which you'd likely only need to worry about in the first passage.  (Shows a pop-up error message if the file can't load.)

Then, to access the canvas you'll probably need code something like this in your passage:

<<script>>
$(document).one(':passagerender', function (ev) {
	var ctx = ev.content.getElementById('canvas').getContext('2d');
	var config = { (your Chart.js configuration stuff here) };
	window.myLine = new Chart(ctx, config);
}
<</script>>

Hope that helps!  :-)

Answer 2

Your requirements can be broken down into two parts:

1. How to determine the value history of a particular story variable.

The following JavaScript code, which needs to be place within your project's Story Javascript area, defines a valueHistory() function on the setup object which uses the State API to determine both the current and previous values of a story varaible..

/*
	setup.valueHistory(variableName)

	Arguments:
		variableName: The name (without $) of the Story Variable to want the history for.

	Returns:
		An Array containing each of the values (in moment order) that the variable was assigned.

	Example:
		/% Assuming assignment of a variable like <<set $counter to 10>> %/
		Counter History: <<= setup.valueHistory('counter')>>
*/
setup.valueHistory = function (variableName) {
	var values = [];
	var previous = null;

	/* Check the past. */
	if (State.length) {
		for (var i = 0; i < State.length; i++) {
			var V = State.index(i).variables;
			if (V.hasOwnProperty(variableName) && V[variableName] != previous) {
				previous = V[variableName];
				values.push(previous);
			}
		}
	}

	/* Check the present. */
	V = State.variables;
	if (V.hasOwnProperty(variableName) && V[variableName] != previous) {
		values.push(V[variableName]);
	}

	return values;
};

2. How to graph the value history of the story variable.

@HiEv indicated a Javascript library that you may be able to use to do this, if you have issues using it then you may want to add to this question later, or even create a new question.